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;
コードの解説
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;
コードの解説
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;
コードの解説
useRef(null)でvideoRefを作成し、<video ref={videoRef}>で動画要素に関連付けます。- 再生ボタン（
handlePlay）や一時停止ボタン（handlePause）では、それぞれvideoRef.current.play()やvideoRef.current.pause()を呼び出して、動画を操作します。
これにより、ボタンをクリックするたびに動画が再生・停止されます。
useRefを使うことで、動画の再生や一時停止を簡単に制御でき、
動画プレーヤーのような複雑な操作も実現可能です。
useRefを使うときの注意点
useRefを使っても再レンダリングは発生しない
useRefで保持している値を更新してもコンポーネントが再レンダリングされないため、
useStateと使い分けることが大切です。
もし画面に表示される部分に反映したい場合は、useStateを使う必要があります。
フォーカスやスクロール位置の操作で活用する
useRefはDOM要素に直接アクセスできるため、フォーカスの設定やスクロールの位置変更など、
ユーザーの操作に関連する処理で非常に役立ちます。
これらの操作はDOMに依存するため、Reactの他のフックよりもuseRefが適しています。
まとめ
ReactのuseRefは、DOM要素にアクセスしたり、
再レンダリングを避けつつ情報を保持したい場面で非常に便利なフックです。
propsやuseStateとは異なり、参照の中にある値を更新しても再描画されないため、
パフォーマンスに優れた操作が可能です。
本記事で紹介したuseRefの使い方を参考にして、ぜひ実際のReactプロジェクトで活用してみてください！
あざした
