🎯 7.1 props / computed / methods の移行例

（Vue 2.7 クラスコンポーネント → Composition API 書き換え実例）

✅ 【要点】

• クラスコンポーネントでは @Prop や get, methods を使っていた

• Composition API では

  → defineProps()

  → computed()

  → setup() 内の関数定義

  に書き換える。

→ 型安全も強化できて、テストもしやすくなる。

🟢 【移行前（クラスコンポーネント）】

<!-- Greeting.vue -->
<template>
  <div>
    <p>Hello, {{ upperName }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

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

@Component
export default class Greeting extends Vue {
  @Prop({ default: 'Guest' }) readonly name!: string;

  get upperName(): string {
    return this.name.toUpperCase();
  }

  greet(): void {
    console.log(`Hello, ${this.name}!`);
  }
}
</script>

🟠 【移行後（Composition API）】

<!-- Greeting.vue -->
<template>
  <div>
    <p>Hello, {{ upperName }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { computed } from 'vue';

const props = defineProps<{ name?: string }>();
const name = props.name || 'Guest';

const upperName = computed(() => name.toUpperCase());

const greet = (): void => {
  console.log(`Hello, ${name}!`);
};
</script>

🟣 【書き換えポイントまとめ】

🟡 【テスト書き換え例】

🎯 クラス時のテスト

import { shallowMount } from '@vue/test-utils';
import Greeting from '@/components/Greeting.vue';

describe('Greeting.vue (クラス)', () => {
  it('upperName computed の確認', () => {
    const wrapper = shallowMount(Greeting, {
      propsData: { name: 'Vue' },
    });
    expect(wrapper.vm.upperName).toBe('VUE');
  });
});