Hooksフォルダーの構成規約とテストの同一配置
シンプルなhooks規約（use*で始め、純粋なロジックを保つ）を作り、feature folderにhookを置き、検証対象のunitの隣にtestを配置します。
「Hooksフォルダーの構成規約とテストの同一配置」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
なぜhooksの規約が必要なのか
目標：hooksを整理し、テストしやすくします。
- 接頭辞：use*
- hooks内には純粋なロジックを置き、UIは外に出します
- 単位の近くにテストを配置します
フォルダー構成の考え方
- features/counter/useCounter.js
- features/counter/CounterPanel.jsx
- features/counter/useCounter.test.jsx
- ui/Button.jsx
フックパターン: useCounter
フックはstate + actionsを返します。APIは小さく予測しやすいものにします。
<div id="root"></div>フックパターン: useToggleの再利用
小さなフックは簡単に再利用できます。2つのコンポーネントで同じuseToggleの動作を共有します。
<div id="root"></div>シミュレーションテスト: useCounter
フックのすぐ隣に小さなテストファイル（例: useCounter.test.jsx）を置きます。ここではアサーションをシミュレーションします。
<div id="root"></div>ヒントとチェックリスト
- フックにはuse*という名前を付けます
- フックはpure（DOMを扱わない）にし、小さなAPIを返します
- フックやコンポーネントのすぐ隣にCo-locate testsします
コロケーションの基本チェック
まとめ
まとめ: 小さく純粋なフックをfeatureフォルダーに置き、シンプルなAPIを返し、リファクタリング時にも一緒に移動できるよう、テストを対象のユニットのすぐ隣に置きます。
よくある質問
「Hooksフォルダーの構成規約とテストの同一配置」レッスンは無料ですか？
はい。「Hooksフォルダーの構成規約とテストの同一配置」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Hooksフォルダーの構成規約とテストの同一配置」で何を学びますか？
シンプルなhooks規約（use*で始め、純粋なロジックを保つ）を作り、feature folderにhookを置き、検証対象のunitの隣にtestを配置します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Hooksフォルダーの構成規約とテストの同一配置」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Feature FolderとUI／Composite Component
- Hooksフォルダーの構成規約とテストの同一配置
- Refactoringの指針