ref テンプレート参照
最終更新：2026-10-22
ref テンプレート参照
ref 属性は要素やコンポーネントに参照名を付け、スクリプトから $refs や ref() / useTemplateRef() でアクセスできるようにします。
| グループ | ビルトイン |
|---|---|
| 種類 | 特殊属性 |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<input ref="inp">
<child-comp ref="child"></child-comp>⚙️ 引数
| props | 文字列の名前（Composition API では同名の変数が自動収集）。v-for 内では配列になります |
|---|
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The input is focused after mount.💡 ポイント
ℹ️ 補足 Composition API では、const inp = ref(null) を宣言してテンプレートに ref="inp" と書くと自動収集されます（3.5 からは useTemplateRef が推奨）。
⚠️ 注意 マウント前は null です。アクセス前に null チェックするか、onMounted 以降で使ってください。
💡 ヒント データとイベント駆動を優先し、ref による直接の DOM 操作は必要なときだけにします（フォーカス、計測、サードパーティライブラリのマウント）。
🏷️ 関連ビルトイン
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ref はリアクティブの ref() と衝突しませんか？
A 衝突しません。テンプレートの ref はマーカーで、ref() はリアクティブ API です。Composition API では同名にすると自動で紐づきます。
Q 複数の要素を参照できますか？
A v-for 内の ref は配列として収集されます（順序は保証されません）。
Q 使うべきでないのはどんなときですか？
A 状態とイベントで表現できるロジックなら ref を使わず、データ駆動のままで書いてください。
