⚠️ 7-2. 見落としがちな落とし穴チェックリスト

✅ 要点まとめ

• クラス → Composition API 変換時にハマりやすいポイント をリストアップ
• ありがちな「変換ミス」「動かない原因」を事前にチェック
• エラーは怖くない。冷静に順番に確認する。

🟢 よくある落とし穴リスト ✅

① this を消し忘れる問題

• ❌ this.count と書いてしまう（Composition API では this は存在しない）
• ✅ 正しくは count.value

// 間違い
const increment = () => {
  this.count++; // ❌ this はない！
};

// 正解
const increment = () => {
  count.value++;
};

② ref の .value を忘れる

• ❌ count + 1 → 動かない
• ✅ count.value + 1 にする

const count = ref(0);

// 間違い
const doubleCount = computed(() => count * 2); // ❌

// 正解
const doubleCount = computed(() => count.value * 2); // ✅

③ defineProps() に型を書かない or デフォルト値が設定されてない

• ❌ props.step が undefined でバグる
• ✅ 型指定と ?? でデフォルトを明示