見出し画像
Photo by pansansui

【2026年版】脱・スパゲッティコード！拡張性が止まらないReactプロジェクトのフォルダ構成と分割術

関野泰宏

あけましておめでとうございます！元日から学習を継続されるその姿勢、本当に素晴らしいです。2026年のスタートを一緒に切れることを光栄に思います。本年もよろしくお願いいたします。

昨日は50日目の節目として、アプリの全体設計と環境構築について学びました。本日51日目は、いよいよ「プロジェクトのフォルダ構造」と、クリーンなコードを保つための「コンポーネントの分割指針」 について深掘りします。

はじめに：なぜ「フォルダ構成」が重要なのか？

アプリを作り始めると、ファイル数はあっという間に数十個に増えます。適当な場所にファイルを置いていると、「あのボタンのコード、どこだっけ？」と探すだけで時間を浪費してしまいます。

実務でも通用する、「見通しの良いフォルダ構成」 を最初に固めておくことが、爆速開発への近道です。

💡 1. 推奨されるディレクトリ構造 (Bulletproof React参考)

モダンなReact開発でよく使われる、機能ごとに分ける構成案です。

src/
 ├── assets/          # 画像、アイコン、フォント
 ├── components/      # 共通パーツ（Button, Input, Cardなど）
 ├── features/        # 機能単位の塊（Auth, TodoList, UserProfileなど）
 │    └── todo/
 │         ├── components/  # Todo専用の部品
 │         ├── hooks/       # Todo専用のカスタムフック
 │         └── types/       # 型定義
 ├── hooks/           # アプリ全体で使うカスタムフック (useAuthなど)
 ├── pages/           # 各画面のルートコンポーネント（Routerと対応）
 ├── services/        # API通信(axios/fetch)のロジック
 └── utils/           # 共通の関数（日付フォーマットなど）

💡 2. コンポーネント分割の「3つの基準」

一つのファイルが300行を超えたら、分割を検討しましょう。基準は以下の通りです。

  1. 再利用性: 他の場所でも使いそうか？（例：送信ボタン）

  2. 責任の分離: 「見た目」と「複雑なロジック」が混ざりすぎていないか？

  3. 可読性: 1つのコンポーネントが1つのことだけ（Single Responsibility）をしているか？

💡 3. 実践：Atomic Designを簡略化して取り入れる

本格的なAtomic Designは複雑すぎることが多いため、最初は以下の2段階で考えるのがおすすめです。

  • UI Components (Atoms/Molecules): スタイルのみに集中し、特定のデータに依存しない部品。

  • Feature Components: API通信やState管理を行い、UI Componentsを組み合わせて特定の機能を作る部品。

📝 51日目のまとめと課題

✅ 本日の習得ポイント

  • ディレクトリ構成: features フォルダを作ることで、機能ごとの独立性が高まり管理しやすくなる。

  • 関心の分離: 見た目（UI）とロジック（Hook）を分けることで、テストや修正が容易になる。

  • 2026年のトレンド: 巨大な一つのコンポーネントを作るのではなく、小さく純粋な部品を組み上げる「コンポーザブル」な設計。

📝 51日目の課題

  1. 昨日決めたアプリのアイデアで、「共通で使えそうな部品（Buttonなど）」と「特定の機能に紐づく部品（TaskListなど）」 を書き出してみてください。

  2. Viteで作ったプロジェクト内に、src/components と src/features フォルダを作成してみましょう。

もっとReactを学びたい人はここから！

#駆け出しエンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #フロントエンド設計

いいなと思ったら応援しよう！