TypeScriptでrefを型定義する方法（useRef）を完全解説！初心者でもわかるReactの基本
生徒
「Reactでrefってよく聞きますけど、TypeScriptを使うときは型をどうやって書くんですか？」
先生
「refはコンポーネント内で直接DOM要素や値にアクセスするために使います。TypeScriptでは型をしっかり付けて使うと安全ですよ。」
生徒
「DOM要素って何ですか？」
先生
「DOM要素とは、HTMLのタグそのものです。例えば<input>や<div>のことを指します。」
生徒
「なるほど！じゃあTypeScriptでrefを型安全に書く方法を知りたいです！」
先生
「それでは具体的にコードを使って解説していきましょう。」
1. useRefの基本的な使い方
useRefは、Reactで「参照」を保持するために使うフックです。参照とは、特定の要素や値を記憶しておく箱のようなものです。useRefでよく使うのが、フォームの入力欄（inputタグ）にアクセスするときです。
import React, { useRef } from "react";
const InputFocus: React.FC = () => {
const inputRef = useRef<HTMLInputElement>(null);
const handleClick = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>フォーカスを当てる</button>
</div>
);
};
export default InputFocus;
この例ではuseRef<HTMLInputElement>(null)と書いて、refの型を「HTMLのinput要素」と定義しています。これにより、TypeScriptがinputRef.currentを使うときに正しく補完してくれるようになります。
2. 数値や文字列の値を保持する場合
useRefはDOM要素だけでなく、単純な値を保持することもできます。例えば数値や文字列を保存しておきたいときに便利です。
import React, { useRef } from "react";
const Counter: React.FC = () => {
const countRef = useRef<number>(0);
const handleIncrement = () => {
countRef.current += 1;
console.log("現在の値:", countRef.current);
};
return (
<div>
<button onClick={handleIncrement}>カウントアップ</button>
</div>
);
};
export default Counter;
ここではuseRef<number>(0)と書くことで、数値専用の箱を作っています。これにより、誤って文字列を代入しようとするとTypeScriptがエラーを出してくれるので安心です。
3. 型を省略するとどうなる？
もしuseRef(null)とだけ書くと、型はMutableRefObject<undefined>として推論されてしまい、実際のDOM操作ではエラーになる可能性があります。そのため、基本的には必ず型を明示して書くことをおすすめします。
const inputRef = useRef<HTMLInputElement | null>(null);
このように「| null」を付けることで、「まだ要素が存在しないかもしれない」という可能性も正しく表現できます。
4. refを使うときの注意点
初心者がよく間違えるポイントを整理しておきましょう。
- useRefは直接画面に表示されるものではなく、裏で参照を保持するためのもの
- DOM要素に使うときは必ず適切な型（例：
HTMLDivElement、HTMLInputElement）を指定する - 数値や文字列を保持するときはその型（例：
number、string）を指定する - refを使わずに済む場合はstateを優先するのが基本
例えば、「フォームの入力内容を取得して表示したい」というときはstateを使いますが、「ボタンを押したら入力欄にフォーカスを当てたい」というときはrefを使うのが適切です。
5. よく使うDOM要素と型の一覧
最後に、ReactとTypeScriptでrefを使うときによく登場するDOM要素と型の対応表を載せておきます。
<input>→HTMLInputElement<textarea>→HTMLTextAreaElement<button>→HTMLButtonElement<div>→HTMLDivElement<form>→HTMLFormElement
これらを覚えておくと、refの型を付けるときにすぐに書けるようになります。
