これはなに? 複数のユーザーロールや類似機能を含むフロントエンドで、コンポーネントをどう分割すべきか悩んだことはありませんか?本記事では「機能的凝集」という考え方と、remix-flat-routes のコロケーション構成を組み合わせることで、条件分岐が散らばりにくく保守しやすい設計を紹介します。 本記事では以下の技術スタックを前提としています。 React Router v7(framework モード、loader / action 使用) remix-flat-routes(Nested folders with flat-files convention) route.tsx をエントリポイントとしたコロケーション構成 本記事の内容を Notebook LM でスライド化したものも公開しています。視覚的に概要を把握したい方はこちらもどうぞ。 本記事のガイドラインを Claude C

