第14回：カスタムフック自作入門：ロジックを共通化してコードをスッキリさせる

前回：useRefの使い方：DOM要素への直接アクセスと値を保持するテクニック（前回の記事リンク想定）では、Reactのルールを少し離れてDOMを直接操作する「忍者」のような技を学びました。

これまで、useState や useEffect など、Reactが提供する便利な「フック（Hooks）」をたくさん使ってきましたね。しかし、アプリが大きくなると「同じようなStateの処理」を何度も書いている自分に気づくはずです。

2026年、中級者への階段を登るための必須スキル、カスタムフック（Custom Hooks） をマスターしましょう。これを使えば、あなた専用の「オリジナル・フック」を作って、コードを劇的に美しく、再利用しやすくできます。

1. カスタムフックは「ロジックの引越し」
2. たった1つの絶対ルール：「use」から始める
3. 【実践】入力値を管理する「useInput」を作ろう
1. App.jsx（カスタムフック版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：ライブラリはカスタムフックの集合体
1. 今回のまとめ

1. カスタムフックは「ロジックの引越し」

カスタムフックとは、簡単に言えば**「複数のフックを組み合わせた処理を、外の関数にまとめたもの」**です。

見た目（JSX）： コンポーネントに残す。
仕組み（ロジック）： カスタムフックへ引っ越す。

例えば「ウィンドウの横幅を監視する」「APIからデータを取る」といった処理は、どの画面でも使いたいですよね。それを1つの関数にまとめておけば、一行呼び出すだけでどこでもその機能が使えるようになります。

2. たった1つの絶対ルール：「use」から始める

カスタムフックを作る際、Reactには非常にシンプルなルールがあります。

ルール： 関数名を必ず use で始めること（例：useWindowSize, useAuth）。

これだけで、Reactは「あ、これは普通の関数じゃなくて、フック（useStateなどが使える特別な関数）なんだな」と認識してくれます。

3. 【実践】入力値を管理する「useInput」を作ろう

第10回で学んだ「制御コンポーネント」では、入力欄が増えるたびに useState と onChange を書いていました。これをカスタムフックで一瞬で終わらせるようにしましょう。

第2回の環境で作成した App.jsx を書き換えてみてください。

App.jsx（カスタムフック版）

JavaScript

import React, { useState } from 'react';

// 1. 【カスタムフック】入力ロジックを外に切り出す
// 命名ルール：必ず「use」から始める
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  // 入力イベントを処理する関数
  const onChange = (e) => {
    setValue(e.target.value);
  };

  // コンポーネントで使いたい「値」と「関数」を返す
  return { value, onChange };
}

// 2. 【メインコンポーネント】
export default function App() {
  // 自作フックを呼び出すだけ！
  const nameInput = useInput("");
  const emailInput = useInput("");

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>カスタムフックでスッキリ！</h1>

      {/* スプレッド構文 (...) で value と onChange を一気に渡す */}
      <input {...nameInput} placeholder="お名前" />
      <p>こんにちは、{nameInput.value}さん</p>

      <input {...emailInput} placeholder="メールアドレス" />
      <p>宛先：{emailInput.value}</p>

      <p>※useStateの記述が消え、コードが劇的に読みやすくなりました。</p>
    </div>
  );
}

CodeSandboxでカスタムフックを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

スプレッド構文 ({...nameInput}): nameInput というオブジェクトの中にある value と onChange を、バラバラにして input タグに一気に流し込む便利な書き方です。
関数の戻り値: カスタムフックは、配列 [ ] でもオブジェクト { } でも、好きな形でデータを返せます。今回は名前を付けて使いやすいようにオブジェクト形式にしました。

Reactのポイント

内部で標準フックを使える: カスタムフックの最大の強みは、その中で useState や第11回のuseEffect を自由に組み合わせられることです。
コンポーネントごとに独立: nameInput と emailInput は、同じ useInput を使っていますが、中身のState（状態）は完全に別物として管理されます。