はじめに (対象読者・この記事でわかること)

この記事は、AngularでTypeScriptを使ってアプリケーション開発を進めている方、特にサービスとコンポーネント（以前のAngularJSにおけるコントローラーに相当）間の連携で「サービスを注入しても関数が呼び出せない」「DIエラーが出てしまう」といった課題に直面している方を主な対象としています。

この記事を読むことで、Angularにおけるサービス（Service）の基本的な役割と、依存性注入（Dependency Injection, DI）の仕組みを深く理解できます。また、具体的なコード例を通して、TypeScriptで作成したサービスをコンポーネントに正しく注入し、その内部の関数を確実に呼び出すための手順と、よくある「ハマりどころ」やその解決策を学ぶことができます。これにより、Angularアプリケーションの設計と実装において、よりクリーンで保守性の高いコードを書くための実践的な知識とスキルが身につくでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Angularの基本的なプロジェクト構造とコンポーネントの概念 - TypeScriptの基本的な文法（クラス、インターフェース、デコレータ、型など） - フロントエンド開発の基本的な知識

Angularにおけるサービスと依存性注入の基礎

Angularアプリケーションを開発する上で、サービスは非常に重要な役割を担います。コンポーネントはUIの表示とユーザーインタラクションの処理に専念し、データ取得、ビジネスロジック、アプリケーション全体で共有される状態管理といった共通の機能はサービスに切り出すのがベストプラクティスです。これにより、コンポーネントの責務が明確になり、コードの再利用性、テスト容易性、保守性が大幅に向上します。

なぜサービスが必要なのか？

例えば、Web APIからデータを取得する処理を考えてみましょう。この処理を複数のコンポーネントで行う場合、各コンポーネントに同じデータ取得ロジックを記述するのは非効率的で、コードの重複を招きます。サービスとしてデータ取得ロジックをカプセル化し、必要なコンポーネントからそのサービスを呼び出すことで、コードの重複を避け、一元的な管理が可能になります。

依存性注入（DI）とは？

Angularの最も強力な機能の一つが、この「依存性注入（Dependency Injection, DI）」です。DIとは、クラスが必要とする依存関係（サービスなど）を、そのクラス自身が生成するのではなく、外部（AngularのDIシステム）から提供されるようにする設計パターンです。これにより、コンポーネントは自身の依存関係を知る必要がなくなり、結合度が低減されます。

AngularのDIシステムは、以下の3つの主要な要素で構成されます。 1. Injector: 依存関係を解決して提供する役割を担います。 2. Provider: Injectorに「このクラスのインスタンスが必要な場合は、これを提供する」と指示する設定です。 3. Dependency: 注入される側のクラス（例：コンポーネント）が要求するインスタンス（例：サービス）です。

これらの仕組みを理解することで、サービスがコンポーネントにどのように「渡される」のかが明確になり、注入がうまくいかない原因の特定にも役立ちます。

TypeScriptサービスをコンポーネントに注入して呼び出す具体的な方法

「Angularでサービスをコンポーネント（コントローラー）に注入して関数を呼び出したいのですがうまくいきません」という問題は、AngularのDIの仕組みを正しく理解し、適用することで解決できます。ここでは、サービスを作成し、それをコンポーネントに注入して利用するまでの一連の手順と、よくある落とし穴について詳しく解説します。

[ステップ1] サービスの作成

まず、Angularサービスは、@Injectable()デコレータが付与されたTypeScriptのクラスです。このデコレータは、そのクラスがAngularのDIシステムによって注入可能であることを示します。

Typescript

// src/app/data.service.ts

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

@Injectable({
  providedIn: 'root' // <-- ここが非常に重要！
})
export class DataService {
  private dataStore: string[] = ['Item 1', 'Item 2', 'Item 3'];

  constructor() {
    console.log('DataServiceがインスタンス化されました');
  }

  /**
   * 全てのデータを取得する関数
   */
  getAllData(): string[] {
    console.log('DataService.getAllData()が呼び出されました');
    return this.dataStore;
  }

  /**
   * 新しいデータを追加する関数
   * @param newData 追加するデータ
   */
  addData(newData: string): void {
    this.dataStore.push(newData);
    console.log(`DataService: '${newData}'が追加されました`);
  }
}

ポイント: - @Injectable()デコレータ: このデコレータがないと、AngularのDIシステムはこのクラスをサービスとして認識できません。 - providedIn: 'root': これは最も推奨されるプロバイダ設定方法です。この設定により、サービスはアプリケーション全体のルートインジェクターによって提供され、アプリケーション全体で単一のインスタンスが共有されます（シングルトン）。これにより、AppModuleのproviders配列にサービスを追加する必要がなくなります。また、サービスがどこでも注入可能になります。

[ステップ2] コンポーネントへのサービスの注入

次に、作成したDataServiceをコンポーネントに注入し、その関数を呼び出します。コンポーネントでのサービス注入は、コンストラクタインジェクションという方法で行います。

Typescript

// src/app/my-component/my-component.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service'; // サービスのインポート

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  items: string[] = [];
  newItem: string = '';

  // コンストラクタでDataServiceを注入
  constructor(private dataService: DataService) {
    console.log('MyComponentがインスタンス化されました');
    // コンストラクタ内でもサービスは利用可能ですが、初期データ取得などはngOnInitが推奨されます。
  }

  ngOnInit(): void {
    // コンポーネントの初期化時にサービスからデータを取得
    this.items = this.dataService.getAllData();
    console.log('初期データ:', this.items);
  }

  addItem(): void {
    if (this.newItem.trim()) {
      this.dataService.addData(this.newItem.trim()); // サービス関数を呼び出し
      this.items = this.dataService.getAllData(); // 更新されたデータを再取得
      this.newItem = ''; // 入力フィールドをクリア
      console.log('データ追加後のアイテム:', this.items);
    }
  }
}

Html

<!-- src/app/my-component/my-component.component.html -->

<h2>データ表示コンポーネント</h2>

<div>
  <h3>現在のアイテム:</h3>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

<div>
  <input type="text" [(ngModel)]="newItem" placeholder="新しいアイテムを追加">
  <button (click)="addItem()">追加</button>
</div>

ポイント: - コンストラクタインジェクション: コンポーネントのコンストラクタの引数に、注入したいサービスの型（DataService）を指定します。 - アクセス修飾子: privateまたはpublicを付与することで、TypeScriptのシンタックスシュガーにより、自動的に同名のプロパティがコンポーネントに作成され、サービスインスタンスが割り当てられます。これにより、コンポーネントの他のメソッド内でthis.dataServiceとしてサービスにアクセスできるようになります。 - サービス関数の呼び出し: this.dataService.getAllData()やthis.dataService.addData()のように、通常のクラスメソッドと同じように呼び出せます。

[ハマった点やエラー解決]

サービスを注入しようとして「うまくいかない」場合、以下のような問題に遭遇している可能性が高いです。

エラー1: NullInjectorError: No provider for DataService!

このエラーは、AngularのDIシステムがDataServiceのインスタンスを提供する方法を知らない場合に発生します。 - 原因: 1. DataServiceの@Injectable()デコレータにprovidedIn: 'root'が設定されていない。 2. AppModuleまたはサービスの注入を試みているコンポーネントのproviders配列にDataServiceが追加されていない。

エラー2: TypeError: Cannot read properties of undefined (reading 'getAllData')

コンポーネント内でthis.dataServiceがundefinedになっている場合に発生します。 - 原因: 1. コンストラクタでprivate dataService: DataServiceのように正しく注入できていない。例えば、単にdataService: DataServiceとだけ書いている場合、これはクラスプロパティの宣言となり、DIは行われません。 2. TypeScriptのトランスパイル設定が古く、デコレータメタデータの出力が適切でない場合（稀ですが）。

エラー3: @Injectable()デコレータの付け忘れ

これはエラーメッセージとして明確に出ないこともありますが、サービスとして認識されず、DIの対象にならないため、結果的にNo provider系のエラーに繋がります。

解決策

上記のエラーを解決するための具体的なアプローチは以下の通りです。

  1. providedIn: 'root' の活用 (推奨) サービスをアプリケーション全体で利用する場合、@Injectable()デコレータに{ providedIn: 'root' }を設定するのが最もシンプルで推奨される方法です。 typescript @Injectable({ providedIn: 'root' // これを追加する！ }) export class DataService { /* ... */ } これにより、AppModuleのproviders配列にDataServiceを手動で追加する必要がなくなります。Angular CLIでサービスを生成する場合 (ng generate service data)、この設定はデフォルトで付与されます。

  2. モジュールレベルでのプロバイダ設定 もしprovidedIn: 'root'を使いたくない（特定のモジュール内でのみサービスを提供したいなど）場合は、サービスを使用するモジュールの@NgModuleデコレータのproviders配列にサービスを追加します。 ```typescript // src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MyComponent } from './my-component/my-component.component'; import { DataService } from './data.service'; // サービスをインポート import { FormsModule } from '@angular/forms'; // [(ngModel)]のために必要

    @NgModule({ declarations: [ AppComponent, MyComponent ], imports: [ BrowserModule, FormsModule // [(ngModel)]のために追加 ], providers: [ // DataService // providedIn: 'root' を使っている場合は不要 ], bootstrap: [AppComponent] }) export class AppModule { } `` **注意:**providedIn: 'root'とAppModuleのproviders配列の両方でサービスを提供すると、サービスのインスタンスが重複して生成される可能性があります（通常はprovidedIn`が優先されますが、意図しない挙動を防ぐため、どちらか一方に絞るのが安全です）。

  3. コンポーネントレベルでのプロバイダ設定 非常にまれなケースですが、特定のコンポーネントとその子コンポーネントのみでサービスインスタンスを共有したい場合、コンポーネントの@Componentデコレータのproviders配列にサービスを追加することもできます。この場合、そのコンポーネントの各インスタンスがサービス自身の新しいインスタンスを受け取ります。 ```typescript // src/app/my-component/my-component.component.ts import { Component } from '@angular/core'; import { DataService } from '../data.service';

    @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'], providers: [DataService] // このコンポーネントのみでサービスインスタンスを共有 }) export class MyComponent { constructor(private dataService: DataService) {} } `` これはprovidedIn: 'root'`を使用するよりも限定的なスコープとなるため、注意が必要です。

  4. コンストラクタインジェクションの記述確認 コンポーネントのコンストラクタで、サービスを正しいTypeScriptのシンタックスで注入しているか再確認してください。 ```typescript // 正しい記述 constructor(private dataService: DataService) { / ... / }

    // 間違った記述（プロパティ宣言となりDIされない） // dataService: DataService; // constructor() { / ... / } ```

これらの手順と解決策を適用することで、AngularのTypeScriptサービスをコンポーネントに正しく注入し、期待通りにその関数を呼び出せるようになるはずです。

まとめ

本記事では、Angularアプリケーションにおいて、TypeScriptで作成したサービスをコンポーネント（旧コントローラー）に適切に注入し、その内部の関数を呼び出す方法について解説しました。

  • Angularサービスは、データ取得やビジネスロジックなど、コンポーネントの責務を分離し、再利用性・保守性を高めるために不可欠です。
  • 依存性注入（DI）は、コンポーネントが自身の依存関係を生成するのではなく、外部から提供される強力な仕組みです。
  • @Injectable({ providedIn: 'root' }) を使用することで、サービスをアプリケーション全体で簡単に利用できるようになります。
  • コンストラクタインジェクション を用いて、コンポーネントにサービスを注入し、this.serviceName.functionName() の形式で関数を呼び出します。
  • No provider for XxxService! などのDIエラーは、サービスのプロバイダ設定（providedIn: 'root'やproviders配列）を見直すことで解決できます。

この記事を通して、Angularアプリケーションにおけるサービスの役割と依存性注入の概念、そして具体的な実装方法とトラブルシューティングの知識が得られたことと思います。これにより、より堅牢でスケーラブルなAngularアプリケーション開発を進める一助となれば幸いです。

今後は、サービスを用いた状態管理、HTTPクライアントを用いたWeb API連携、Angular Routerとの連携など、より発展的な内容についても記事にする予定です。

参考資料