🏗️ 1-2. クラスコンポーネントと Composition API の思想と違い

✅ 要点まとめ

• クラスコンポーネント → 「OOP（オブジェクト指向）」に近い。this で全部つながる。
• Composition API → 「関数型プログラミング」に近い。setup() の中にロジックを関数ごとに分けて書く。
• 大きな違い → コードの再利用性、見通しの良さ、型推論の強さが変わる。
• this を使わないことでコードがスッキリする。

🏛️ 詳細な説明

🟦 クラスコンポーネントの考え方

• いわゆる OOP（オブジェクト指向プログラミング） っぽい。
• すべてが this でつながるので、どこからでもプロパティやメソッドにアクセスできる。
• でも、this の扱いを間違えるとバグが出やすい。
• デコレーター（@Prop, @Watch, @Emit など）を使ってスッキリ書けるけど、内部的には「クラスを拡張している」イメージ。

// クラスコンポーネントの例
@Component
export default class MyComponent extends Vue {
  @Prop() readonly title!: string;

  count = 0;

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

  mounted() {
    console.log(this.title);
  }
}

🟩 Composition API の考え方

• 関数型の考え方に近い。
• setup() 関数の中で必要なものを「関数ごと」にまとめて作る。
• this を使わず、すべて明示的に変数で渡す。
• 型推論が強い → ref, computed, watch が使いやすい。