🏚️ 3.6 クラス設計でありがちな課題 → this の肥大化とロジックの分散問題

✅ 【要点】

🟢 【具体例：よくある「肥大化したコンポーネント」】

@Component
export default class BigComponent extends Vue {
  @Prop() name!: string;

  count: number = 0;
  total: number = 0;
  loading: boolean = false;
  errorMessage: string = '';

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

  increment(): void {
    this.count += 1;
  }

  async fetchData(): Promise<void> {
    this.loading = true;
    try {
      const result = await fetch('/api/data');
      this.total = await result.json();
    } catch (e) {
      this.errorMessage = 'Failed to load';
    } finally {
      this.loading = false;
    }
  }

  reset(): void {
    this.count = 0;
    this.total = 0;
    this.errorMessage = '';
  }
}

⚠️ 「画面の動き」と「ビジネスロジック」と「API通信」と「エラーハンドリング」が1ファイルに詰め込まれている！

→ this が何でもかんでも持ってしまう → どこで何してるかわからない…

🛠️ 【this 肥大化の具体的な問題点】

問題 何が起きる？
this に全部の情報が乗る 変数名が衝突しやすい (this.count, this.total など)
似たようなメソッドがたくさんできる どれがどこで使われているか迷子になる
大きいファイルになる 読みにくい / 直しにくい / テストしにくい
ロジックの再利用が難しい 同じ処理をまた別のクラスにも書かないといけなくなる

🟣 【ロジックの分散問題 → 再利用できない】

increment() {
  this.count += 1;
}

// ほかのコンポーネントでも同じ処理が必要…

🚩 「increment ロジック」だけ再利用したいのに、this に依存しているから関数として切り出せない。

🟡 【本来やりたかったこと（理想）】