ReactJS - useRefの使い方：初心者向けガイド

こんにちは、未来のReact開発者さんたち！今日は、Reactのhooksの世界に踏み出す興奮人心的な旅を一緒に楽しみましょう。特に、useRef hookについてです。プログラミングが初めてでも心配しないでください。あなたの親切なガイドとして、ステップバイステップですべてを説明します。コーヒー（またはあなたが好きなお茶）を用意して、一緒に潜りましょう！

useRefとは？

コードを書く前に、まずuseRefとは何について理解しましょう。あなたが好きな値を保持できる魔法の箱を思い浮かべてください。この箱は、あなたのコンポーネントが再レンダリングしても変わらないのです。これが、ReactでuseRefが私たちに提供するものです！

useRefは、コンポーネントの再レンダリングを引き起こさずに変化する参照を保持するための方法を提供するhookです。あなたのコンポーネントに隠された特別な区画があり、そこに情報を保存できるようにするものです。

useRef hookのシグネチャ

まず、useRef hookの使い方を見てみましょう：

const refContainer = useRef(initialValue);

ここで、initialValueは始めに使いたい値で、refContainerはcurrentという単一のプロパティを持つオブジェクトです。このcurrentプロパティが実際の参照値を保持します。

これを、ラベルが付いた特別な箱のように考えてください。箱の中に入れるものがcurrentの値になります。

useRef hookの適用

では、useRefを実際のシナリオでどのように使えるか見てみましょう。例えば、クリックすると自動でフォーカスされ、ユーザーがすぐにタイピングを始められるシンプルなテキストインプットを作成したいとします。

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

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

これを分解すると：

1. useRefとuseEffectをReactからインポートします。
2. useRef(null)を使ってinputRefという参照を作成します。
3. useEffect hookを使って、コンポーネントがマウントされたときにインプットをフォーカスします。
4. JSXで、インプット要素にref属性を使って参照をアタッチします。

このコンポーネントがレンダリングされると、インプットが自動的にフォーカスを受けます。魔法のようですね！でも、これは魔法ではなく、useRefの力です！

useRefの使用例

基本的な例を見たので、もっと多くの使用例を探ってみましょう。信じてください、このhookはスイスアーミーナイフよりも多様です！

1. 前回の値を保持する

時々、前回のレンダリングからの値を追跡したいことがあります。useRefはこれに完璧です！

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

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>現在のカウント: {count}</p>
<p>前回のカウント: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>インクリメント</button>
</div>
);
}

この例では、useRefを使って前回のカウント値を保持しています。カウントが変わるたびに、私たちはuseEffect hookで参照を更新します。このようにして、現在と前回のカウントの両方にアクセスできます。

2. DOM要素に直接アクセスする

useRefはDOM要素に直接アクセスするのにも非常に便利です。ビデオプレイヤーコンポーネントを作成する例を見てみましょう：

import React, { useRef } from 'react';

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

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

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

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>再生</button>
<button onClick={pauseVideo}>停止</button>
</div>
);
}

ここでは、useRefを使ってビデオ要素の参照を取得しています。これにより、ボタンがクリックされたときにplay()やpause()メソッドを直接ビデオ要素に呼び出すことができます。

3. レンダリング間で値を保持する

useRefは、再レンダリングを引き起こさずに値を保持するのにも非常に便利です。例を見てみましょう：

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

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>カウント: {count}</div>;
}

この例では、useRefを使ってsetIntervalが返すインターバルIDを保持しています。これにより、useEffect hookのクリーンアップ関数でインターバルをクリアし、メモリリークを防ぐことができます。

締め括り

そして、皆さん！useRefの土地を旅し、そのシグネチャ、適用方法、そして一般的な使用例を探求しました。忘れてはならないのは、useRefはあなたのReact冒険の信頼できる相棒であり、再レンダリングを引き起こさずに何かを追跡する必要があるときに常に利用できます。

以下は、私たちがカバーしたメソッドの簡単なまとめです：

メソッド	説明
useRef(initialValue)	指定された初期値を持つrefオブジェクトを作成します
ref.current	refの現在の値にアクセスまたは変更します
<element ref={refObject}>	DOM要素にrefをアタッチします

Reactの旅を続ける中で、useRefを使う創造的な方法が daha多く見つかるでしょう。正しく使えば、React開発における多くの難しい問題を解決できる強力なツールです。

忘れないでください、React（または他のプログラミング概念）をマスターする鍵は練習です。ですから、これらの例を試してみて、自分のアイデアを試してみて、間違ったことを恐れずにください。それが私たちが学び成長する方法です。

ハッピーコーディング、そしてrefがあなたと共にありますように！

Credits: Image by storyset