🟠 3.2 this に集約する設計と、そのメリット・デメリット

🟠 3.2 `this` に集約する設計と、そのメリット・デメリット

✅ 【要点】

Vue クラスコンポーネントでは

→ props, data, computed, methods, $store, $emit… すべてが this に集約されている
だから this.name, this.count, this.increment() のように全部同じ書き方でアクセスできる
楽な反面、大規模になると「何がどこから来たの？」がわかりにくくなる
→ 「安全・見やすい」と「肥大化・ごちゃごちゃ」の両面がある設計

🟢 【クラスコンポーネントの `this` に集約されるもの】

@Component
export default class Example extends Vue {
  @Prop() name!: string;         // ← props → this.name
  count: number = 0;             // ← data → this.count

  get upperName(): string {      // ← computed → this.upperName
    return this.name.toUpperCase();
  }

  increment(): void {            // ← methods → this.increment()
    this.count += 1;
  }
}

機能	書き方	どうアクセスする？
props	`@Prop() name!: string`	`this.name`
data	`count: number = 0`	`this.count`
computed	`get upperName() { ... }`	`this.upperName`
methods	`increment() { ... }`	`this.increment()`
Vue 機能	`$store`, `$router`, `$emit`	`this.$store.dispatch()` など

📌 【`this` に集約する設計のメリット】

メリット	なぜ良い？
アクセスが一貫している	すべて `this.xxx` でアクセスできる
記述がシンプル	書き方を覚えるのが簡単
クラス設計に慣れている人には馴染みがある	Java / C# などの OOP 文化と近い
TypeScript との連携も可能	`name!: string` で型付けできる

🟤 【`this` に集約する設計のデメリット】

デメリット	なぜ問題？
何がどこから来たのかわかりにくい	`this.name` が props なのか data なのか一見わからない
大規模になると `this` が肥大化する	似た名前が増えて衝突しやすい、読みづらい
ロジックの再利用がしにくい	`this` に依存していると composable にできない
`this` のスコープを間違えやすい	関数を渡す時に `this` がズレてエラーになる（`bind` 必要）

❌ 【例：`this` でどこから来たかわかりにくいコード】

console.log(this.name);  // ← props か data かわからない

console.log(this.count); // ← これも data なのか computed なのか？

🟠 3.2 this に集約する設計と、そのメリット・デメリット

✅ 【要点】

🟢 【クラスコンポーネントの this に集約されるもの】

📌 【this に集約する設計のメリット】

🟤 【this に集約する設計のデメリット】

❌ 【例：this でどこから来たかわかりにくいコード】

🟠 3.2 `this` に集約する設計と、そのメリット・デメリット

🟢 【クラスコンポーネントの `this` に集約されるもの】

📌 【`this` に集約する設計のメリット】

🟤 【`this` に集約する設計のデメリット】

❌ 【例：`this` でどこから来たかわかりにくいコード】