【ITニュース解説】🔹 Custom Hooks – Reusar lógica (7/8)

Custom Hooks（カスタムフック）は、現代のWeb開発、特にReactのようなフレームワークを使った開発において、コードの「再利用性」と「管理のしやすさ」という重要な課題を解決するための強力な仕組みである。

Custom Hooksは、Reactのコンポーネント内で繰り返し使われる「状態を持つロジック」を、独立した再利用可能な関数として抽出するための機能だ。これはReactに新たに追加された特別なフックではなく、特定のルールに従って記述されたJavaScriptの関数を指す。そのルールは二つある。一つは、関数の名前が必ず「use」で始まること（例: useFetch, useLocalStorage）。もう一つは、その関数の中でReactが提供する既存のフック（useStateやuseEffectなど）を呼び出すことができる点だ。

例えば、ユーザーがオンライン状態かどうかを知りたい場合、useOnlineStatusというフックを使えば良い。ブラウザのローカルストレージにデータを保存したり読み出したりしたい場合はuseLocalStorage、インターネットからデータを取得したい場合はuseFetchといった具合だ。これらのフックを使えば、それぞれのコンポーネントが個別に同じロジックを実装する必要がなくなり、コードがずっとシンプルになる。

具体的な例として、インターネットからのデータ取得を扱うuseFetchというCustom Hookの作成を見てみよう。データを取得する際には、データがまだ読み込み中なのか、取得に成功したのか、それともエラーが発生したのか、という三つの状態を管理する必要がある。これらの状態管理は、多くのコンポーネントで共通して発生する作業だ。

useFetchフックの内部では、まずuseStateを使ってdata（取得したデータ）、loading（読み込み中かどうか）、error（発生したエラー）という三つの状態を初期化する。次に、useEffectフックを使って、実際にデータのフェッチ処理を行う。useEffectは、コンポーネントがマウントされた時や、指定した値（この場合はURL）が変更された時に実行される。

データフェッチ処理の際には、まずloading状態をtrueにし、既存のerrorをnullにリセットする。その後、fetch関数を使って指定されたURLからデータを非同期に取得する。もし取得に成功すれば、response.json()でデータを解析し、setDataでdata状態を更新する。もしネットワークエラーやサーバーからのエラーレスポンスがあれば、catchブロックでエラーを捕捉し、setErrorでerror状態を更新する。最後に、finallyブロックでloading状態をfalseに戻すことで、データ取得処理が完了したことを示す。

ここで重要なのがAbortControllerの利用だ。これは、例えばユーザーがデータ取得中に別のページに移動してしまい、現在のコンポーネントが画面から消えた場合でも、不要なネットワークリクエストをキャンセルするための仕組みだ。これにより、無駄な処理を防ぎ、アプリケーションの安定性を高めることができる。useEffectの返り値としてcontroller.abort()を呼び出す関数を定義することで、コンポーネントがアンマウントされる際にクリーンアップ処理としてキャンセルが実行される。

useFetchフックは、最終的に{ data, loading, error }というオブジェクトを返す。このオブジェクトには、データの状態に関する全ての情報が含まれており、このフックを呼び出すコンポーネントは、これを受け取って表示を更新する。

次に、このuseFetchフックを実際のコンポーネントでどのように使うかを見てみよう。GitHubUserというコンポーネントでは、GitHubのユーザー情報を検索して表示する機能がある。このコンポーネントは、入力フィールドに入力されたユーザー名に基づいて、useFetchフックを呼び出す。

const { data, loading, error } = useFetch(\https://api.github.com/users/${username}\`);`

このたった一行で、先ほどuseFetchフック内に複雑に実装した「データ取得」「読み込み中状態の管理」「エラー処理」という全てのロジックを呼び出すことができる。GitHubUserコンポーネントは、useFetchが内部でuseStateやuseEffectを使っていることなど、一切知る必要がない。ただ、data、loading、errorというシンプルな情報を受け取り、それに応じて「読み込み中...」と表示したり、エラーメッセージを表示したり、取得したユーザー情報を表示したりするだけで済む。これにより、コンポーネントのコードは非常に読みやすく、また特定のデータ取得ロジックに依存しない、汎用性の高いものとなる。

Custom Hooksを開発する上で、いくつかの良い習慣がある。まず、フックの名前は必ず「use」で始めることだ。これはReactのエコシステムにとって必須のルールであり、静的解析ツールもこの命名規則に基づいてフックの利用ルールをチェックする。次に、複数の値を返す場合は、{ value1, value2 }のようにオブジェクト形式で返すことが推奨される。これにより、コンポーネント側でどの値が何を意味するのかが明確になり、コードの可読性が向上する。また、フックは汎用的で設定可能であるべきだ。例えば、useFetchはURLを引数として受け取ることで、様々なAPIエンドポイントに対応できるようになっている。

Custom Hooksを使う際の一般的な誤解として、「フックがコンポーネント間で状態を共有する」というものがある。これは間違いである。Custom Hookを複数のコンポーネントで呼び出した場合、それぞれの呼び出しは完全に独立しており、それぞれが独自の内部状態を持つ。もしコンポーネント間で状態を共有したい場合は、useContextなどのグローバルな状態管理の仕組みを利用する必要がある。

Custom Hooksは、React開発においてコードの再利用性を劇的に高め、コンポーネントをよりシンプルで管理しやすいものにするための強力なツールである。複雑なロジックを抽象化し、分かりやすいインターフェースで提供することで、開発者はより効率的にアプリケーションを構築できるようになる。