Webアプリケーションを開発していると、時にはHTML要素を直接操作したい場合があります。たとえば、ボタンをクリックしたときに特定の入力フィールドにフォーカスを当てたり、画面の特定の部分のサイズを取得したりといった操作です。



Vue.jsでは、HTMLの要素に直接アクセスする手段を提供しています。それが「テンプレート参照」（Template Refs）と呼ばれる機能です。この記事では、Vue.jsのテンプレート参照の基本から実際の使い方まで、初心者にもわかりやすく解説します。

## 基本的な使い方

Vue.jsでテンプレート参照を使うための基本的な手順は次の通りです：

1. 参照したい要素に`ref`属性を追加する
2. JavaScript側で同名の`ref`変数を作成する
3. コンポーネントのマウント後に参照を使用する

シンプルな例を見てみましょう：

```html
<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 1. HTMLの要素を参照するためのref変数を作成
const inputElement = ref<HTMLInputElement | null>(null);

// マウント後に実行される処理
onMounted(() => {
  // この時点でinputElementは実際のHTML要素を参照している
  console.log('入力フィールドの要素:', inputElement.value);

  // 自動的にフォーカスを当てる
  inputElement.value?.focus();
});

// ボタンクリック時に入力フィールドにフォーカスを当てる関数
function focusInput() {
  inputElement.value?.focus();
}
</script>

<template>
  <div>
    
    <input ref="inputElement" placeholder="この入力フィールドにフォーカスします" />
    <button @click="focusInput">フォーカスを当てる</button>
  </div>
</template>  
```

この例では、入力フィールドに`ref="inputElement"`を設定し、JavaScript側で`const inputElement = ref(null)`として参照を作成しています。コンポーネントがマウントされると、`inputElement.value`には実際のHTML要素（この場合は`<input>`要素）が代入されます。そして、ボタンをクリックすると`focusInput`関数が呼び出され、入力フィールドにフォーカスが当たります。

## テンプレート参照の仕組み

Vue.jsがどのようにテンプレート参照を処理しているかを理解することは重要です。以下のポイントに注意しましょう：

### 1. 参照はマウント後に使用可能

テンプレート参照は、コンポーネントが実際にDOMにマウント（表示）された後でないと使用できません。これは、マウント前の段階ではHTML要素がまだ作成されていないためです。そのため、`ref`変数の値を使用するときは、通常`onMounted`フック内か、ユーザーのアクション（クリックなど）に応じた処理の中で行います：

```html
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const titleElement = ref<HTMLHeadingElement | null>(null);

// ❌ この時点ではまだ要素が作成されていないのでundefined
console.log(titleElement.value);

onMounted(() => {
  // ✅ マウント後なので要素にアクセスできる
  console.log(titleElement.value);
  console.log('タイトルのテキスト内容:', titleElement.value?.textContent);
});
</script>

<template>
  <h1 ref="titleElement">こんにちは、Vue.js!</h1>
</template>
 
```

### 2. v-ifと併用する場合の注意点

`v-if`ディレクティブで条件付きでレンダリングされる要素に`ref`を使う場合、その要素が表示されていないときは`ref`の値が`null`になります：

```html
<script setup lang="ts">
import { ref } from 'vue';

const isVisible = ref(false);
const conditionalElement = ref<HTMLDivElement | null>(null);

function toggleVisibility() {
  isVisible.value = !isVisible.value;

  // 要素の表示/非表示が切り替わった直後はまだDOM更新前なので注意
  console.log('現在の参照:', conditionalElement.value); // 正確な値を得られない可能性がある

  // DOM更新後の状態を確認する場合はnextTickを使用
  setTimeout(() => {
    console.log('更新後の参照:', conditionalElement.value); // 正確な値
  }, 0);
}
</script>

<template>
  <div>
    <button @click="toggleVisibility">表示/非表示</button>

    <div v-if="isVisible" ref="conditionalElement">
      条件付きで表示される要素
    </div>
  </div>
</template>  
```

この例では、ボタンをクリックして`isVisible`の値を切り替えると、`conditionalElement`の値も`null`（非表示時）と実際の要素（表示時）の間で切り替わります。

### 3. TypeScriptでの型指定

TypeScriptを使用している場合、`ref`変数に適切な型を指定することで、コード補完や型チェックの恩恵を受けられます：

```html
<script setup lang="ts">
import { ref } from 'vue';

// HTMLInputElement型またはnullとして宣言
const emailInput = ref<HTMLInputElement | null>(null);

function validateEmail() {
  if (emailInput.value) {
    // TypeScriptが.valueのプロパティとメソッドを認識できる
    const email = emailInput.value.value; // 入力値を取得
    const isValid = email.includes('@');

    if (!isValid) {
      emailInput.value.setCustomValidity('有効なメールアドレスを入力してください');
      emailInput.value.reportValidity();
    } else {
      emailInput.value.setCustomValidity('');
    }
  }
}
</script>

<template>
  <div>
    <input
      ref="emailInput"
      type="email"
      placeholder="メールアドレスを入力"
    />
    <button @click="validateEmail">検証</button>
  </div>
</template>  
```

この例では、`emailInput`を`HTMLInputElement | null`型として宣言しています。これにより、`emailInput.value`を使用するときに、入力要素の持つプロパティやメソッド（`value`、`focus()`、`setCustomValidity()`など）が適切に補完されます。

## 子コンポーネントへの参照

テンプレート参照は、HTML要素だけでなく子コンポーネントにも使えます。これにより、親コンポーネントから子コンポーネントのプロパティやメソッドにアクセスできるようになります。

```html
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 子コンポーネントへの参照
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);

function callChildMethod() {
  // 子コンポーネントのメソッドを呼び出す
  childRef.value?.doSomething();

  // 子コンポーネントのプロパティにアクセス
  console.log('子コンポーネントの状態:', childRef.value?.someData);
}
</script>

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">子コンポーネントのメソッドを呼び出す</button>
  </div>
</template>  
```

子コンポーネント側では、外部から呼び出したいメソッドや参照したいプロパティを公開（expose）する必要があります：

```html

<script setup lang="ts">
import { ref } from 'vue';

const someData = ref('子コンポーネントのデータ');

function doSomething() {
  console.log('子コンポーネントのメソッドが呼び出されました');
  // 処理内容
}

// 親コンポーネントに公開するプロパティとメソッド
defineExpose({
  someData,
  doSomething
});
</script>

<template>
  <div>子コンポーネント</div>
</template>  
```

注意点として、`<script setup>`を使用している場合、デフォルトではすべての変数やメソッドはプライベートになります。親コンポーネントからアクセスするためには、明示的に`defineExpose`を使って公開する必要があります。

## v-forとの併用

`v-for`で複数の要素をレンダリングする場合、それぞれに`ref`を設定したい場合があります。この場合、配列を使って参照を管理できます：

```html
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const items = ref(['項目1', '項目2', '項目3']);
// 配列の参照を保持する
const itemRefs = ref<HTMLElement[]>([]);

onMounted(() => {
  // すべての項目要素にアクセス
  console.log('すべての項目:', itemRefs.value);

  // 各項目のテキスト内容を取得
  itemRefs.value.forEach((el) => {
    console.log('項目のテキスト:', el.textContent);
  });
});
</script>

<template>
  <ul>
    <li
      v-for="(item, index) in items"
      :key="index"
      :ref="(el) => { if (el) itemRefs[index] = el as HTMLElement }"
    >
      {{ item }}
    </li>
  </ul>
</template>  
```

この例では、関数形式の`:ref`を使って、各リスト項目の要素を`itemRefs`配列に格納しています。これにより、生成されたすべての要素に個別にアクセスできます。

## まとめ

フォーム要素の操作や外部ライブラリとの連携など、テンプレート参照はVue.jsアプリケーションの可能性を広げてくれる重要なツールです。これらの基本を理解し、適切に使うことで、より柔軟で機能的なUIを構築できるようになります。

## 次のステップに進みませんか？

基礎を理解したところで「次は何を学べばいいのだろう？」「実際のプロジェクトではどう活用するの？」と感じていませんか？

Vue.jsの基礎を学んでも、実際の開発現場で使いこなせなければ意味がありません。基礎だけではなく、コンポーネント設計、状態管理、ルーティングなど、実践的なスキルを身につけることが重要です。

**[Vue.js実践マスター講座：基礎から本格SPAアプリケーション開発まで](https://tech-education-nav.com/videos/67ae89a5774715d50252e9df)**

この動画講座では、Vue.jsの全機能を体系的に学べます。合計7時間以上にわたる包括的な内容で、基礎だけでなく「認証付き記事管理システム」という実際のアプリケーションを一から開発していきます。

**＜期間限定特典＞**

講座を作成したエンジニアとの1時間マンツーマン相談会付き！分からなかった部分の質問はもちろん、キャリアやお仕事の相談もOK。学んだ内容を確実に自分のものにするチャンスです。

この機会にVue.jsの可能性を最大限に引き出すスキルを身につけましょう。

[詳細を見る・購入する](https://tech-education-nav.com/videos/67ae89a5774715d50252e9df)

テンプレート参照

Vue.jsでは、HTMLの要素に直接アクセスする手段を提供しています。それが「テンプレート参照」（Template Refs）と呼ばれる機能です。この記事では、Vue.jsのテンプレート参照の基本から実際の使い方まで、初心者にもわかりやすく解説します。

Vue.jsのテンプレート参照：HTML要素に直接アクセスする方法

動画チュートリアルのこだわりと、なぜ私の講座が有益なものを提供できるか。その理由を書きました。

最新のNuxt.js講座をリリースしました！初心者から経験者まで、現場で即活用できる実践ノウハウを動画で学べます。

Vue.jsの動画チュートリアルを公開しました！Vue.js の基礎だけでなく、実践的な使い方を学びたい方は、是非チェックしてみてください。