ReactのuseRefでDOM操作をマスターしよう①

useRefとは

Reactを使用した開発では、基本的に仮想DOMと状態管理 によってUIを操作します。しかし、時には「実際のDOM要素そのもの」にアクセスしたいケースがあります。そこで登場するのが useRef です。

今回は、DOMの情報をuseRefを使用してどのような値が取得できるのかをコンソールログを読み解きながら解説します。

useRefでDOM要素を参照する基本

まず、useRefでDOMを参照する基本的な書き方をおさらいしておきましょう。

import { useRef, useEffect } from "react";

export default function App() {
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (divRef.current) {
      console.log(divRef.current); // 実際のDOM要素が出力される
    }
  }, []);

  return <div ref={divRef}>Hello useRef!</div>;
}

このとき、divRef.current には 実際のDOM要素が格納されます。

コンソールログから見える「DOMの全貌」

実際に console.log(divRef.current) をすると、以下のように膨大な情報が表示されます。ピックアップしてみると

1.サイズや位置

要素の幅・高さ

divRef.current?.offsetWidth   // 要素の幅（border含む）
divRef.current?.offsetHeight  // 要素の高さ（border含む）

パディング込みのサイズ

divRef.current?.clientWidth   // パディング込みの幅（スクロールバー除く）
divRef.current?.clientHeight  // パディング込みの高さ（スクロールバー除く）

親要素からの位置

divRef.current?.offsetTop     // 親要素からのY座標
divRef.current?.offsetLeft    // 親要素からのX座標

スクロール関連

divRef.current?.scrollTop     // 縦方向のスクロール量
divRef.current?.scrollLeft    // 横方向のスクロール量
divRef.current?.scrollHeight  // 全体の高さ
divRef.current?.scrollWidth   // 全体の幅

2.クラスや属性

クラス情報

divRef.current?.className   // 要素に設定されているクラス名（文字列）
divRef.current?.classList   // 要素に設定されているクラス一覧

属性情報

divRef.current?.id          // 要素のID
divRef.current?.attributes  // 要素に設定されている属性ノードの一覧
divRef.current?.dataset     // data-* 属性の情報

3.テキストやHTML

テキスト系

divRef.current?.innerText    // 表示されているテキスト（改行・スタイルを考慮）
divRef.current?.textContent  // 生のテキスト（改行や非表示要素も含む）

HTML系

divRef.current?.innerHTML    // 子要素を含むHTML文字列

4. イベントハンドラ

イベントハンドラ参照

divRef.current?.onmouseover   // マウスオーバーイベント（デフォルトは null）
divRef.current?.onmouseleave  // マウスリーブイベント（デフォルトは null）
divRef.current?.onprogress    // プログレスイベント（デフォルトは null）

イベントリスナーの追加

divRef.current?.addEventListener("click", () => {
  alert("クリックされました！");
});

5. スタイル情報

スタイル参照

divRef.current?.style.backgroundColor  // インラインスタイルに直接アクセス

const style = getComputedStyle(divRef.current!) 
style.fontSize // 実際にブラウザで解釈されたフォントサイズ

6. フォーム

フォーム要素

inputRef.current?.value    // 入力値
inputRef.current?.checked  // チェックボックスの状態
inputRef.current?.files    // アップロードされたファイル

フォーカスや操作

divRef.current?.focus()          // フォーカスを当てる
divRef.current?.blur()           // フォーカスを外す
divRef.current?.scrollIntoView() // 要素までスクロール

7. その他 代表的な値・機能

親子関係

divRef.current?.parentElement      // 親要素
divRef.current?.children           // 子要素一覧
divRef.current?.firstElementChild  // 最初の子要素

位置計測

const rect = divRef.current?.getBoundingClientRect()
rect?.top    // 要素の上端位置
rect?.left   // 要素の左端位置
rect?.width  // 要素の幅
rect?.height // 要素の高さ

注意点

Reactの基本は状態管理と仮想DOMです。
そのため、useRefで直接DOMを操作するのは 例外的な用途に限定するのがおすすめです。
むやみに操作するとReactの再レンダリングの仕組みと衝突し、意図しない挙動になることがあります。

まとめ

useRef を使うと 実際のDOM要素 を参照できる
サイズ・位置・クラス・属性・イベントなど DOMの全情報を取得可能

Reactの基本はあくまで宣言的なUI操作ですが、「どうしても DOM に触りたいとき」こそ useRef の出番 です。