【入門編】副作用をカプセル化するカスタムフックの設計 – React実践ガイド

こんにちは。Reactの世界へようこそ。

Reactを触り始めると、必ずと言っていいほどぶつかる壁が「`useEffect`」という機能です。「画面が表示された瞬間にデータを取ってきたい」「ボタンを押した後の処理を書きたい」……そう思って`useEffect`を書き始めると、気づけばコンポーネントの中が、まるで散らかった子供部屋のように複雑なコードで埋め尽くされてしまう。そんな経験、ありませんか？

大丈夫です。それはあなたが悪いのではなく、`useEffect`が非常に「強力すぎる」道具だからです。

今日は、その散らかったコードを魔法のようにスッキリ片付ける「カスタムフック」という整理術について、お話ししますね。

—

コンポーネントは「演出家」であれ

まず、大切なマインドセットをお伝えします。Reactのコンポーネントは、本来「見た目の演出」を担当する場所であって、「裏方の雑用」を全部請け負う場所ではありません。

例えば、あなたがレストランのオーナーだとします。
キッチンで食材を切り、レジを打ち、掃除をし、接客まで一人でやっていたら、どうなるでしょうか？お店はすぐにパンクしてしまいますよね。

Reactも同じです。コンポーネントが「データの取得」「タイマーの管理」「外部ライブラリとの連携」まで全部やろうとすると、コードは読みづらくなり、どこで何が起きているのか分からなくなります。

そこで登場するのが「カスタムフック」です。これは、特定の「雑用」を専門に引き受けてくれる「プロのスタッフ」を雇うようなものだと考えてください。

—

実際に「タイマー処理」を切り出してみよう

例えば、画面が表示されてから一定時間後に何かのアラートを出すような機能を考えてみます。これを何も考えずに書くと、コンポーネントの中に`useEffect`が直接居座ってしまいます。

悪い例：コンポーネントが「何でも屋」になっている

function MyComponent() {
// コンポーネントの中に直接副作用が書かれている（これだと散らかりやすい！）
useEffect(() => {
const timer = setTimeout(() => {
console.log(“3秒経ちました！”);
}, 3000);

// クリーンアップ関数（タイマーを解除する掃除係）
return () => clearTimeout(timer);
}, []);

return

こんにちは！

;
}

これでも動きますが、もしこの機能が他のページでも必要になったら？同じコードをコピペすることになりますよね。それが「技術的負債」の始まりです。

良い例：カスタムフックで「専門スタッフ」を雇う

では、この「タイマー処理」という雑用を、`useTimer`というカスタムフックに丸投げしてみましょう。

// 専門スタッフ（カスタムフック）を定義します
function useTimer(callback, delay) {
useEffect(() => {
const timer = setTimeout(callback, delay);

// 画面が消える時などに、タイマーを止める「掃除係」
return () => clearTimeout(timer);
}, [callback, delay]); // ここでいつ実行するかを制御します
}

// コンポーネントは「何をするか」だけを指定すればOK！
function MyComponent() {
useTimer(() => {
console.log(“3秒経ちました！”);
}, 3000);

return

スッキリしましたね！

;
}

どうでしょう？ `MyComponent`の中身が、驚くほど読みやすくなりましたよね。コンポーネントは「何をしたいか」という目的だけを伝えればよく、具体的な「どうやって実行するか（副作用の制御）」は、専門のカスタムフックが裏側で完璧にこなしてくれます。

—

なぜカスタムフックを使うと楽になるのか？

カスタムフックを使う最大のメリットは、「副作用をカプセル化できること」です。

1. 再利用性: 一度作れば、別のコンポーネントでも「名前を呼ぶだけ」でその機能が使えます。
2. 可読性: コンポーネントのコードを見た時に、「あ、これはタイマーを使っているんだな」と一目で分かります。
3. テストのしやすさ: 「タイマー処理」という小さな部品だけをテストすればいいので、バグの原因を特定しやすくなります。

—

最後に：完璧を目指さなくていい

最初は難しく感じるかもしれません。「どこまでをフックに切り出せばいいの？」と悩むこともあるでしょう。

そんな時は、こう考えてみてください。
「この処理、他の場所でも使いそうかな？」
「このコードがあるせいで、メインの処理が読みづらくなっていないかな？」

もしそう感じたら、それはカスタムフックを作る絶好のチャンスです。

Reactのコードを綺麗に保つコツは、一度に完璧にすることではなく、少しずつ「雑用」を「専門スタッフ」に振り分けていくことです。そうすれば、あなたのコードはもっと優しく、あなた自身のことを助けてくれるはずです。

もしつまずいても大丈夫。それはあなたがレベルアップしようとしている証拠です。またいつでも、この場所へ相談しに来てくださいね。応援しています！