🚀 7-1. クラスコンポーネントの具体例 → Composition API への変換例（ステップごと）

✅ 要点まとめ

• 実際に動くシンプルなカウンターアプリ をクラスコンポーネント → Composition API へ変換する
• 変換は以下のステップで行うとスムーズ：
  1. props の変換
  2. data → ref / reactive の変換
  3. computed の変換
  4. methods の変換
  5. ライフサイクルの変換
  6. $emit / $refs / watch の変換（必要に応じて）

🟥 【Before】クラスコンポーネントの例

<!-- ファイル名: Counter.vue (クラス版) -->
<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class Counter extends Vue {
  // props の定義
  @Prop({ default: 1 }) readonly step!: number;

  // data 相当
  count = 0;

  // computed 相当
  get doubleCount() {
    return this.count * 2;
  }

  // methods 相当
  increment() {
    this.count += this.step;
  }

  // ライフサイクル
  mounted() {
    console.log('mounted!');
  }
}
</script>

🟢 【After】Composition API 変換版（ + TypeScript）

<!-- ファイル名: Counter.vue -->
<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
// 1. props を defineProps で受け取る
const props = defineProps<{ step?: number }>();
const step = props.step ?? 1; // デフォルト値を設定

// 2. data を ref で定義
const count = ref(0);

// 3. computed で doubleCount を作成
const doubleCount = computed(() => count.value * 2);

// 4. methods 相当 → 関数定義
const increment = () => {
  count.value += step;
};

// 5. ライフサイクルフック
onMounted(() => {
  console.log('mounted!');
});
</script>

🟡 変換ポイントまとめ

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

クラスコンポーネントは「工場長（this）に全部任せてる工場」。

Composition API は「各作業員（関数や変数）が自分の仕事をしっかり分担する職場」。

→ 混乱が少なく、見通しがいい。

次は「7-2. 見落としがちな落とし穴チェックリスト」に進めますか？