本日はそんな方に向けてReactのカスタムフックについて解説していきます。カスタムフック自体は必須の知識ではないのでゼロから教わることが少ないです。いえカスタムフックの作り方を勉強することでReactの全体像までイメージしやすくなることが多いので余裕のある方は1回は練習しておきましょう。動画もあるので必要に応じて使ってください。Reactにおけるカスタムフックの作り方まず例題としてAPIからテキストデータを取得して画面に表示することをやってみたいと思います。APIはjsonplaceholderを使用します。CustomHook;jsonplaceholderから使用したいURLをfetchメソッドで取得して定数taskに格納するだけの内容です。正常に動作すると上図のように画面にテキストが表示されます。この仕様は特に問題ないのですが、上記のコードから追加で色んな機能を追加していくとします。した場合にCustomHook.jsの中で関数を定義するコードなどでボリュームが増えていくことが予想できます。カスタムフックはそういったファイル内のコードが膨大になっていくことを想定して、関数の定義などコードの一部分を別のファイルに逃す考え方です。上記のAPIから取得する部分のコードをカスタムフックとして別のファイルに逃してみましょう。逃すための別のファイルを「useRandomTask.js」という名前で新規作成します。CustomHook.jsで書いていたAPI取得の部分を丸っとコピペでuseRandomTask.jsに移動させましょう。CustomHook;これでCustomHook.jsに書いたAPI取得のコードを別のファイルであるuseRandomTask.jsに逃しました。これだけでは正常に動作しません。React自体の仕組みを思い出して欲しいのですが、基本的に「コンポーネント」という考え方で作るのでした。そのため今回のようにファイルを分ける際には必ずインポートすることになります。逃がしたコードをuseRandomTask.jsからCustomHook.jsにインポートしましょう。useRandomTask;まずuseRandomTask.jsですがreturnがHTMLタグになっていたのですが、useRandomTask.jsはあくまで画面に表示する役割ではないのでreturnの部分を変更しました。HTMLタグではなく処理の結果が格納されている定数taskです。APIを取得してテキストデータを定数taskに格納してエクスポートするまでがuseRandomTask.jsの役目です。続いて元々書いていたCustomHook.jsにてインポートします。CustomHook;インポート文の書き方は問題ないと思いますが、インポートしたものを反映するコードも必要になります。今回は定数taskにテキストデータがあるはずなので、再度taskを用意してuseRandomTaskを関数として実行した戻り値を入れました。画面の表示結果は変わりません、カスタムフックでコードを分割しただけで処理自体に変更は加えてないからです。今回のような簡単なコードであればカスタムフックにする必要はないですが、初学者の方はこんな感じで簡単なコードで実験するところから練習してみてください。オープンソースのコードを見ていると複雑なカスタムフックがたくさんありますが、そもそもの考え方はコードを別のファイルに逃しているだけです。Reactにおける引数のあるカスタムフックの作り方カスタムフックの説明は終わってしまったのですが、実務でよくある「引数」を使用するカスタムフックについても紹介して終わろうと思います。例題は先ほどのコードを引き続き使用します。useRandomTask;APIから取得するテキストデータは「id=1」のもので固定していたのですが、引数によってidの値を自由に選択できるように変えてみます。引数を自由に変えるための工夫として、画面上に入力欄を作って入力した数字をidとして使用することにします。CustomHook;inputタグを使って入力欄を画面に表示しています。入力された数字を管理するためにuseStateで定数inputTextを用意しました。定数inputTextにidになる数字が格納されるようになりました。この定数inputTextを引数としてuseRandomTask.jsに渡します。CustomHook;さらに渡された引数をuseRandomTask.jsの中で使用できるように少し変更を加えます。引数をアロー関数にidという名前で設定します。fetchメソッド内のURLですが最後の部分を「1」で固定していましたが引数idに変えます。これで引数idに入っている数字によって今までの「1」以外のテキストデータを取得することができます。最後にuseEffectの第二引数に引数を追加します。useEffectは引数がある場合には第二引数に追加しておくことで、画面上の入力欄で数字を入れ替えるたびにデータの取得を実行してくれる様になります。useRandomTask;画面上の入力欄に入れた数字によって表示されるテキストデータが変わりました。定数inputTextには入力された数字が入っていて、それが引数としてuseRandomTask.jsに渡されてAPIのURLが書き換えられる仕組みです。inputTextの部分は数字をそのまま入力してもデータが取得できます。CustomHook;入力欄に何も入力していませんがテキストデータが表示できていますね。このことから定数inputTextに数字が格納されていて、引数によってuseRandomTask.jsが動作していることがわかります。冒頭でも説明しましたがカスタムフックは必須の知識ではないです。開発している内容やチーム体制によって必要になるだけなので、初学者向けの学習教材やスクールでは詳しく解説されません。実務で経験を積んでいくと必要になるタイミングが来るのと、WordPressでもカスタムフックの考え方は登場します。WordPressはPHPなので厳密には同じ意味ではないですが、考え方は同じですので裏側で何をしているかは知っておいて損ないでしょう。今回参考にした本はこちらになります。良ければこちらからどうぞ。