🛡️ 8-2. undefined 参照問題の回避

✅ 要点まとめ

• Composition API にすると ref や props の型が undefined になる可能性が増える
• よくあるエラー：Cannot read property 'xxx' of undefined
• 回避の基本は 「型を正しく書く」「null チェック・デフォルト値を入れる」「オプショナルチェーン (?.) を使う」
• Vue の v-if も活用できる。

🟥 よくある undefined エラー例

const props = defineProps<{ userId?: number }>();

// ❌ userId が undefined の場合、API の URL が変になる
const url = `https://api.example.com/users/${props.userId}`;

🟢 回避パターン①: デフォルト値を入れる

const userId = props.userId ?? 1; // もし undefined なら 1 を使う
const url = `https://api.example.com/users/${userId}`;

🟡 回避パターン②: オプショナルチェーン (?.) の活用

const myInput = ref<HTMLInputElement | null>(null);

// ❌ myInput.value が null の可能性 → エラー
// myInput.value.focus(); // ❌

myInput.value?.focus(); // ✅ null なら何もしない

🟣 回避パターン③: v-if で DOM に存在しているか確認してから操作

<template>
  <!-- myInput がセットされてからボタンが表示される -->
  <input ref="myInput" />
  <button v-if="myInput" @click="focusInput">フォーカスする</button>
</template>

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

const myInput = ref<HTMLInputElement | null>(null);

const focusInput = () => {
  myInput.value?.focus();
};
</script>

🟤 回避パターン④: 型アサーション (!) を慎重に使う