ファイル命名、Componentの境界、Prop命名
componentにはPascalCaseを使い、分かりやすいフォルダー、小さなcomponent境界、意味の明確なprop名というシンプルな規約を採用します。
「ファイル命名、Componentの境界、Prop命名」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
規約が役立つ理由
目標：コードベースを予測しやすくします。
- コンポーネントファイルにはPascalCaseを使用します
- 小さく、目的を絞ったコンポーネントにします
- 明確で説明的なprops名を付けます
命名とフォルダーの簡易リスト
- ファイル：UserCard.jsx、ProductList.jsx
- フォルダー：components/UserCard、pages/Profile
- エクスポート：defaultまたはnamedを使用しますが、ファイル名と一致させます
デモ：小規模プロジェクトのツリー
PascalCaseのコンポーネントファイルを使った小さなプロジェクト構成です。
<div id="root"></div>
デモ：小さく再利用可能な部品
コンポーネントの目的を絞ります。Profile内で小さなUserCardを使用します。
<div id="root"></div>
デモ：明確なpropsとデフォルト値
説明的なprops名を使用し、分割代入でシンプルなデフォルト値を設定します。
<div id="root"></div>
チェックリスト
- コンポーネントとファイルにはPascalCaseを使用します
- 1ファイルにつき主要なコンポーネントは1つにします
- Props：明確な名前（label、onPress）とシンプルなデフォルト値を使用します
ファイル命名のベストプラクティス
まとめ
まとめ：ファイル名とコンポーネント名にPascalCaseを使用し、コンポーネントの目的を絞り、シンプルなデフォルト値を備えた意味のあるprops名を選びます。
よくある質問
「ファイル命名、Componentの境界、Prop命名」レッスンは無料ですか？
はい。「ファイル命名、Componentの境界、Prop命名」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「ファイル命名、Componentの境界、Prop命名」で何を学びますか？
componentにはPascalCaseを使い、分かりやすいフォルダー、小さなcomponent境界、意味の明確なprop名というシンプルな規約を採用します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「ファイル命名、Componentの境界、Prop命名」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ESLint + ReactルールとPrettier連携
- ファイル命名、Componentの境界、Prop命名
- 環境変数と設定の整理