🔄 6-2. Composition API での非同期ハンドリングパターン

✅ 要点まとめ

• 非同期処理（API 呼び出し、データ取得）も setup() / <script setup> の中で普通に書ける
• 状態（loading, error, data）は ref で管理する
• 使うもの：async/await + try...catch + onMounted（または watch）
• 必要なら watch でリアクティブ変数の変化に応じて再取得もできる
• 非同期関数は async を忘れない！

🟢 基本パターン（API 通信の例）

<!-- ファイル名: ApiExample.vue -->
<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>Message: {{ message }}</p>
  </div>
</template>

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

// 状態を ref で管理
const message = ref<string>('');
const loading = ref(true);
const error = ref<string | null>(null);

// 非同期関数を定義
const fetchData = async () => {
  loading.value = true;
  error.value = null;
  try {
    const response = await fetch('<https://api.example.com/data>');
    if (!response.ok) throw new Error('データ取得失敗');
    const data = await response.json();
    message.value = data.message;
  } catch (err: unknown) {
    // 型が unknown なので型ガードを書く
    if (err instanceof Error) {
      error.value = err.message;
    } else {
      error.value = '不明なエラー';
    }
  } finally {
    loading.value = false;
  }
};

// マウント時に呼び出し
onMounted(() => {
  fetchData();
});
</script>

🟡 変数変化で再取得したいとき（watch を使う）

<!-- ファイル名: WatchApiExample.vue -->
<template>
  <input v-model="userId" placeholder="User ID" />
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">{{ error }}</p>
  <p v-else>Username: {{ username }}</p>
</template>

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

const userId = ref('1');
const username = ref<string>('');
const loading = ref(false);
const error = ref<string | null>(null);

const fetchUser = async (id: string) => {
  loading.value = true;
  error.value = null;
  try {
    const response = await fetch(`https://api.example.com/users/${id}`);
    if (!response.ok) throw new Error('ユーザー取得失敗');
    const data = await response.json();
    username.value = data.username;
  } catch (err: unknown) {
    if (err instanceof Error) {
      error.value = err.message;
    } else {
      error.value = '不明なエラー';
    }
  } finally {
    loading.value = false;
  }
};

// userId が変わるたびに再取得
watch(userId, (newId) => {
  fetchUser(newId);
}, { immediate: true });
</script>

🟢 パターン別まとめ

🎯 イメージしやすい例え（t）

onMounted → 「家に帰ったらすぐごはんを作る」。

watch → 「お腹が空いたら（条件が変わったら）ごはんを作る」。

watchEffect → 「冷蔵庫の中身が減ったら自動で買い足す」。