🔄 2-3. props, data, computed, methods の変換

✅ 要点まとめ

• クラスコンポーネント → @Prop, プロパティ宣言, get, メソッド
• Composition API (<script setup>) → defineProps(), ref, computed, 関数定義
• すべて this が消える → 変数名で直接扱う。

🟥 変換パターン（具体例）

【クラスコンポーネント】

// ファイル名: MyComponent.vue (クラス版)
@Component
export default class MyComponent extends Vue {
  // props
  @Prop({ default: 0 }) readonly start!: number;

  // data
  count = this.start;

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

  // methods
  increment() {
    this.count++;
  }
}

【Composition API (<script setup> 版)】

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

<script setup lang="ts">
// props の型を定義して受け取る
const props = defineProps<{ start: number }>();

// count を ref で作成、props.start で初期化
const count = ref(props.start);

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

// increment 関数を定義
const increment = () => {
  count.value++;
};
</script>

🟡 変換表（まとめ）

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

クラスコンポーネントは「家の中の部屋を探してものを取りに行く」感じ（this.xxx）。

Composition API は「机の引き出しを開けたらすぐそこにある」感じ（変数そのものが目の前にある）。

次の「3-1. mapState, mapGetters, mapActions, mapMutations の書き換え」に進めますか？