🟣 3.1 クラスコンポーネントとは？ → @Component, @Prop, data, computed, methods

✅ 【要点】

• クラスコンポーネント = JavaScript / TypeScript の class を使って Vue コンポーネントを作る方法
• this を使って props, data, computed, methods にアクセスする設計
• デコレーター（@Component, @Prop など）で設定する
• → 設計図（class）をもとに Vue コンポーネントを組み立てるイメージ

🎯 Vue 2.7 では「オプションAPI」でも「Composition API」でも「クラスコンポーネント」でも書ける → そのうちの1つの書き方

📦 【最小のクラスコンポーネントの例】

<!-- HelloWorld.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  message: string = 'Hello Vue Class!';
}
</script>

🎯 @Prop → 親からデータを受け取る（props）

<template>
  <p>Hello, {{ name }}</p>
</template>

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

@Component
export default class HelloWorld extends Vue {
  @Prop({ default: 'Guest' }) name!: string;
}
</script>

⚙️ data → クラスプロパティで書く

message: string = 'Hello Vue Class!';