📌 5-1. $refs の扱い

✅ 要点まとめ

• クラスコンポーネント：this.$refs.xxx で要素や子コンポーネントにアクセス。
• Composition API：ref() と template の ref="xxx" を組み合わせて使う。
• 型を使って HTMLElement や子コンポーネントの型指定 もできる（TypeScript の場合）。
• this がないので、すべて変数で明示的に持つ。

🟥 変換パターン（具体例）

【クラスコンポーネントの $refs 使用例】

// ファイル名: MyComponent.vue (クラス版)
@Component
export default class MyComponent extends Vue {
  mounted() {
    // this.$refs.myInput は HTMLInputElement
    (this.$refs.myInput as HTMLInputElement).focus();
  }
}

<!-- template 部分 -->
<template>
  <input ref="myInput" />
</template>

【Composition API (<script setup> 版)】

<!-- ファイル名: MyComponent.vue -->
<template>
  <!-- ref に "myInput" を設定 -->
  <input ref="myInput" />
</template>

<script setup lang="ts">
// ref と onMounted をインポート
import { ref, onMounted } from 'vue';

// HTMLInputElement 型の ref を作成
const myInput = ref<HTMLInputElement | null>(null);

// mounted 時に focus
onMounted(() => {
  myInput.value?.focus();
});
</script>

🟡 変換表（まとめ）

🟢 複数の $refs がある場合

<!-- ファイル名: MultiRef.vue -->
<template>
  <div>
    <input ref="input1" />
    <input ref="input2" />
  </div>
</template>

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

const input1 = ref<HTMLInputElement | null>(null);
const input2 = ref<HTMLInputElement | null>(null);

onMounted(() => {
  input1.value?.focus();
  // 何か処理を追加
});
</script>