0Pricing
React Academy · レッスン

フォルダー構成と命名規則

機能単位のフォルダーと分かりやすいファイル名でReactプロジェクトを整理します

「フォルダー構成と命名規則」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React プロジェクトでよく使われるフォルダー構成を確認し、ファイルとコンポーネントの命名規則を学び、プロジェクトの成長に合わせてコードを整理する方法を理解します。

デフォルトの構成

最小構成のVite + Reactプロジェクトには、`src/App.jsx`と`src/main.jsx`があります。小規模なデモにはこれで十分ですが、規模が大きくなると対応できません。機能を追加する際は、関連するコードをまとめて管理できるよう、専用のフォルダーを作成してください。
src/
  main.jsx
  App.jsx
  index.css

機能ベースの構成

ファイルを種類ではなく機能ごとにまとめてください。各機能のフォルダーには、その機能のコンポーネント、スタイル、テスト、ヘルパー関数を配置します。これにより、機能全体を一度に追加または削除しやすくなります。
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

コンポーネントファイルの命名

コンポーネントファイルには、コンポーネント名に合わせた**PascalCase**を使用してください。例: `UserCard.jsx`、`NavigationBar.jsx`。1ファイルにつき1コンポーネントとするのが標準です。`.jsx`（または`.tsx`）を使うと、そのファイルにJSXが含まれていることをエディターに伝えられます。

コンポーネント以外のファイルの命名

フック、ユーティリティ、定数には**camelCase**を使用します。例: `useAuth.js`、`formatDate.js`、`apiClient.js`。テストファイルには、`.test`または`.spec`を付けて元のファイル名を反映させます。例: `useAuth.test.js`。

インポートを整理するためのインデックスファイル

フォルダーに`index.js`を追加すると、完全なファイルパスではなくフォルダーのパスからインポートできます。インデックスファイルには再エクスポートだけを記述し、ロジックは含めないでください。
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

パスエイリアスによる絶対インポート

`vite.config.js`と`tsconfig.json`で、`src/`を指す`@/`エイリアスを設定してください。これにより、`../../../../components/Button`のような壊れやすい相対パスを避けられます。
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

共有コンポーネントと機能コンポーネント

1つの機能でしか使わないコンポーネントは、その機能のフォルダーに配置してください。2つ以上の機能で必要になった場合にだけ、コンポーネントを`src/components/`へ移動します。早すぎる共通化は避けてください。

定数と設定ファイル

マジック文字列、APIのベースURL、環境変数用のラッパーは、`src/lib/constants.js`または`src/config.js`に保存してください。複数のファイルに`process.env.VITE_API_URL`を分散して記述してはいけません。
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

型とインターフェース（TypeScript）

TypeScriptプロジェクトでは、型をそれを使用する機能やコンポーネントと同じ場所に配置してください。複数の機能で使う共有型については、`src/types/`を作成し、ドメイン領域ごとに1ファイルを用意します。

確認問題

種類ベースの構成と比べて、機能ベースのフォルダー構成にはどのような主な利点がありますか？

まとめ

機能ベースのフォルダー、コンポーネントファイルのPascalCase、フックとユーティリティのcamelCase、インポートを整理するための`index.js`による再エクスポート、そして長い相対パスをなくす`@/`のようなパスエイリアスを使用してください。

コース完了

おめでとうございます！**React Strict Mode & Best Practices**を修了しました。StrictModeの動作、純粋なレンダー関数の書き方、keyとrefの正しい使い方、拡張性のあるフォルダー構成について理解できました。

よくある質問

「フォルダー構成と命名規則」レッスンは無料ですか？

はい。「フォルダー構成と命名規則」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「フォルダー構成と命名規則」で何を学びますか？

機能単位のフォルダーと分かりやすいファイル名でReactプロジェクトを整理します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「フォルダー構成と命名規則」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. StrictModeの動作
  2. Pure Componentsとrenderでの副作用回避
  3. KeyとRefのベストプラクティス
  4. フォルダー構成と命名規則
← React Academyに戻る