見出し画像
Photo by pansansui

【脱・スパゲッティ】コードが綺麗すぎて驚かれる！Reactのディレクトリ構成は「機能単位（Features）」が正解だった

関野泰宏


83日目は「GitHub Actions」で開発の自動化を学びました。本日84日目は、アプリが大きくなっても迷子にならないための「ディレクトリ構成（Feature-based Architecture）」 を学習します。

「あのファイル、どこだっけ？」をゼロにする、プロの整理術をマスターしましょう！

はじめに：ファイルが増えると「探す時間」が増えていませんか？

最初は components フォルダの中に数個のファイルがあるだけだったのに、気づけば 50個以上のファイルが並んでカオスに……。そんな経験はありませんか？

「種類（components, hooks, types）」で分ける従来のやり方には限界があります。今日は、中〜大規模開発で主流となっている Feature-based Architecture（機能別構成） を学びます。

💡 1. 「種類別」から「機能別」へ

これまでは「これはHookだからhooksフォルダへ」と分けていましたが、これからは「これはログイン機能に関するものだからfeatures/authフォルダへ」　とまとめます。

💻 理想的な構成例

src/
 ├── components/ (全画面で使う共通部品: Button, Inputなど)
 ├── features/
 │    ├── auth/ (認証機能)
 │    │    ├── components/ (LoginForm, SignupForm)
 │    │    ├── hooks/ (useAuth)
 │    │    ├── api/ (loginService)
 │    │    └── types/ (auth.d.ts)
 │    └── posts/ (投稿機能)
 └── pages/ (各画面のルーティング用)

💡 2. なぜ「機能別」がいいのか？

  1. カプセル化: auth の修正をするとき、features/auth フォルダの中だけを見れば完結します。

  2. 削除が簡単: 「やっぱりこの機能いらない」となったとき、フォルダごと消すだけで済みます。

  3. 依存関係が明確: 「どの機能がどの共通部品を使っているか」が追いやすくなります。

💡 3. index.ts（バレルファイル）の活用

各機能フォルダの直下に index.ts を置き、外部に公開したいものだけを export します。これにより、インポート文がスッキリし、内部の細かい構成を隠すことができます。

// features/auth/index.ts
export * from './components/LoginForm';
export * from './hooks/useAuth';
// 内部だけで使う helper などは export しない！

📝 84日目のまとめと課題

✅ 本日の習得ポイント

  • Feature-based: 「何であるか」ではなく「何をするためのものか」で分ける。

  • 凝集度: 関連するコードを近くに置くことで、開発スピードと保守性を上げる。

  • スケーラビリティ: アプリがどれだけ巨大になっても、ルールが壊れない構成。

📝 84日目の課題

  1. 自分のプロジェクトに src/features フォルダを作ってみましょう。

  2. 今あるコンポーネントを、何か一つの「機能（例：Todo作成、プロフィール表示など）」という単位でフォルダにまとめてみてください。

  3. インポートパスが壊れないように慎重にリファクタリングしてみましょう！（VSCodeの自動修正機能を活用して！）

整理整頓ができるエンジニアは、チーム開発で絶大な信頼を得られます。明日は、さらに一歩踏み込んで、コンポーネントの「見た目」と「ロジック」を分離する「Container/Presenterパターン」 の現代的な解釈を学習します。

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


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

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