「Reactの魔法」を使いこなそう！Custom Hooksでコードを整理整頓する極意
こんにちは。Reactの世界へようこそ！
コンポーネントを書き始めて、「あれ、なんだかコードが長くなってきたな…」「同じような処理をあちこちで書いていて、メンテナンスが大変だぞ？」なんて感じたことはありませんか？
安心してください。それはあなたが「次のステップ」へ進む準備ができている証拠です。今日は、Reactマスターへの登竜門、「Custom Hooks（カスタムフックス）」についてお話しします。
—
Custom Hooksって、何者？
ひとことで言うと、Custom Hooksは「ロジックの持ち運び用バッグ」です。
例えば、お料理をするときに「野菜を切る」「調味料を測る」という手順を毎回ゼロから考えていたら大変ですよね。もし「下ごしらえセット」というバッグがあれば、それを取り出すだけで調理がスムーズになります。
Reactでも同じです。
「サーバーからデータを取ってくる」「入力フォームの状態を管理する」といった「よく使う一連の処理」をひとまとめにして、名前をつけて持ち運べるようにしたもの。それがCustom Hooksです。
—
1. 「use」から始める、魔法のルール
Custom Hooksを作る上で、たった一つだけ、絶対に守らなければならない「おまじない」があります。それは、名前を必ず `use` で始めることです。
なぜなら、Reactは `use` で始まる関数を見つけると、「あ、これは特別なHooksですね。状態管理や副作用（API通信など）を扱うんだな！」と自動的に判断して、裏側で一生懸命サポートしてくれるからです。
- ✅ `useAuth`
- ✅ `useWindowSize`
- ❌ `fetchUserData` （これだと普通の関数だと思われてしまい、Reactの便利な機能が使えません）
—
2. ロジックを切り出してみよう
例えば、「ボタンを押すと、画面に『こんにちは！』と表示する」というシンプルな機能をCustom Hooksにしてみましょう。
Before: コンポーネントの中に全部詰め込む（ごちゃごちゃ！）
function Greeting() {
const [message, setMessage] = useState(”);
// 挨拶を作るというロジックがコンポーネントに直書きされている
const handleGreeting = () => {
setMessage(“こんにちは！Reactの世界へ！”);
};
return ;
}
After: Custom Hooksに切り出す（スッキリ！）
// useGreeting.js
import { useState } from ‘react’;
// ロジックだけを外に出す！
export function useGreeting() {
const [message, setMessage] = useState(”);
const sayHello = () => setMessage(“こんにちは！Reactの世界へ！”);
// 必要なものだけを「戻り値」として渡す
return { message, sayHello };
}
これで、他のコンポーネントでも `const { message, sayHello } = useGreeting();` と書くだけで、挨拶機能がすぐに使えるようになります。便利だと思いませんか？
—
3. 副作用との付き合い方（useEffectの隔離）
初学者が一番つまずくのが `useEffect` です。APIからデータを取ってきたり、画面のサイズを監視したりする処理ですね。これらはコンポーネントに直接書くと、どんどん複雑になって「スパゲッティコード」の原因になります。
Custom Hooksを使えば、この「副作用」という少し厄介な存在を、コンポーネントの視界から隠すことができます。
// 画面幅を監視するHooks
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener(‘resize’, handleResize);
// 終わった後の片付けも忘れずに！
return () => window.removeEventListener(‘resize’, handleResize);
}, []);
return width;
}
コンポーネント側は「このHooksを使えば幅が取れる」ということさえ知っていれば、中の `useEffect` の複雑な処理を気にしなくて済むのです。これが「関心の分離」という、プロが大切にしている考え方です。
—
最後に：つまずいたって大丈夫
Custom Hooksの設計は、最初から完璧にできる人なんていません。「ここ、切り出せるかな？」と迷ったら、まずはコンポーネントに書いてみて、長くなってきたら少しずつ外に出す。その繰り返しでいいんです。
1. 名前は必ず `use` から始める。
2. コンポーネントの「見た目（JSX）」と「動き（ロジック）」を分ける。
3. 再利用したい処理を見つけたら、すぐに抽出する。
この3つを意識するだけで、あなたの書くコードは驚くほど読みやすく、そしてメンテナンスしやすくなります。
Reactという道具は、あなたの創造力を形にするための魔法の杖です。少しずつ、楽しみながら一緒にレベルアップしていきましょうね。応援しています！
コメント