ReactのHooksとは？わかりやすく解説

2024年11月7日2024年11月8日

Reactを使い始めたけど、

「Hooksって何？」「関数コンポーネントとどう違うの？」と疑問に思っていませんか？

この記事では、Reactの初心者でも理解できるよう、Hooksについて丁寧に解説します。

実際の使い方やメリット、さらに代表的なHooksも紹介するので、ぜひ一緒に勉強していきましょう！

おねしゃす

Hooksとは？何のために使うのか？

まず、「Hooksって何？」という疑問にお答えします。

Hooksは、React 16.8で導入された新しい機能で、

関数コンポーネントで状態管理やライフサイクルの制御ができるようにするための仕組みです。

以前のReactでは、

状態を管理したりライフサイクルメソッド（componentDidMountなど）を使いたい場合、

クラスコンポーネントを使う必要がありました。

しかし、クラスコンポーネントは少しコードが複雑になることが多く、

React開発チームも簡単で読みやすいコードを書けるように改善を目指しました。

その結果生まれたのが「Hooks」です。

なぜHooksが追加されたのか？

Hooksは主に以下の問題を解決するために導入されました。

関数コンポーネントでの状態管理ができなかった
クラスコンポーネントが複雑で、学習コストが高かった
再利用性の低いロジックが増えてしまっていた

Hooksを使うことで、

シンプルな関数コンポーネントだけで状態管理やライフサイクルを操作できるため、

コードがよりシンプルで読みやすくなります。

Hooksのメリットとは？

Hooksには大きく3つのメリットがあります。

関数コンポーネントでも状態管理ができる
- 状態管理が必要なときでも関数コンポーネントだけで書けるため、コードがシンプルに保てます。
ライフサイクルメソッドの使いやすさ
- Hooksを使うと、ライフサイクルメソッドを関数コンポーネント内で簡単に利用でき、特定の動作を必要なときに行えるようになります。
コードの再利用性が向上
- カスタムHooksを作成することで、複雑なロジックも他のコンポーネントで簡単に使い回すことが可能です。

基本的な使い方と代表的なHooksの紹介

それでは、具体的にどのように使うかを見ていきましょう。

Reactにはいくつかの代表的なHooksがあり、それぞれ役割が異なります。

ここでは、代表的な3つのHooksを紹介します。

useState：状態を管理するためのHook

useStateは、関数コンポーネントで状態を管理するために使用します。

これを使うと、クラスコンポーネントのthis.stateやthis.setStateと同様のことができます。

使い方の例

import React, { useState } from 'react';

function Counter() {
  // count という名前の状態変数を定義し、初期値は 0 に設定
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

JSX

このコードでは、useStateを使ってcountという状態を宣言し、

ボタンをクリックするたびにcountが1増えるようになっています。

useStateを使うことで、クラスコンポーネントを使わずに状態管理ができるようになりました。

useEffect：副作用を扱うためのHook

useEffectは、レンダリング後に何かの処理（副作用）を行いたいときに使います。

たとえば、データの取得やDOMの操作などが必要なときに使われます。

使い方の例

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // クリーンアップ処理
    return () => clearInterval(timerId);
  }, []);

  return <p>経過時間: {time}秒</p>;
}

JSX

ここでは、useEffectを使って1秒ごとにtimeが増加するように設定しています。

また、returnでクリーンアップ処理（タイマーを止める処理）も行っているため、

無限にタイマーが増え続けることも防げます。

useContext：コンテキストを共有するためのHook

useContextを使うと、グローバルな状態を簡単に共有できるようになります。

通常、Reactコンポーネント間でデータを受け渡すために「props」を使用しますが、

たくさんのコンポーネントに同じデータを渡したいときには、useContextが便利です。

使い方の例

import React, { useContext } from 'react';

const UserContext = React.createContext();

function Greeting() {
  const user = useContext(UserContext);
  return <h1>こんにちは、{user.name}さん！</h1>;
}

function App() {
  const user = { name: 'ゆうき' };

  return (
    <UserContext.Provider value={user}>
      <Greeting />
    </UserContext.Provider>
  );
}

JSX

この例では、UserContextを利用してGreetingコンポーネントにuserのデータを渡しています。

useContextによって、わざわざ「props」を使用せずにデータを参照できるため、コードが簡潔になります。

カスタムHooksでロジックの再利用を簡単に

Hooksは自分で作成することも可能です。

これをカスタムHooksと呼び、複雑なロジックを切り出して別のコンポーネントで使い回すことができます。

カスタムHooksの例

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 他のコンポーネントで利用
function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>読み込み中...</p>;

  return <div>{data && data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}

JSX

このuseFetchカスタムHookを使うことで、任意のURLからデータを取得する処理を簡単に再利用できます。

Hooksを使う際の注意点

Hooksを使うときには、いくつかの注意点もあります。

Hooksは関数の最上部でしか使えない
Hooksは、コンポーネント内で途中に条件分岐などを挟んで使うことはできません。
useEffectの依存配列を正しく設定する
useEffectには依存配列を設定することで、どのタイミングで実行するかを制御できますが、依存する状態や変数が多いときには注意が必要です。

ほえ～