第13回：useRefの使い方：DOM要素への直接アクセスと値を保持するテクニック

前回：Reactのレンダリング最適化：useMemoとuseCallbackで無駄な再描画を防ぐでは、アプリを爆速にする「賢いサボり方」を学びました。

Reactの基本ルールは「データ（State）を変えて、画面を自動で更新させる」ことでしたね。しかし、開発をしていると、どうしてもこのルールだけでは解決できない**「泥臭い操作」**が必要になる瞬間があります。

画面が開いた瞬間に、入力欄にフォーカスを合わせたい
動画プレイヤーを再生・停止させたい
スクロール位置を特定の位置まで飛ばしたい

これらはReactの「自動更新」にお任せするのではなく、ブラウザの部品（DOM）を直接指で触るような操作です。そんな時に使う魔法の杖が useRef（ユー・レフ） です。

1. useRefは「狙い撃ち」するための道具
2. 書き方の基本：refをタグに貼り付ける
3. 【実践】ボタンを押して入力欄にフォーカス！
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：使いすぎは「Reactらしさ」を壊す？
1. 今回のまとめ
2. 次回予告：コードをスッキリ「自作フック」

1. useRefは「狙い撃ち」するための道具

useRef には、大きく分けて2つの役割があります。

DOMへのアクセス： 特定のHTMLタグを「これ！」と指し示す。
値をこっそり保持： 画面を書き換え（再描画）させずに、データを裏で取っておく。

第6回のuseStateとの最大の違いは、**「中身を書き換えても画面が更新されない」**という点です。画面には出さないけれど、プログラムの裏側で覚えておきたい情報を扱うのに最適です。

2. 書き方の基本：refをタグに貼り付ける

使い方は3ステップです。

作成： const myRef = useRef(null); で入れ物を作る。
紐付け： JSXのタグに ref={myRef} と書く。
操作： myRef.current を通じて中身を触る。

必ず .current というプロパティを経由するのが、useRef独自のルールです。

3. 【実践】ボタンを押して入力欄にフォーカス！

今回は、ボタンをクリックした瞬間に、離れた場所にある入力欄にカーソルを自動で移動させる（フォーカスする）サンプルを作ります。第2回の環境で作成した App.jsx を書き換えてみましょう。

App.jsx（最小構成版）

JavaScript

import React, { useRef } from 'react';

export default function App() {
  // 1. input要素を指し示すための「入れ物」を作る
  const inputRef = useRef(null);

  const handleFocus = () => {
    // 3. inputRef.current で実際のHTML要素にアクセスし、
    // JavaScript標準の focus() メソッドを実行する
    inputRef.current.focus();
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>useRef の実践</h1>

      {/* 2. ref属性を使って、このinputタグをinputRefに紐付ける */}
      <input 
        ref={inputRef} 
        type="text" 
        placeholder="ここがターゲットです" 
      />

      <div style={{ marginTop: '20px' }}>
        <button onClick={handleFocus}>
          入力欄にジャンプ！
        </button>
      </div>

      <p>※ReactのStateを使わず、直接HTML要素を操作しています。</p>
    </div>
  );
}

CodeSandboxでuseRefのフォーカス操作を体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

HTMLElement.focus(): ブラウザが標準で持っている命令で、指定した入力要素を選択状態にします。
null からの開始: 画面が表示される前は要素が存在しないため、useRef の初期値は通常 null にします。

Reactのポイント

.current プロパティ: inputRef 自体はただのオブジェクトで、その中の current という引き出しの中に、本物のHTML要素（DOM）が格納されます。
再描画されないメリット: もしこれを useState で管理しようとすると、フォーカスするたびに画面全体を書き換えることになり、パフォーマンスが落ちてしまいます。useRef なら画面に影響を与えず「操作」だけを行えます。