everything-claude-code/docs/ja-JP/skills/angular-developer/references/di-fundamentals.md

依存性注入（DI）の基礎

依存性注入（DI）は、アプリケーションの異なる部分に機能を「注入」することで、コードを整理して共有するための設計パターンです。これにより、コードの保守性、スケーラビリティ、テスト容易性が向上します。

Angular における DI の仕組み

コードが Angular の DI システムと相互作用する主な方法が 2 つあります：

1. プロビジョン（提供）：値（オブジェクト、関数、プリミティブ）を DI システムで利用可能にする。
2. インジェクション（注入）：DI システムにそれらの値を要求する。

Angular のコンポーネント、ディレクティブ、サービスは自動的に DI に参加します。

サービス

サービスはアプリケーション全体でデータと機能を共有する最も一般的な方法です。@Injectable() でデコレートされた TypeScript クラスです。

サービスの作成

@Injectable デコレーターで providedIn: 'root' オプションを使用すると、アプリケーション全体で利用可能なシングルトンサービスになります。これはほとんどのサービスに推奨されるアプローチです。

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

@Injectable({
  providedIn: 'root', // どこでも利用可能なシングルトンにする
})
export class AnalyticsLogger {
  trackEvent(category: string, value: string) {
    console.log('Analytics event logged:', {category, value});
  }
}

サービスの一般的な用途：

• データクライアント（API 呼び出し）
• 状態管理
• 認証と認可
• ロギングとエラーハンドリング
• ユーティリティ関数

依存関係の注入

依存関係を要求するには Angular の inject() 関数を使用します。

inject() 関数

inject() 関数を使用してサービス（または提供された他のトークン）のインスタンスを取得できます。

import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';
import {AnalyticsLogger} from './analytics-logger.service';

@Component({
  selector: 'app-navbar',
  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
})
export class Navbar {
  // クラスフィールド初期化子を使用して依存関係を注入する
  private router = inject(Router);
  private analytics = inject(AnalyticsLogger);

  navigateToDetail(event: Event) {
    event.preventDefault();
    this.analytics.trackEvent('navigation', '/details');
    this.router.navigate(['/details']);
  }
}

inject() はどこで使用できるか？（インジェクションコンテキスト）

inject() はインジェクションコンテキスト内でコードが実行されている場合に呼び出せます。最も一般的なインジェクションコンテキストは、コンポーネント、ディレクティブ、またはサービスの構築時です。

inject() を呼び出せる有効な場所：

1. クラスフィールド初期化子（推奨）
2. コンストラクター本体
3. ルートガードとリゾルバー（インジェクションコンテキスト内で実行される）
4. プロバイダーで使用されるファクトリー関数

import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
import {HttpClient} from '@angular/common/http';

// 1. コンポーネント内（フィールド初期化子とコンストラクター）
@Component({
  /*...*/
})
export class Example {
  private service1 = inject(MyService); // 有効なフィールド初期化子

  private service2: MyService;
  constructor() {
    this.service2 = inject(MyService); // 有効なコンストラクター本体
  }
}

// 2. ディレクティブ内
@Directive({
  /*...*/
})
export class MyDirective {
  private element = inject(ElementRef); // 有効なフィールド初期化子
}

// 3. サービス内
@Injectable({providedIn: 'root'})
export class MyService {
  private http = inject(HttpClient); // 有効なフィールド初期化子
}

// 4. ルートガード（関数型）内
export const authGuard = () => {
  const auth = inject(AuthService); // 有効なルートガード
  return auth.isAuthenticated();
};