Reactの世界へようこそ！ここまで学習を進めてきたあなたは、きっと「Reactの魔法」である`useState`の便利さに気づいているはずです。画面の中の数字が変わったり、文字が切り替わったりするあの感覚、楽しいですよね。
でも、開発を進めていると、ふとこんな壁にぶつかるはずです。
「画面には表示しなくていいんだけど、裏でコッソリ覚えておきたい数字があるんだよな……」
「ボタンを押した時に、特定の入力ボックスにカチッとカーソルを合わせたいんだけど、どうすればいいんだ？」
そんな時、Reactの救世主となるのが`useRef`というフックです。今日は、この「縁の下の力持ち」について、少しだけ肩の力を抜いてお話ししましょう。
—
1. `useRef` ってなに？ ― 「魔法のメモ帳」と「リモコン」
`useRef`は、ひとことで言うと「Reactのレンダリング（再描画）というお節介を回避するための道具」です。
Reactの`useState`は、「値が変わったから、画面を新しく描き直すね！」という非常に優秀な秘書のようなもの。でも、時には「描き直さなくていいから、ちょっとこれ預かっておいて！」と頼みたい時もありますよね。
二つの大きな役割
1. 値を「こっそり」持っておく（メモ帳）
- 値が変わっても画面を更新しません。再レンダリングを誘発したくない、裏方の情報を保持するのに最適です。
2. DOM（HTML要素）を直接操作する（リモコン）
- Reactは通常、DOMを直接触ることを嫌います。でも、「特定の入力欄にフォーカスを当てる」といった、ブラウザの力が必要な時は、このリモコンを使って直接指示を出します。
—
2. 実践：入力欄に「カチッ！」とフォーカスする（リモコン編）
まずは、よくある「送信ボタンを押したら、入力欄にフォーカスを戻す」という機能を実装してみましょう。
import { useRef } from ‘react’;
function InputFocus() {
// 1. まず、リモコンの「持ち手」を用意します。初期値はnullでOK。
const inputRef = useRef(null);
const handleClick = () => {
// 3. 持ち手（inputRef.current）を通じて、実際のHTML要素に「フォーカスしろ！」と命令します。
inputRef.current.focus();
};
return (
);
}
ポイント： `inputRef.current` がまさに実際のHTML要素そのものです。`document.querySelector`などを使わなくても、Reactの作法の中で安全にDOMを操作できるんですね。
—
3. 実践：再レンダリングを無視して値を保持する（メモ帳編）
次に、「何回ボタンが押されたか」をカウントしたいけれど、その数字が画面に表示されるわけではない、という少し特殊なケースを考えてみましょう。
import { useRef } from ‘react’;
function Counter() {
// 値を保持するためのメモ帳を準備
const count = useRef(0);
const handleClick = () => {
count.current += 1;
console.log(`クリックされた回数: ${count.current}`);
// ここで値を更新しても、画面は再レンダリングされません！
// 画面に影響を与えないので、パフォーマンス的にも非常に軽量です。
};
return (
);
}
このように、`useRef`の中身（`.current`）を書き換えても、Reactは「画面に変な影響はないな」と判断して、再レンダリングをスキップしてくれます。
—
4. 最後に：つまずきやすいポイント
初心者の頃、最も混乱しやすいのが「useStateとどう使い分けるの？」という点です。
- 画面に表示されるもの、あるいは表示に影響するもの → `useState`
- 例：カウンターの数字、入力された文字、リストの表示
- 画面には出さないけど、計算や操作のために裏で持っておきたいもの → `useRef`
- 例：タイマーのID、直前の値の記録、DOMへのアクセス
「もし迷ったら、とりあえず`useState`を使ってみる」で大丈夫です。動かしてみて、「あ、これ画面を更新する必要ないな」と気づいた時に、そっと`useRef`に差し替えてみてください。
—
Reactは、あなたのコードをより美しく、より効率的にするための道具箱です。`useRef`はその中でも、少しプロっぽい動きをさせてくれる「隠しアイテム」のような存在です。
最初は難しく感じるかもしれませんが、実際にコードを書いて「あ、画面が再レンダリングされずに値が残ってる！」と確認できた瞬間、きっとこの便利さが腑に落ちるはずですよ。
焦らず、一つずつ自分のものにしていきましょうね！応援しています。
コメント