React Hooks解説：初心者にもわかりやすい具体例付き

2025 4/07

2025年4月7日 2025年4月7日

React Hooksは、クラスコンポーネントを書くことなく、関数コンポーネント内で状態（state）やその他のReactの機能を利用するための仕組みとして、React 16.8で導入されました ¹。Hooksの登場により、関数コンポーネントは以前よりも強力になり、多くのReact開発者にとって主要なコンポーネント作成方法となっています ³。本稿では、React Hooksの基本的な概念から、主要なHooksの使い方、そして利用上の注意点までを、具体的なコード例を交えながら解説します。

React Hooksの基本的な概念とクラスコンポーネントとの比較

React Hooksは、関数コンポーネントに「フック（hook）」して、状態やライフサイクルといったReactの機能を利用できるようにする関数です ¹。従来のクラスコンポーネントでは、状態の管理やライフサイクルメソッド（componentDidMount, componentDidUpdate, componentWillUnmountなど）の使用が必須でしたが、Hooksを使用することで、これらの機能を関数コンポーネント内でより簡潔に記述できます ⁷。

クラスコンポーネントと比較した際のReact Hooksの利点は多岐にわたります ³。

可読性と簡潔性: Hooksはコードをよりシンプルにし、可読性を高めます ³。特に大規模なコードベースでは、クラスコンポーネントが複雑化しやすく、管理や保守が困難になることがありますが、Hooksを用いた関数コンポーネントは一般的に理解しやすいです ¹¹。例えば、簡単なカウンターアプリを実装する場合、Hooksを使用した方がコード量が少なく、直感的に理解できます ⁷。
コードの再利用性: カスタムHooksを作成することで、複数のコンポーネント間でロジックを容易に共有できます ²。これは、Reactクラスではより複雑な処理が必要でした ³。例えば、APIからデータを取得するロジックをカスタムHookとして作成し、複数のコンポーネントで再利用することができます ¹¹。
副作用の管理: データ取得や購読といった副作用の管理において、クラスコンポーネントではcomponentDidMount, componentDidUpdate, componentWillUnmountといったライフサイクルメソッドを使用する必要があり、管理が煩雑になることがありました ⁷。一方、useEffect Hookを使用すると、マウント、更新、アンマウントに関連するロジックを一つの場所にまとめることができ、より組織的に副作用を扱えます ⁷。
thisキーワードの排除: クラスコンポーネントではthisキーワードに依存するため、コンテキストの混乱やメソッドのバインディングが必要となり、初心者にとって混乱の原因となることがありました ¹¹。Hooksではthisを使用しないため、よりクリーンで直感的なコードになり、コンテキストに関連するバグの可能性が低くなります ¹¹。
パフォーマンスの最適化: Hooksを用いた関数コンポーネントは、一般的にクラスコンポーネントよりも軽量であり、再レンダリングの回数を減らすことができるため、パフォーマンスの向上が期待できます ⁷。useMemoやuseCallbackといったHooksは、変数や関数のメモ化を通じて効率を最大化する手段を提供します ⁶。
テストの容易さ: React Hooksは単なるJavaScript関数であるため、分離してテストすることが容易です ⁶。複雑なクラスのインスタンス化やライフサイクルの管理を必要とせず、ユニットテストがより簡単になります ¹¹。カスタムHooksは、シンプルなテストコンポーネントで使用することで容易にテストできます ¹¹。
メモリーリークの防止: useEffect Hookは、コンポーネントがアンマウントされる際や依存関係が変化した際に自動的に実行されるクリーンアップ関数を提供するため、副作用の管理を明確かつ一貫した方法で行うことができ、メモリーリークの防止に役立ちます ⁸。クラスコンポーネントでは、副作用とそのクリーンアップが異なるライフサイクルメソッドに分散しがちで、管理が難しく、メモリーリークのリスクが高まる可能性があります ¹¹。

これらの利点から、新規プロジェクトや新しいコンポーネントの開発においては、React Hooksを使用することが推奨されています ³。ただし、既存のクラスコンポーネントをすぐにHooksに書き換える必要はありません ¹。

主要なReact Hooksの詳細解説

useState Hook

useState Hookは、関数コンポーネント内で状態（state）変数を使用するための基本的なHookです ¹。

基本的な使い方: useStateは、初期状態を引数として呼び出され、現在の状態の値と、その状態を更新するための関数（セッター関数）のペアを返します ¹。配列の分割代入を使用して、これらの値に名前を付けるのが一般的です ¹。
JavaScript
import React, { useState } from 'react'; function Example() { // countという状態変数と、setCountというセッター関数を宣言し、初期値を0に設定 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

この例では、countという状態変数が0で初期化され、ボタンがクリックされるたびにsetCount関数が呼び出されてcountの値が1ずつ増加します。setCountが呼び出されると、コンポーネントが再レンダリングされ、更新されたcountの値がUIに反映されます ¹⁸。
簡単なカウンターアプリのコード例: 上記のコードは、まさに簡単なカウンターアプリの例です ¹⁷。初期状態として0を設定し、ボタンのクリックイベントで状態を更新することで、クリック回数を表示する機能を実現しています。
さらに、値をリセットする機能や、入力フィールドから値を設定する機能を追加したカウンターアプリの例を以下に示します ²¹。
JavaScript
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const [inputValue, setInputValue] = useState(''); const increment = () => setCount(prevCount => prevCount + 1); const decrement = () => setCount(prevCount => prevCount - 1); const reset = () => setCount(0); const setValue = () => setCount(parseInt(inputValue) || 0); return ( <div> <h1>Count: {count}</h1> <input type="number" value={inputValue} onChange={e => setInputValue(e.target.value)} /> <button onClick={setValue}>Set Value</button> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> <button onClick={reset}>Reset</button> </div>
この例では、`inputValue`という別の状態変数を導入し、入力フィールドの値を管理しています。`setValue`関数は、入力された値を数値に変換して`count`の状態を更新します [22]。

useEffect Hook

useEffect Hookは、関数コンポーネント内で副作用（side effects）を実行するためのHookです ⁷。副作用とは、データ取得、購読、タイマーの設定、DOMの手動変更など、コンポーネントのレンダリングとは直接関係のない処理のことです ⁷。

役割とライフサイクルメソッドとの対応: useEffectは、ReactクラスコンポーネントにおけるcomponentDidMount, componentDidUpdate, componentWillUnmountのライフサイクルメソッドの機能を統合したものです ⁷。

マウント時 (componentDidMount): useEffectに渡す関数の第二引数として空の依存配列（“）を指定すると、コンポーネントが最初にレンダリングされた後（マウントされた後）に一度だけ実行されます ⁹。
更新時 (componentDidUpdate): 第二引数に依存配列を指定し、その配列内のいずれかの値が前回のレンダリングから変更された場合、useEffectに渡された関数が再実行されます ⁸。依存配列を省略すると、コンポーネントのすべてのレンダリング後に効果が実行されます ⁸。
アンマウント時 (componentWillUnmount): useEffectに渡す関数が関数を返す場合、その返された関数はクリーンアップ関数と呼ばれ、コンポーネントがアンマウントされる前、または次の効果が実行される前に実行されます ¹。これは、リソースの解放（例えば、イベントリスナーの解除やタイマーのクリア）を行うために使用されます ¹。
副作用処理の具体的な例:

API呼び出し: useEffectを使用して、コンポーネントがマウントされた際にAPIからデータを取得する例です ³。
JavaScript
import React, { useState, useEffect } from 'react'; function DataFetch() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Failed to fetch data'); } const result = await response.json(); setData(result); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); },); // 空の依存配列により、マウント時に一度だけ実行 if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; if (!data) return null; return ( <div> <h1>Data from API:</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); }

この例では、useEffect内で非同期関数fetchDataを定義し、APIを呼び出してデータを取得しています。空の依存配列“を渡すことで、コンポーネントが最初にマウントされたときにのみこの処理が実行されます ²⁵。ローディング状態やエラー状態も管理しており、ユーザーに適切なフィードバックを提供します ²⁵。
タイマー設定: useEffectを使用して、コンポーネントがマウントされた際にタイマーを設定し、アンマウント時にクリアする例です ¹⁷。
JavaScript
import React, { useState, useEffect } from 'react'; function Timer() { const = useState(0); useEffect(() => { const intervalId = setInterval(() => { setSeconds(prevSeconds => prevSeconds + 1); }, 1000); // コンポーネントがアンマウントされる前にタイマーをクリア return () => clearInterval(intervalId); },); // 空の依存配列により、マウント時に一度だけ設定 return ( <div> <p>Seconds: {seconds}</p> </div> ); }

この例では、useEffect内でsetIntervalを使用して1秒ごとにsecondsの状態を更新するタイマーを設定しています。useEffectが返す関数内でclearIntervalを呼び出すことで、コンポーネントがアンマウントされる際にタイマーがクリアされ、メモリーリークを防ぎます ⁸。

useContext Hook

useContext Hookは、コンポーネントツリー全体でグローバルな状態を共有するためのHookです ⁷。通常、propsを介してデータを階層的に渡す必要がありますが、useContextを使用すると、propsのバケツリレーなしに、必要なコンポーネントから直接コンテキストの値にアクセスできます ⁷。

コンポーネント間でグローバルな状態を共有する例:
まず、React.createContext()を使用してコンテキストオブジェクトを作成します ³²。
JavaScript
import React from 'react'; // デフォルト値として 'light' を持つテーマコンテキストを作成 const ThemeContext = React.createContext('light'); export default ThemeContext;

次に、コンテキストプロバイダーコンポーネントを作成し、アプリケーションの一部をラップしてコンテキストの値を提供します ³²。
JavaScript
import React, { useState } from 'react'; import ThemeContext from './ThemeContext'; function ThemeProvider({ children }) { const = useState('light'); const toggleTheme = () => { setTheme(theme === 'light'? 'dark' : 'light'); }; return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); } export default ThemeProvider;
このプロバイダーは、現在のテーマ状態（theme）と、テーマを切り替える関数（toggleTheme）をコンテキストの値として提供します ³²。
そして、useContext Hookを使用して、コンテキストの値を利用するコンポーネントを作成します ³²。
JavaScript
import React, { useContext } from 'react'; import ThemeContext from './ThemeContext'; function ThemedButton() { const { theme, toggleTheme } = useContext(ThemeContext); return ( <button onClick={toggleTheme} style={{ backgroundColor: theme === 'light'? '#fff' : '#000', color: theme === 'light'? '#000' : '#fff' }}> Toggle Theme </button> ); } export default ThemedButton;

このThemedButtonコンポーネントは、useContext(ThemeContext)を呼び出すことで、最も近いThemeProviderから提供されたthemeとtoggleThemeに直接アクセスできます ³²。
この方法により、アプリケーション全体のテーマ設定やユーザー認証といったグローバルな状態を管理し、コンポーネント間で共有することが容易になります ³²。propsを介して値を渡す必要がないため、コードが簡潔になり、管理が容易になります ³²。

useRef Hook

useRef Hookは、関数コンポーネント内でDOM要素やReactコンポーネントへの参照を作成するためのHookです ¹⁷。また、レンダリングに影響を与えない可変値を保持するためにも使用できます ¹⁷。

DOM要素へのアクセス: useRefは、.currentプロパティを持つオブジェクトを返します。初期値は引数として渡すことができます ³⁶。DOM要素にref属性として渡すと、Reactはその要素への参照を.currentプロパティに設定します ¹⁸。
JavaScript
import React, { useRef, useEffect } from 'react'; function FocusInput() { const inputRef = useRef(null); useEffect(() => { // コンポーネントがマウントされた後に入力フィールドにフォーカスを設定 inputRef.current.focus(); },); return <input ref={inputRef} type="text" />; }

この例では、inputRefというrefを作成し、<input>要素のref属性に渡しています。useEffect内でinputRef.current.focus()を呼び出すことで、コンポーネントがマウントされた後に入力フィールドにフォーカスが設定されます ¹⁸。
可変値の保持: useRefは、レンダリング間で値を保持するためにも使用できます。状態（useState）と異なり、useRefの.currentプロパティを変更してもコンポーネントは再レンダリングされません ¹⁷。これは、タイマーID、以前の状態の値、またはレンダリングロジックに直接影響しないその他の可変値を保存するのに便利です ³⁷。
JavaScript
import React, { useRef } from 'react'; function RenderCounter() { const renderCount = useRef(0); // コンポーネントがレンダリングされるたびにカウントをインクリメント renderCount.current++; return ( <div> <p>This component has rendered {renderCount.current} times.</p> </div> ); }

この例では、renderCountというrefを作成し、コンポーネントがレンダリングされるたびにその.currentプロパティをインクリメントしています。renderCountの値を変更してもコンポーネントは再レンダリングされないため、レンダリング回数を追跡するために使用できます ³⁸。

その他の主要なHookの紹介

useReducer: より複雑な状態ロジックを管理するためのuseStateの代替となるHookです ⁶。ReduxのReducer関数と同様の考え方で、現在の状態とアクションに基づいて新しい状態を生成します ⁶。状態が複数の部分を持つ場合や、次の状態が前の状態に依存する場合に適しています ¹⁷。
useMemo: 依存配列内の値が変更された場合にのみ再計算されるメモ化された値を返します ⁶。高コストな計算の結果をキャッシュし、不要な再計算を避けることでパフォーマンスを最適化します ⁶。
useCallback: 依存配列内の値が変更された場合にのみ新しい関数インスタンスを返すメモ化されたコールバック関数を返します ⁶。子コンポーネントにpropsとして渡すコールバック関数をメモ化することで、不要な再レンダリングを防ぎ、パフォーマンスを向上させます ⁶。
useId: クライアントとサーバーの両方で安定したユニークなIDを生成するためのHookです ³。アクセシブルなフォーム入力のラベルと入力を関連付けるために使用できます ³。

カスタムHook

カスタムHookは、Reactの組み込みHookを組み合わせて、特定の再利用可能なロジックをカプセル化するための強力なメカニズムです ¹。

カスタムHookの作成方法: カスタムHookは、名前がuseで始まるJavaScript関数です ¹。カスタムHook内では、他のHook（組み込みのHookや他のカスタムHook）を呼び出すことができます ¹。useプレフィックスは、ReactがHookのルールを適用するために重要です ¹。
カスタムHookの利点: カスタムHookの主な利点は、複数のコンポーネント間で同じロジックを繰り返す必要がなくなることです ²。これにより、コードの重複が減り、DRY原則（Don’t Repeat Yourself）に従うことができます ¹³。コンポーネントのロジックが簡潔になり、可読性と保守性が向上します ²。複雑なロジックをカスタムHookに隠蔽することで、コンポーネントはレンダリングの責務に集中できます ²。
簡単なカスタムHookの例:

ローカルストレージの状態を管理するHook:
JavaScript
import { useState, useEffect } from 'react'; function useLocalStorage(key, initialValue) { const = useState(() => { try { const item = window.localStorage.getItem(key); return item? JSON.parse(item) : initialValue; } catch (error) { console.error(error); return initialValue; } }); useEffect(() => { try { window.localStorage.setItem(key, JSON.stringify(storedValue)); } catch (error) { console.error(error); } }, [key, storedValue]); return; }

このカスタムHook useLocalStorageは、指定されたキーでローカルストレージの状態を管理します。初期値を受け取り、ローカルストレージから値を読み込み、状態として保持します。状態が更新されると、ローカルストレージの値も更新されます。これにより、コンポーネントはローカルストレージの状態を簡単に利用できます ³。
その他のカスタムHookの例: オンライン状態の監視、クリックOutsideの検出など ¹³。
JavaScript
// オンライン状態を監視するカスタムHook import { useState, useEffect } from 'react'; function useOnlineStatus() { const [isOnline, setIsOnline] = useState(navigator.onLine); useEffect(() => { function handleStatusChange() { setIsOnline(navigator.onLine); } window.addEventListener('online', handleStatusChange); window.addEventListener('offline', handleStatusChange); return () => { window.removeEventListener('online', handleStatusChange); window.removeEventListener('offline', handleStatusChange); }; },); return isOnline; } // 要素外のクリックを検出するカスタムHook import { useEffect } from 'react'; function useClickOutside(ref, callback) { useEffect(() => { function handleClickOutside(event) { if (ref.current &&!ref.current.contains(event.target)) { callback(event); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [ref, callback]); }

これらの例は、カスタムHookが特定の機能をカプセル化し、再利用する方法を示しています ¹³。

React Hooksの利用上の注意点とベストプラクティス

React Hooksを効果的に利用するためには、いくつかの注意点とベストプラクティスを理解しておく必要があります ⁶。

Hooksのルール: Hooksは、関数コンポーネントまたはカスタムHookのトップレベルでのみ呼び出す必要があり、ループ、条件分岐、ネストされた関数の中では呼び出せません ⁵。また、React関数コンポーネントまたはカスタムHookの中からのみ呼び出すことができます ⁵。これらのルールを守ることで、ReactはHookの状態を正しく管理し、コンポーネントの再レンダリング間で状態を維持することができます ⁴⁸。
不必要な依存関係の排除 (useEffect): useEffectの依存配列には、効果内で使用されるすべての外部変数をリストアップする必要がありますが、不必要な依存関係を含めると、効果が意図しないタイミングで再実行され、パフォーマンスの低下につながる可能性があります ⁶。
適切な命名規則: カスタムHookの名前は常にuseで始めるべきです（例：useFetch, useLocalStorage） ²。これにより、その関数がHookのルールに従う必要があることが明確になります ²。
関心の分離: Hookは、特定のロジックや機能に焦点を当てるべきであり、複数の無関係な機能を一つのHookに詰め込むのは避けるべきです ⁴。
Hooksのシンプルさを保つ: Hookは、できるだけシンプルで理解しやすいように保つべきであり、複雑すぎるHookは、デバッグや保守が難しくなる可能性があります ⁶。
Hooksのドキュメント化: カスタムHookを作成する際には、その目的、使い方、引数、戻り値などを明確にドキュメント化することが重要です ⁶。
Hooksのテスト: カスタムHookは、他のJavaScript関数と同様にテストすることができ、これにより、Hookが期待通りに動作することを保証し、コードの品質を向上させることができます ⁶。
useEffectにおけるStale Closureの回避: useEffectのコールバック内で、依存関係配列に含まれていない変数を参照すると、Stale Closure（古いクロージャー）の問題が発生する可能性があります ¹⁷。効果内で使用するすべての変数を依存関係配列に含めるか、更新関数形式のsetStateを使用することで、この問題を回避できます ¹⁷。
メモ化の適切な使用: useMemoとuseCallbackは、パフォーマンスを最適化するための強力なツールですが、過度な使用はかえってパフォーマンスを低下させる可能性があります ⁶。メモ化は、計算コストの高い処理や、propsとして渡される関数が頻繁に再生成される場合に特に有効です ⁶。

主要なReact Hooksの概要

Hook	役割	簡単な説明
useState	状態管理	関数コンポーネントで状態変数とその更新関数を提供します。
useEffect	副作用の管理	データ取得、購読、DOM操作など、レンダリングとは関係のない処理を実行します。
useContext	グローバル状態の共有	コンポーネントツリー全体で状態を共有するための仕組みを提供します。
useRef	DOM要素や可変値への参照	DOM要素への直接アクセスや、レンダリングに影響を与えない値の保持に使用します。
useReducer	複雑な状態管理	useStateの代替として、より複雑な状態ロジックを管理するために使用します。
useMemo	計算結果のメモ化	依存配列の値が変更された場合にのみ再計算されるメモ化された値を返します。
useCallback	関数のメモ化	依存配列の値が変更された場合にのみ新しい関数インスタンスを返すメモ化されたコールバック関数を返します。
useId	ユニークなIDの生成	クライアントとサーバーの両方で安定したユニークなIDを生成します。

まとめ：React Hooksの活用

React Hooksは、現代のReact開発において不可欠なツールであり、その適切な活用がより効率的で保守性の高いアプリケーション開発につながります。本稿で解説した主要なHookの使い方や注意点を念頭に置きながら、積極的にHooksを活用していくことを推奨します。Hooksを使いこなすことで、よりシンプルで再利用可能、そして高性能なReactアプリケーションを開発することができるでしょう。