Reactのカスタムフック（独自フック）の基本的な使い方 | 初心者向け解説

本日はReactのカスタムフック（独自フック）について、初心者の方に向けて基本的な使い方を解説します。

カスタムフックとは
- カスタムフックの作成

Reactの基礎として、以前当ブログで解説したデータ取得の流れを活用して、カスタム(独自)フックを作成し、useEffectを使用してデータをフェッチし、そのデータを表示する方法を説明します。

まず、useEffectフックの基本的な使い方について理解していない場合は、以下の記事を参考にしてください。

dev-k.hatenablog.com

カスタムフックとは

Reactでは、独自のカスタムフックを作成することができます。

これは、複数のコンポーネントで共通の状態ロジックを使用する場合に、同じコードを繰り返し記述する代わりに、カスタムフック内に配置し再利用することができるためです。

カスタムフックの主な目的は、コンポーネントで使用されるロジックの再利用を容易にすることです。

これにより、より読みやすくなる関数として活用でき、他のフックを使用できるJavaScript関数となります。また、このメカニズムにより、ロジックとビューを分離することができます。

・カスタムフックを使用する際のルールは以下の通りです。

・ループ、条件、またはネストされた関数の内部からフックを呼び出さない。

・通常の関数からフックを呼び出さない。

・ React関数コンポーネントからのみフックを呼び出す。

・フックはコンポーネントのトップに配置する必要がある。

そして、カスタムフックを使用する際の名前は、useという単語で始まる必要があります。これは命名規則となっており、注意が必要です。

例えば、サーバーからデータをフェッチし、プロセス全体で共有する必要がある場合、カスタム関数を作成することで、結果を自由に返すことができます。

それではCreate-React-Appのご準備をお願い致します。

カスタムフックの作成

まずは、Reactアプリケーションで外部APIからデータを取得するための独自フックuseFetchを作成しましょう。

このフックは、useStateとuseEffectを使用して、指定されたURLからデータを取得し、そのデータを状態として返します。

// useFetch.js

import { useState, useEffect } from "react";

const useFetch = (url) => {
  // データをuseStateフックで初期化します。
  const [data, setData] = useState([]);

  // useEffectフックを使用して、APIからデータを取得します。
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  // 取得したデータを返します。
  return data;
};

export default useFetch;

次に、先ほど作成したuseFetchフックを使用して、外部APIから取得したデータを表示するReactコンポーネントAppを作成しましょう。

このコンポーネントでは、useFetchフックを使用して、https://jsonplaceholder.typicode.com/todosからデータを取得し、取得したデータをリスト形式で表示します。

// App.js

import React from "react";
import useFetch from "./useFetch";

const App = () => {
  // useFetchフックを使用して、APIからデータを取得します。
  const data = useFetch("https://jsonplaceholder.typicode.com/todos");

  // 取得したデータを表示します。
  return (
    <div>
      <ul>
        {data.map((el) => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul>
    </div>
  );
};

See the Pen React カスタムフック fetch by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

Reactアプリケーションで外部APIからデータを取得するための簡単な方法です。

カスタムフックであるuseFetchフックを使用することで、データの取得と表示を簡単に行うことができます。

上記のコードを分解して、より詳細な解説をしていきます。

カスタムフックの使い方

この例では、REST APIの「JSON Placeholder」サービスを使用して、サンプルのデータをフェッチします。

// useFetch.js

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState([]);

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

  return data;
};

export default useFetch;

このカスタムフックは、useStateフックを使用して、データを初期化します。

そして、useEffectフックを使用して、APIからデータを取得します。

useEffectフックは、第2引数に空の配列を渡すことで、初回のレンダリング時にのみ実行されるようにしています。

この関数は、必要に応じて何でも返すことができます。

他のReactフックを使用しているため、この関数はカスタムフックと呼ばれます。

以下は、作成したカスタムフックを使用する例です。

// App.js

import useFetch from "./useFetch";

const App = () => {

 const data = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <div>
      <ul>
        {data.map(el => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul>
    </div>
  );
}

そして、取得したデータをsetData関数を使用して、useStateフックで管理しているdataにセットします。最後に、取得したデータをreturn文で返します。

このように、カスタムフックを任意のコンポーネントで再利用することができます。

カスタムフックは、複雑な問題を処理するために単純化されたコードとして分割するための強力で便利な方法を提供してくれます。これにより、生産性が向上し、時間が節約されます。

他の例でも、学んでいきましょう。

API取得以外でも、例えばフォームのバリデーションやローカルストレージの操作など、様々な用途に使うことができます。

以下に、入力フィールドのカスタムフックを作成して再利用可能な関数として抽出していきます。

まず、useInputカスタムフックを定義します。

このフックは、入力値と入力値を変更する関数、そして入力値をリセットする関数を返します。

// useInput.js

import { useState } from 'react';

// カスタムフックを定義する
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  // 入力値が変更された時に呼ばれる関数
  function handleChange(event) {
    setValue(event.target.value);
  }

  // 入力値をリセットする関数
  function reset() {
    setValue(initialValue);
  }

  // 入力値と入力値を変更する関数を返す
  return [value, handleChange, reset];
}

次に、Appコンポーネントを定義します。

このコンポーネントでは、useInputカスタムフックを呼び出して、名前とメールアドレスの入力フォームを作成します。

また、フォームが送信された時には、入力値をコンソールに出力して、入力値をリセットします。

const App = () => {
// カスタムフックを呼び出す
  const [name, setName, resetName] = useInput('');
  const [email, setEmail, resetEmail] = useInput('');

// フォームが送信された時に呼ばれる関数
  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
    resetName();
    resetEmail();
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={setName} />
        </label>
        <label>
          Email:
          <input type="email" value={email} onChange={setEmail} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;