🛠️ 7-3. パフォーマンスと保守性を意識した設計ポイント

✅ 要点まとめ

• パフォーマンスを上げつつ、保守しやすいコードにするための考え方
• Composition API でやりがちな「無駄な watch」「過剰な ref」を避ける
• ロジックを Composable（再利用可能な関数） に切り出す
• 型安全を保ちつつ「小さく分ける設計」を心がける
• いきなり最適化しすぎない → 「まず動く」「あとで整理」

🟢 ① ref と computed の使い分けを意識する

const count = ref(0);
const doubleCount = computed(() => count.value * 2); // ✅ 無駄な watch 不要

🟡 ② ロジックを Composable に分ける（再利用しやすい関数）

【コンポーネントに書きすぎるパターン】 ❌

const loading = ref(false);
const error = ref<string | null>(null);

const fetchData = async () => {
  loading.value = true;
  try {
    const response = await fetch('https://...');
    // 処理
  } catch (e) {
    error.value = '失敗';
  } finally {
    loading.value = false;
  }
};

【Composable に分離したパターン】 ✅

// ファイル名: useFetch.ts
import { ref } from 'vue';

export function useFetch(url: string) {
  const data = ref<any>(null);
  const loading = ref(false);
  const error = ref<string | null>(null);

  const fetchData = async () => {
    loading.value = true;
    error.value = null;
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (e) {
      error.value = '取得失敗';
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, fetchData };
}

// コンポーネント側
const { data, loading, error, fetchData } = useFetch('<https://api.example.com>');

🟣 ③ 過剰な watch を避ける → computed で代用できないか考える