15. サービスとDI — ロジックの置き場所

画面の表示に直接関係しないロジック(データの管理、計算、ログ出力など)は、サービスというクラスに切り出します。@Injectable({ providedIn: 'root' }) を付けて定義すると、Angularがインスタンスを1つだけ作り、必要とするコンポーネントに渡してくれます。この「必要な部品をフレームワークが渡してくれる」仕組みを依存性の注入(DI)と呼びます。

実務では、複数のコンポーネントで同じロジックを共有したいときにサービスが活躍します。providedIn: 'root' のサービスはアプリ全体で1つのインスタンスが共有されるため、コンポーネントをまたいだデータの置き場所としてもよく使われます。

DIのおかげで、テスト時には本物のサービスを偽物(モック)に差し替えられます。new CartService() と自分でインスタンス化せず、必ずDI経由で受け取るのが鉄則です。受け取り方は次のレッスンで学びます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Injectable } from '@angular/core';

// providedIn: 'root' でアプリ全体に1つだけ作られる
@Injectable({ providedIn: 'root' })
export class CartService {
  private items: string[] = [];

  add(item: string) {
    this.items.push(item);
  }

  count() {
    return this.items.length;
  }
}

// どのコンポーネントから add しても、同じ1つのカートに追加される

公式ドキュメントで詳しく ↗