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

2024年11月2日2024年11月8日

Reactでコンポーネントを作成していると、

「ある要素を直接操作したい」「特定の状態を再描画せずに保持したい」という場面が出てきます。

たとえば、フォーカスを設定するために要素を選択したいときや、

再レンダリングを伴わずに変数を使いたいとき、useRefが役に立ちます。

この記事では、React初心者の方がuseRefを理解し、

実際に使えるようになるためのステップを詳しく解説します。

例やコードを交えながら、useRefの使い方や役立つ場面をわかりやすく説明していきます！

useRefとは？どういうときに使う？

useRefの基本的な役割

useRefは、Reactのフックのひとつで、

コンポーネントが再描画されても変更されない「参照」を作るためのものです。

この「参照」には、DOM要素や状態を保存しておくことができます。

通常の状態管理（useStateなど）と違い、

useRefに保存したデータはコンポーネントの再描画によってリセットされません。

また、値が変わってもコンポーネントが再描画されないため、

再レンダリングを防ぐことができるのが特徴です。

useRefの使いどころ

useRefは、次のような場面で便利に使えます。

特定のDOM要素に直接アクセスしたいとき（例：フォーカスを設定したり、スクロール位置を変更したり）
再描画が不要な情報を保持したいとき（例：クリック回数のカウント、タイマーのIDなど）

例えば、リアルな例で考えると、useRefは「個人的なメモ帳」のようなものです。

メモ帳に書き留めた情報（例：フォーカスをあてたい要素や再描画に不要なカウント数）は、

他の人が見る必要もなく、何度も更新する必要もありません。

その情報を、メモ帳（useRef）にそっと保存しておき、必要なときにだけ取り出せる、そんな感覚です。

useRefの基本的な使い方

1. useRefを使ってDOM要素にアクセスする

まずは、useRefでDOM要素にアクセスする基本的な方法を見てみましょう。

ボタンをクリックすると入力フィールドにフォーカスが当たるというシンプルな例を使います。

import React, { useRef } from 'react';

function FocusInput() {
  // useRefで参照を作成
  const inputRef = useRef(null);

  // ボタンがクリックされたらinputにフォーカスを設定
  const handleFocus = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="ここに入力" />
      <button onClick={handleFocus}>フォーカスを当てる</button>
    </div>
  );
}

export default FocusInput;

JSX

コードの解説

useRef(null)でinputRefという参照を作成します。inputRefは、ここでは空の状態でスタートします。
<input ref={inputRef} />のように、input要素にref属性を設定してinputRefに関連付けます。これにより、inputRef.currentでこのDOM要素にアクセスできるようになります。
handleFocus関数では、inputRef.current.focus()を呼び出し、input要素にフォーカスを当てます。

このように、useRefを使うと、

直接DOM操作が必要な場面でもReactのコンポーネントの中でスムーズに操作ができるようになります。

2. useRefで再描画が不要なデータを保持する

次に、useRefを使って再描画を伴わないカウント変数を管理する例を紹介します。

ボタンをクリックするたびにクリック回数を数えますが、

画面の再描画は行わず、バックグラウンドでカウントを増やしていきます。

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

function ClickCounter() {
  const countRef = useRef(0); // 再描画しないカウンター
  const [count, setCount] = useState(0); // 表示用のカウンター

  const handleClick = () => {
    countRef.current += 1;
    console.log(`クリック回数（非表示）: ${countRef.current}`);
    setCount(count + 1);
  };

  return (
    <div>
      <p>表示中のクリック回数: {count}</p>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default ClickCounter;

JSX

コードの解説

countRefはuseRef(0)で初期化され、countRef.currentにカウントを保持します。
handleClick関数が呼ばれるたびに、countRef.currentが増加し、最新のクリック回数がコンソールに表示されます。
表示用にはuseStateのcountを使っているため、画面に表示するカウンターはsetCountによって更新されますが、countRef自体の更新は再レンダリングを引き起こしません。

countRefはバックグラウンドで管理される非表示のカウントとして使われ、

コンポーネントの再描画に影響を与えないため、パフォーマンスを保ちながら値を保持できるのが特徴です。

useRefの活用例：動画プレーヤーのコントロール

次に、もう少し実践的な使い方として、動画プレーヤーの再生・一時停止ボタンを作成してみましょう。

動画の要素に直接アクセスし、ボタン操作で再生や一時停止を制御する場面でuseRefが役立ちます。

1. useRefで動画要素を参照

まずは動画要素を参照して、再生や一時停止をコントロールできるようにします。

import React, { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const handlePlay = () => {
    if (videoRef.current) {
      videoRef.current.play();
    }
  };

  const handlePause = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  return (
    <div>
      <video ref={videoRef} width="400" controls>
        <source src="sample-video.mp4" type="video/mp4" />
        お使いのブラウザは動画タグをサポートしていません。
      </video>
      <button onClick={handlePlay}>再生</button>
      <button onClick={handlePause}>一時停止</button>
    </div>
  );
}

export default VideoPlayer;

JSX

コードの解説

useRef(null)でvideoRefを作成し、<video ref={videoRef}>で動画要素に関連付けます。
再生ボタン（handlePlay）や一時停止ボタン（handlePause）では、それぞれvideoRef.current.play()やvideoRef.current.pause()を呼び出して、動画を操作します。

これにより、ボタンをクリックするたびに動画が再生・停止されます。

useRefを使うことで、動画の再生や一時停止を簡単に制御でき、

動画プレーヤーのような複雑な操作も実現可能です。