先生と生徒の会話形式で理解しよう

生徒

「Reactで外部ライブラリを使うとき、毎回同じコードを書かないといけないのが面倒です。」

先生

「その場合はカスタムフックでラップすると便利です。ライブラリの操作をまとめて、簡単に使えるようになります。」

生徒

「ラップってどういう意味ですか？」

先生

「ラップとは、複雑な処理や外部ライブラリの操作を自分のフックや関数の中に包んで、呼び出すときに簡単に使えるようにすることです。」

1. 外部ライブラリをカスタムフックでラップするメリット

外部ライブラリは便利ですが、毎回同じ設定や初期化コードを書くと煩雑になります。カスタムフックでラップすることで、ライブラリの設定や初期化を一度だけ書き、複数のコンポーネントで簡単に使い回せます。
初心者でもReactのコードがスッキリして読みやすくなります。

2. カスタムフックで外部ライブラリをラップする基本の作り方

ここでは例として、日付操作に便利な「date-fns」というライブラリをカスタムフックでラップしてみます。
「date-fns」は日付の計算やフォーマットが簡単にできるライブラリです。


import { useState, useEffect } from "react";
import { format, addDays } from "date-fns";

function useFormattedDate(initialDate) {
  const [date, setDate] = useState(initialDate);
  const [formatted, setFormatted] = useState("");

  useEffect(() => {
    setFormatted(format(date, "yyyy年MM月dd日"));
  }, [date]);

  const addDaysToDate = (days) => {
    setDate(addDays(date, days));
  };

  return { date, formatted, addDaysToDate };
}

export default useFormattedDate;

このカスタムフックは、初期日付を受け取り、日付をフォーマットして返します。
また、日付を指定日数だけ進める関数もフック内にまとめています。これで、コンポーネント側は簡単に日付操作ができます。

3. カスタムフックを使ったコンポーネント例

作ったカスタムフックを使って、日付を表示・操作するコンポーネントを作ります。


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

function DateDemo() {
  const { date, formatted, addDaysToDate } = useFormattedDate(new Date());

  return (
    <div>
      <h3>今日の日付</h3>
      <p>{formatted}</p>
      <button onClick={() => addDaysToDate(1)}>1日進める</button>
      <button onClick={() => addDaysToDate(-1)}>1日戻す</button>
    </div>
  );
}

export default DateDemo;

（画面に今日の日付が表示され、ボタンを押すと1日ずつ進めたり戻したりできます）

このようにカスタムフックで外部ライブラリをラップすると、コンポーネント側のコードはシンプルになり、再利用も簡単です。

4. ラップする際のポイント

外部ライブラリの初期化や設定はフック内でまとめる
必要な関数やデータだけを返すことでコンポーネントをシンプルにする
複数のコンポーネントで同じフックを使い回せるように設計する
ライブラリのバージョンや依存関係に注意する

これらを意識するだけで、Reactアプリのコードが整理され、保守性も高まります。

5. 応用例：他のライブラリも同様にラップ可能

「axios」や「chart.js」などの外部ライブラリも、カスタムフックでラップできます。
API通信やグラフ描画の処理をフック内にまとめておくと、コンポーネントは必要なデータや関数だけを受け取り、表示に専念できます。

まとめ

カスタムフックで外部ライブラリを扱う考え方の振り返り

この記事では、Reactのカスタムフックを使って外部ライブラリをラップする方法について、基本から応用まで順を追って解説してきました。 Reactで開発を進めていると、日付操作、API通信、グラフ描画、ストレージ操作など、さまざまな外部ライブラリを使う場面が増えていきます。しかし、そのたびにコンポーネント内で初期化や設定、細かい処理を書くようになると、コードが長くなり、読みづらく、修正もしづらくなってしまいます。

そこで役立つのが、カスタムフックによる「ラップ」という考え方です。外部ライブラリの使い方をフックの中にまとめてしまえば、コンポーネント側は「何を表示するか」「どの操作をするか」だけに集中できます。結果として、Reactのコンポーネントは見通しがよくなり、同じ処理を何度も書く必要がなくなります。これは初心者にとっても、実務でReactを使う人にとっても、非常に大きなメリットになります。

ラップすることで得られる実践的な効果

カスタムフックで外部ライブラリをラップすると、単にコードが短くなるだけでなく、設計面でも多くの良い効果があります。例えば、ライブラリの仕様変更やバージョンアップがあった場合でも、修正箇所はフックの中だけで済むことが多くなります。コンポーネントを一つひとつ修正する必要がなくなるため、保守性が高く、安心して機能追加や改修を進められます。

また、外部ライブラリ特有の書き方や癖をフック内に閉じ込めることで、プロジェクト全体のコードの統一感も保ちやすくなります。初心者のうちは「なぜこの書き方になっているのか」が分からず戸惑うこともありますが、カスタムフックとして整理されていれば、フックの役割を理解するだけで全体像を把握できるようになります。

復習用のシンプルなラップ例

ここで、今回学んだ内容を整理するために、外部ライブラリをカスタムフックでラップするシンプルな例をもう一度確認してみましょう。この例では、日付を扱う処理をフックにまとめ、コンポーネント側では表示と操作だけを行っています。


import { useState, useEffect } from "react";
import { format } from "date-fns";

function useSimpleDate(date) {
  const [formatted, setFormatted] = useState("");

  useEffect(() => {
    setFormatted(format(date, "yyyy年MM月dd日"));
  }, [date]);

  return formatted;
}

export default useSimpleDate;

このように、外部ライブラリを直接コンポーネントで使わず、カスタムフックを経由して使うだけでも、 Reactのコードはかなり整理されます。フックの中に処理を閉じ込める、という考え方を覚えておくと、今後どんなライブラリを使う場合でも応用できるようになります。

初心者が意識しておきたいポイント

初心者のうちは、「すべてをカスタムフックにしなければいけないのでは」と考える必要はありません。まずは「同じコードを何度も書いているな」と感じたタイミングで、その処理をフックにまとめてみる、という感覚で十分です。外部ライブラリの初期化や設定、共通の操作が見えてきたら、それをカスタムフックとして切り出すだけでも、 Reactの理解は一段深まります。

カスタムフックはReact Hooksの中でも特に実務に直結しやすい要素です。外部ライブラリをラップできるようになると、コンポーネント設計の考え方が変わり、「読みやすいReactコードとは何か」を自然に意識できるようになります。

先生と生徒の振り返り会話

生徒

「外部ライブラリをそのまま使うより、カスタムフックにまとめたほうがコードがすごく見やすくなりました。」

先生

「それがラップの一番の効果ですね。コンポーネントは表示に集中して、処理の中身はフックに任せると整理しやすくなります。」

生徒

「今まではライブラリの使い方を全部コンポーネントに書いていたので、後から見返すと分かりにくかった理由が分かりました。」

先生

「そうですね。カスタムフックを使えるようになると、 Reactの設計が一段レベルアップします。今回の考え方を覚えておけば、他のライブラリでも同じように応用できますよ。」

外部ライブラリをカスタムフックでラップするという発想は、 Reactを使った開発を長く続けるうえで必ず役に立ちます。小さなサンプルからでも構わないので、処理をまとめる、再利用する、読みやすくする、という意識を持ちながらReact Hooksを使っていきましょう。