カスタムフック
なぜ学ぶか： useAuth()・useWindowWidth() — AIのコードにはuseで始まる自作関数がよく出ます。これはカスタムフックといって、stateやuseEffectを含む処理を「部品」として切り出したものです。例を見てください。
まずはこの例を見てみましょう
// カスタムフック: 「ウィンドウの幅を追いかける」処理を部品化function useWindowWidth() { const [width, setWidth] = useState(0); useEffect(() => { const update = () => setWidth(window.innerWidth); update(); window.addEventListener("resize", update); return () => window.removeEventListener("resize", update); }, []); return width;} // 使う側は、たった1行function Layout() { const width = useWindowWidth(); return <p>{width < 768 ? "モバイル表示" : "PC表示"}</p>;}
state・useEffect・後片付けという面倒な部分がフックの中に隠れ、使う側は1行になります。
カスタムフック＝ロジックの部品
見た目の部品がコンポーネントなら、「動きの部品」がカスタムフックです。例では幅を追いかける処理を丸ごと閉じ込めています。
use始まりは決まりごと
フックには使い方のルールがあり、useという名前がその目印です。飾りではありません。
2つの効能
①複数のコンポーネントで同じ処理を共有できる ②表示とロジックが分かれて読みやすくなる。この学習アプリの進捗管理もuseProgressというカスタムフックです。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。