🟠 2.2 クラスと this のしくみ → Vue クラスコンポーネント理解の土台

✅ 【要点】

• Vue クラスコンポーネントは JavaScript のクラス (class) をベース にしている
• クラスの中では this で「そのクラスの持っているもの（変数・関数）」にアクセスする
• this の意味を間違えると動かない / バグになる
• → クラスコンポーネントを理解するには「this が何なのか？」が超大事！

🟢 【クラスとは？ → 「設計図」】

// クラス（設計図）
class User {
  name: string;

  constructor(name: string) {
    this.name = name; // ← このインスタンスの name
  }

  greet(): string {
    return `Hello, ${this.name}!`; // ← this はその人（インスタンス）
  }
}

// インスタンス（実物）を作る
const alice = new User('Alice');
console.log(alice.greet()); // "Hello, Alice!"

🟣 【this が指すもの】

class Car {
  color: string;

  constructor(color: string) {
    this.color = color;
  }

  showColor() {
    console.log(`Color is ${this.color}`);
  }
}

const redCar = new Car('red');
redCar.showColor(); // "Color is red"

🟢 this.color → 今作った redCar の color

→ 「誰のことを言っているか？」を決めるのが this

🟡 【Vue クラスコンポーネントと this】

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() name!: string; // ← props も this につく

  count: number = 0;      // ← data も this につく

  increment(): void {     // ← method も this で呼ぶ
    this.count += 1;
  }

  get upperName(): string {  // ← computed も this を使う
    return this.name.toUpperCase();
  }
}

🎯 とにかく全部 this に乗る設計。