【完全ガイド】Reactカスタムフックの作り方と使い方｜useLocalStorageの実践例付き

React Hooksを使いこなして開発効率を最大化！初心者にもわかりやすく、再利用可能なカスタムフックの作成手順とベストプラクティスを紹介します。

React Hooksとカスタムフックとは？
なぜReactでカスタムフックが重要なのか？
Reactカスタムフックの基本構文と命名ルール
実践例：useLocalStorageフックを作ってみよう
1. useLocalStorageの使い方
カスタムフックを作るときの注意事項
カスタムフックを使うときの注意点
まとめ：カスタムフックでReact開発を効率化しよう

React Hooksとカスタムフックとは？

React Hooksは、関数コンポーネントでも状態管理やライフサイクル処理を行える仕組みです。
その中でもカスタムフック（Custom Hook）は、開発で繰り返し使うロジックを再利用可能な関数としてまとめるための強力なツールです。

たとえば、フォームの入力管理やローカルストレージ操作、APIデータ取得などを毎回useStateやuseEffectで書くのは非効率です。
カスタムフックを使えば、それらをひとつの関数にまとめ、どのコンポーネントでも簡単に呼び出せるようになります。

なぜReactでカスタムフックが重要なのか？

重複コードを削減できる（同じロジックを何度も書く必要がない）
ロジックを独立させてテストしやすくなる
状態管理を整理し、可読性・保守性を向上させる
チーム開発でもロジックの共有が簡単になる

つまり、カスタムフックはReact開発をスケールさせるための「再利用性の核」といえる存在です。

Reactカスタムフックの基本構文と命名ルール

カスタムフックは通常のJavaScript関数として定義しますが、必ず関数名を「use」から始める必要があります。
これはReactがフックとして正しく動作させるためのルールです。


// カスタムフックの基本構文
function useCustomHook() {
  // 状態やロジックを定義
  return [value, setValue];
}

この関数を別のコンポーネントから呼び出すことで、内部のロジックを再利用できます。

実践例：useLocalStorageフックを作ってみよう

ここでは、ローカルストレージにデータを保存・取得するためのカスタムフック「useLocalStorage」を作成してみましょう。


import { useState } from "react";

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("ローカルストレージの取得に失敗しました:", error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error("ローカルストレージの保存に失敗しました:", error);
    }
  };

  return [storedValue, setValue];
}

useLocalStorageの使い方

作成したカスタムフックは、次のようにReactコンポーネントで使用できます。


function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <button onClick={toggleTheme}>
      現在のテーマ: {theme}
    </button>
  );
}

このコードを使うことで、テーマ設定がブラウザを再読み込みしても保持されるようになります。ユーザー体験（UX）の向上にもつながります。