サービスの作成と使用

サービスは、Angularアプリケーション全体で共有できる再利用可能なコードです。サービスは通常、複数のコンポーネントがアクセスする必要のあるデータ取得、ビジネスロジック、またはその他の機能を扱います。

サービスの作成

次のコマンドでAngular CLIを使用してサービスを作成できます。

ng generate service CUSTOM_NAME

これにより、srcディレクトリに専用のCUSTOM_NAME.tsファイルが作成されます。

TypeScriptクラスに@Injectable()デコレーターを追加して、手動でサービスを作成できます。これにより、そのサービスが依存性として注入可能であることがAngularに伝播します。

以下は、ユーザーがデータを追加したり要求したりできるサービスの例です。

// 📄 src/app/basic-data-store.ts
import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class BasicDataStore {
  private data: string[] = [];

  addData(item: string): void {
    this.data.push(item);
  }

  getData(): string[] {
    return [...this.data];
  }
}

サービスが利用可能になる仕組み

サービスで@Injectable({ providedIn: 'root' })を使用すると、Angularは次のことを行います:

アプリケーション全体で単一のインスタンス (シングルトン) を作成します
追加の設定なしでどこでも利用可能にします
ツリーシェイキングを有効にし、サービスが実際に使用される場合にのみJavaScriptバンドルに含まれるようにします

これは、ほとんどのサービスで推奨されるアプローチです。

サービスを注入する

providedIn: 'root'でサービスを作成すると、@angular/coreのinject()関数を使ってアプリケーションのどこにでも注入できます。

コンポーネントへの注入

import {Component, inject} from '@angular/core';
import {BasicDataStore} from './basic-data-store';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <p>{{ dataStore.getData() }}</p>
      <button (click)="dataStore.addData('More data')">Add more data</button>
    </div>
  `,
})
export class Example {
  dataStore = inject(BasicDataStore);
}

別のサービスへの注入

import {inject, Injectable} from '@angular/core';
import {AdvancedDataStore} from './advanced-data-store';

@Injectable({
  providedIn: 'root',
})
export class BasicDataStore {
  private advancedDataStore = inject(AdvancedDataStore);
  private data: string[] = [];

  addData(item: string): void {
    this.data.push(item);
  }

  getData(): string[] {
    return [...this.data, ...this.advancedDataStore.getData()];
  }
}

次のステップ

providedIn: 'root'はほとんどのユースケースをカバーしていますが、Angularは特殊なシナリオのためにサービスを提供するための追加の方法を提供しています:

コンポーネント固有のインスタンス - コンポーネントが独自の独立したサービスインスタンスを必要とする場合
手動設定 - 実行時の設定が必要なサービス向け
ファクトリープロバイダー - 実行時の条件に基づいて動的にサービスを作成するため
値プロバイダー - 設定オブジェクトや定数を提供するため

これらの高度なパターンについての詳細は、次のガイドで学ぶことができます: 依存性プロバイダーの定義.