カスタムHooks キャッチアップ

カスタムHooks（useXXX）：ロジックを使い回す最強の武器

Reactアプリがある程度複雑になってくると、「似たようなロジックがあちこちに出てくる」。
そういうときに活躍するのがカスタムフック。

使い回せて、読みやすくて、テストもしやすい。まさにReactの設計の要になる機能。

---

カスタムHooksとは？

useStateやuseEffectのようなReactの組み込みフックをベースに、自分専用の機能を切り出して再利用できる関数のこと。

作法としてはただの関数だけど、

• 名前は必ず use で始める
• フックの中で他のフックを使ってOK（ルールを守れば）

という決まりがある。

---

今回扱うカスタムフック3つ

1. useAuth：認証状態を管理する

tsx
const { username, login, logout } = useAuth();

• 状態は内部で useState 管理
• ログインとログアウト処理をカプセル化
• 必要な画面で呼び出せばログイン情報を即取得可能

主な使い道：

• ユーザー名の表示
• ログイン/ログアウトの切り替え
• 認証判定でルートの保護

---

2. useTimer：マウントからの経過秒数を返す

tsx
const seconds = useTimer();

• マウント時に setInterval 開始
• アンマウント時にクリーンアップ
• 状態は自動で1秒ずつ更新される

主な使い道：

• 経過時間表示（ログインしてから、ページを開いてから等）
• アクション後のカウントダウン/タイマー
• フォーカス時間の記録

---

3. useLocalStorage：localStorageと状態を同期する

tsx
const [value, setValue] = useLocalStorage<T>("key", initialValue);

• 初期化時にlocalStorageを読み込む
• 値の更新で状態とlocalStorageを両方更新
• 型安全に書けてジェネリクス対応

主な使い道：

• ユーザー設定（言語・テーマ）
• 一時保存メモ・テキスト入力
• Todoなどのデータ保存

---

カスタムフックを使うメリット

✅ 1. ロジックの再利用

tsx
// 複数の画面で同じ処理を使いたい
const { username } = useAuth();

• 書き直し不要
• 一箇所にまとめて保守性◎

---

✅ 2. コードの見通しが良くなる

tsx
// Before
useEffect(() => {
  const timer = setInterval(() => {
    setSeconds((s) => s + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

// After
const seconds = useTimer();

→ 本質が一行に凝縮されて、UIロジックと分離できる。

---

✅ 3. テストがしやすくなる

ロジック単体のテストが可能になる。
UIと切り離して機能ごとの責務を分離できるのが最大のポイント。

---

実務的な応用アイデア

機能例	カスタムHookにできる例
認証状態	useAuth()
ダークモード	useDarkMode()
モーダル制御	useModal()
デバウンス処理	useDebouncedValue(input, delay)
ページタイトル変更	useDocumentTitle(title)

---

👇 サンプル：ReactカスタムHooks活用デモ

---

まとめ

• カスタムHooksはReactにおけるロジックの再利用・抽象化の最適解
• 状態、タイマー、ストレージ、認証などは全部Hook化しておくと使いまわせる
• 単一責任・読みやすさ・テストしやすさが大きなメリット
• 実務でのコンポーネント設計・保守性が飛躍的に上がる