React Hooksとは？クラスコンポーネントから進化した仕組みをやさしく解説

1. React Hooksとは？

1. React Hooksとは？

React Hooks（リアクトフック）とは、Reactのバージョン16.8から導入された新しい仕組みで、従来クラスコンポーネントでしかできなかった「状態管理」や「ライフサイクル処理」を、関数コンポーネントの中で簡単に書けるようにした機能です。

例えば、クラスコンポーネントではthis.stateやthis.setState()を使って状態を管理していました。しかし初心者にとってはthisの使い方やコンストラクタの記述が難しく、コードも長くなりがちでした。

Hooksを使えば、シンプルな関数だけで状態管理や副作用の処理ができるようになります。これにより、プログラムが短く分かりやすくなるのです。

2. クラスコンポーネントとHooksの違い

2. クラスコンポーネントとHooksの違い

クラスコンポーネントとHooksの違いを、初心者でもイメージしやすいように「家の電気スイッチ」に例えてみましょう。

• クラスコンポーネント：スイッチを入れるために複雑な回路（コンストラクタやライフサイクルメソッド）が必要。
• Hooks：シンプルなスイッチを壁につけるだけで簡単にオンオフできる。

つまり、やりたいことは同じでも、Hooksを使うことでよりシンプルに書けるのです。

3. useStateで状態を管理する

3. useStateで状態を管理する

useStateは、コンポーネントの中で「状態（state）」を持たせるためのHooksです。ボタンを押すと文字が変わるような処理を、わかりやすいサンプルで見てみましょう。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

このように、useStateを使うと「現在の値」と「値を更新するための関数」を簡単に扱えます。クラスコンポーネントではthis.stateやthis.setStateを使っていましたが、Hooksなら一行で済みます。

4. useEffectで副作用を扱う

4. useEffectで副作用を扱う

Reactでは、画面に表示する処理以外に「副作用（サイドエフェクト）」と呼ばれる処理を行うことがあります。例えばデータの取得やログの出力などが副作用です。クラスコンポーネントではcomponentDidMountやcomponentDidUpdateを使っていましたが、HooksではuseEffectを使います。

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `カウント: ${count}`;
  }, [count]);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

export default App;

useEffectの第2引数に配列[count]を指定すると、その値が変わったときだけ処理が実行されます。もし空の配列[]を渡せば「最初の一回だけ実行」になります。

5. Hooksのメリット

5. Hooksのメリット

Hooksを使うメリットはたくさんあります。

• クラスを使わなくても状態やライフサイクルを扱える
• コードが短く、読みやすい
• 複数のHooksを組み合わせて柔軟に機能を追加できる
• 関数として独自のHooksを作り、再利用しやすい

このように、HooksはReactをシンプルで扱いやすいものに進化させた仕組みといえます。

まとめ

まとめ

React Hooksは、関数コンポーネントで状態管理や副作用処理をシンプルに扱える仕組みとして、今やReact開発の中心的な存在となっています。従来のクラスコンポーネントでは、コンストラクタの記述やthisの扱いに慣れる必要があり、初心者にとって敷居の高い部分も少なくありませんでした。しかし、Hooksの登場によって、状態管理はuseState、副作用処理はuseEffectといった明確で分かりやすい構文が用意され、Reactの学習曲線は大きく改善されました。 また、Hooksの魅力は基本Hooksだけにとどまらず、「独自のカスタムHooksを作る」ことでロジックを再利用できる点にもあります。複雑な仕様をコンポーネントから切り離して分割できるため、保守性や拡張性の向上にもつながります。大規模なアプリケーションでは、複数の画面で同じデータ取得ロジックを使い回すケースがよくありますが、カスタムHooksを作っておけば、そのロジックを一か所にまとめて管理できるため、変更に強い構成を実現できます。 さらに、HooksはReactのライフサイクルの理解を深めるきっかけにもなります。useEffectの依存配列の扱い方や、クリーンアップ処理の役割を知ることで、コンポーネントがどのタイミングで動いているのかがイメージしやすくなり、より予測しやすいプログラムが書けるようになります。ただ「動くコードを書くだけ」ではなく、Reactの仕組みそのものを理解できる点がHooksの最大の魅力とも言えるでしょう。 Hooksを使いこなせるようになると、コードの読みやすさや再利用性が大きく向上し、チーム開発でも意思疎通がしやすくなります。以下では、今回の内容を踏まえて、Hooksを活用した追加のサンプルとして「カスタムHooksの基本例」を紹介します。

追加サンプル：カスタムHookでカウンターロジックを共通化する

Hooksの理解を深めるために、カスタムHooksでカウント機能を共通化する例を見てみましょう。

// useCounter.js
import { useState } from "react";

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// App.js
import React from "react";
import { useCounter } from "./useCounter";

function App() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h2>現在のカウント: {count}</h2>
      <button onClick={increment}>増やす</button>
      <button onClick={decrement}>減らす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}

export default App;

このように、Hooksを関数として切り出すことで、UIとは独立したロジックを何度でも再利用でき、アプリ全体の構造がより美しく整理されます。小さなコンポーネントでも、大規模な画面でも、Hooksを意識した設計はReact開発の重要な基盤となります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactのHooksとは何ですか？初心者でも理解できますか？

React Hooksとは、Reactで状態管理や副作用の処理を関数コンポーネント内で簡単に扱えるようにする仕組みで、初心者でも理解しやすくなっています。

React Hooksはいつから導入された機能ですか？

React Hooksは、Reactのバージョン16.8から導入された新機能で、関数コンポーネントでも状態管理やライフサイクル処理が可能になりました。