dreaife的休憩小栈

ファイル生成#

Angular CLI はさまざまなファイルを生成するためのショートカットコマンドを提供し、プロジェクト構造の一貫性を保ちます。よく使われる生成コマンドには次のものが含まれます：

• コンポーネントを生成：

  1
  ng generate component component-name
  2
  # 或者简写
  3
  ng g c component-name

  これは、HTML、CSS、TypeScript、テストファイルを含むコンポーネントを作成します。

• サービスを生成：

  1
  ng generate service service-name
  2
  # 简写
  3
  ng g s service-name

  生成されるサービスファイルにはデフォルトでインジェクターが含まれ、コンポーネントから簡単に使用できます。

• モジュールを生成：

  1
  ng generate module module-name
  2
  # 简写
  3
  ng g m module-name

  生成されるモジュールは、機能モジュールごとにコードのロジックを分割し、コードの管理と遅延ロードを容易にします。

ビルドプロジェクト#

ビルドには ng build コマンドを使用します：

1
ng build

ビルド後のファイルは dist ディレクトリに格納されます。本番環境へ公開するには、以下のコマンドを使用します：

1
ng build --prod

• -prod オプションは、本番環境の最適化（コード圧縮、難読化、デバッグ情報の削除など）を有効にします。

テスト#

Angular CLI はユニットテストとE2Eテストをサポートします：

• ユニットテスト：ng test コマンドを使用してユニットテストを実行します。デフォルトは Karma と Jasmine を使用します。

  1
  ng test

  これによりブラウザでテストUIが開き、テスト結果がリアルタイムで更新されます。

• エンドツーエンド テスト：ng e2e コマンドを使用してエンドツーエンドテストを実行します。デフォルトは Protractor。

  1
  ng e2e

  エンドツーエンドテストはユーザーの動作を模倣し、アプリ全体の機能が正常に動作することを確認します。

生成サービス、パイプ、ディレクティブなど他の構造を生成#

コンポーネントとモジュール以外にも、CLI は他の Angular 構造の生成をサポートしています：

• ディレクティブを生成：

  1
  ng generate directive directive-name
  2
  # 简写
  3
  ng g d directive-name

• パイプを生成：

  1
  ng generate pipe pipe-name
  2
  # 简写
  3
  ng g p pipe-name

設定と最適化#

• 環境設定

Angular は環境ごとの設定ファイルをサポートしており、デフォルトでは environment.ts（開発環境）と environment.prod.ts（本番環境）が含まれます。angular.json ファイルでさらに環境設定を定義し、ビルド時に異なる環境を選択できます：

1
ng build --configuration production

• デバッグと監視

ng serve を使用すると、Angular CLI がファイルの変更をリアルタイムで監視し、アプリケーションを自動的に再ビルドします。--source-map オプションを使用してデバッグ情報を生成し、ブラウザでコードをデバッグできます：

1
ng serve --source-map

• プリロードと遅延ロード（Lazy Loading）モジュール

大規模なアプリケーションでは、プリロードと遅延ロードモジュールを使用するとパフォーマンスが向上します。Angular CLI は自動的に遅延ロードをサポートし、必要に応じてモジュールを読み込むのを手伝い、初回ロード時間を短縮します。

その他の有用な CLI コマンド#

• Angular プロジェクトや依存関係の更新：

  1
  ng update

  このコマンドは Angular および関連依存関係をチェックして更新します。

• ビルドパッケージの分析：-stats-json オプションを使ってアプリをビルドすると、分析ファイルが生成され、パッケージ内容の確認と最適化に役立ちます。

  1
  ng build --prod --stats-json

• サードパーティライブラリやツールの追加： ng add コマンドを使用してサードパーティライブラリやプラグインを迅速に追加できます。例として、Angular Material を追加：

  1
  ng add @angular/material

angular.json 配置ファイル#

angular.json は Angular プロジェクトのグローバル設定ファイルで、プロジェクトの全ての設定情報を含みます。ここでビルド出力パス、環境設定、スタイルやスクリプトの読み込み順序などを調整できます。

プロジェクトのディレクトリ構造#

ng new で新しい Angular プロジェクトを作成すると、プロジェクト構造は次のようになります：

1
my-angular-app/
2
├── e2e/                    # エンドツーエンド テストディレクトリ
3
├── node_modules/           # プロジェクト依存パッケージディレクトリ
4
├── src/                    # アプリケーションのソースコードディレクトリ
5
│   ├── app/                # コアアプリディレクトリ
6
│   │   ├── app.component.ts # ルートコンポーネントのロジックファイル
7
│   │   ├── app.component.html # ルートコンポーネントのテンプレートファイル
8
│   │   ├── app.component.css # ルートコンポーネントのスタイルファイル
9
│   │   └── app.module.ts   # ルートモジュールファイル
10
│   ├── assets/             # 静的リソースディレクトリ
11
│   ├── environments/       # 環境設定ディレクトリ
12
│   ├── index.html          # 主 HTML ファイル
13
│   ├── main.ts             # アプリの主エントリファイル
14
│   ├── polyfills.ts        # ブラウザ互換コード
15
│   ├── styles.css          # グローバルスタイルファイル
16
│   └── test.ts             # ユニットテスト用エントリファイル
17
├── angular.json            # Angular プロジェクト設定ファイル
18
├── package.json            # プロジェクト依存とスクリプト
19
├── tsconfig.json           # TypeScript の設定ファイル
20
└── README.md               # プロジェクトの説明ファイル

目录とファイルの詳細#

1. src/ ディレクトリ

   src/ はアプリケーションのソースコードを格納する主要ディレクトリで、Angular アプリのすべてのコアコードがここにあります。

   • app/ ディレクトリ：これはアプリケーションの主要ディレクトリで、ルートモジュールとルートコンポーネントを含みます。プロジェクトの開発が進むにつれて、ここにさらにコンポーネント、サービス、モジュールなどを作成します。
     • app.component.ts：コンポーネントのロジックファイルで、コンポーネントクラスとデコレーターを含みます。
     • app.component.html：ルートコンポーネントのテンプレートファイル。
     • app.component.css：ルートコンポーネントのスタイルファイル。
     • app.module.ts：ルートモジュールファイル、アプリ起動時にロードされるモジュール。各 Angular アプリには少なくとも1つのルートモジュールがあります。
   • assets/ ディレクトリ：静的リソース（画像、フォントなど）を格納します。ビルド時にビルドディレクトリに直接コピーされ、相対パスでアクセスできます。
   • environments/ ディレクトリ：異なる環境の設定ファイルを含みます。例として開発環境と本番環境があります。デフォルトでは environment.ts（開発環境の設定）と environment.prod.ts（本番環境の設定）が含まれます。環境条件に応じて異なる設定を読み込むことができます。
   • index.html：アプリのメインHTMLファイル。ページの入口で、Angular はすべてのコンポーネントをこのページ内にレンダリングします。
   • main.ts：アプリのメインエントリーファイル。Angular アプリはここから実行を開始します。main.ts はルートモジュール AppModule をブーツストラップし、Angular アプリを起動します。
   • polyfills.ts：異なるブラウザの互換性コードを読み込み、すべてのブラウザでアプリが一貫して動作するようにします。
   • styles.css：グローバルスタイルファイルで、アプリ全体の共通スタイルをここで定義できます。
   • test.ts：テストのエントリーファイルで、ユニットテストの設定と初期化に使用されます。

2. e2e/ ディレクトリ

   e2e/ ディレクトリにはエンドツーエンドテストのコードを格納します。デフォルトでは Protractor フレームワークを使用してこれらのテストを実行し、ユーザーの動作を模倣してアプリ全体の機能をテストします。

3. 根ディレクトリの他のファイル

   • angular.json：Angular プロジェクトの設定ファイルで、ビルドと開発サーバーに関する設定を含みます。ここでビルド出力パス、環境設定、スタイルやスクリプトの読み込み順序などを調整できます。
   • package.json：Node.js プロジェクトの設定ファイルで、依存関係と実行スクリプトを含みます。すべての依存ライブラリと CLI コマンドはここで定義・管理されます。
   • tsconfig.json：TypeScript の設定ファイルで、TypeScript コードのコンパイル規則を定義します。
   • README.md：プロジェクトの説明ファイル。プロジェクトの概要、インストール手順、使用方法などを記載できます。

4. node_modules/ ディレクトリ

   node_modules/ ディレクトリには、npm によってインストールされたプロジェクトの依存パッケージが格納されます。Angular、TypeScript、コンパイラなどのライブラリのコードはすべてここにあります。

コンポーネント（Component）#

コンポーネントは Angular アプリの基本的な構成要素です。1つのコンポーネントは通常、3つの部分から成り立っています：

• テンプレート（Template）：コンポーネントの HTML 構造を定義します。
• スタイル（Styles）：コンポーネントの CSS スタイルを定義します。
• ロジック（Class）：コンポーネントの挙動とデータを定義します。

1. コンポーネントの作成

   Angular CLI はコンポーネントを生成するコマンドを提供します：

   1
   ng generate component component-name
   2
   # 或者简写
   3
   ng g c component-name

   このコマンドは app ディレクトリの下に新しいコンポーネントディレクトリを作成し、以下のファイルを含みます。

   • component-name.component.ts：コンポーネントのロジックファイル、コンポーネントクラスとデコレーターを含みます。
   • component-name.component.html：コンポーネントのテンプレートファイル。
   • component-name.component.css：コンポーネントのスタイルファイル。
   • component-name.component.spec.ts：コンポーネントのテストファイル。

2. コンポーネントの構造

   component-name.component.ts ファイル内で、コンポーネントは @Component デコレーターを使用して定義され、構造は以下のとおりです：

   1
   import { Component } from '@angular/core';
   2
   
   3
   @Component({
   4
     selector: 'app-component-name',      // コンポーネントのセレクター。テンプレートでの参照に使用
   5
     templateUrl: './component-name.component.html',  // コンポーネントのテンプレートファイル
   6
     styleUrls: ['./component-name.component.css']    // コンポーネントのスタイルファイル
   7
   })
   8
   export class ComponentNameComponent {
   9
     title = 'Hello, Angular'; // コンポーネントの属性とメソッド
   10
   }

   • selector：他のテンプレートからこのコンポーネントを参照するためのセレクター。例えば、<app-component-name></app-component-name>。
   • templateUrl と styleUrls：それぞれコンポーネントのテンプレートとスタイルファイルのパスを定義します。

3. コンポーネントのデータバインディング

   Angular は複数のデータバインディングの方法を提供しています：

   • 挿入表現（インターポレーション）：コンポーネントの属性値を表示するために使用します。例：{{ title }}。
   • 属性バインディング：[] を使って属性に値をバインドします。例： <img [src]="imageUrl">。
   • イベントバインディング：() を使ってイベントをバインドします。例： <button (click)="onClick()">Click</button>。
   • 双方向データバインディング：[(ngModel)] を使ってデータとビューを双方向に結び付けます（FormsModule のインポートが必要です）。

モジュール（Module）#

モジュールは、アプリケーションのコンポーネント、ディレクティブ、パイプ、サービスを整理・管理するために使用します。各 Angular アプリには少なくとも1つのルートモジュール、AppModule があり、app.module.ts ファイルで定義します。

1. モジュールの構造

   app.module.ts ファイルで、モジュールは @NgModule デコレーターを使って定義され、その構造は以下のとおりです：

   1
   import { NgModule } from '@angular/core';
   2
   import { BrowserModule } from '@angular/platform-browser';
   3
   import { AppComponent } from './app.component';
   4
   import { ComponentNameComponent } from './component-name/component-name.component';
   5
   
   6
   @NgModule({
   7
     declarations: [
   8
       AppComponent,
   9
       ComponentNameComponent   // 声明モジュール内のコンポーネント
   10
     ],
   11
     imports: [
   12
       BrowserModule   // 他のモジュールをインポート
   13
     ],
   14
     providers: [],     // アプリケーションで使用するサービスの提供者を宣言
   15
     bootstrap: [AppComponent]  // アプリの起動時に読み込まれるルートコンポーネントを定義
   16
   })
   17
   export class AppModule { }

   • declarations：モジュール内で宣言されたコンポーネント、ディレクティブ、パイプ。モジュールに宣言されているコンポーネントのみが使用できます。
   • imports：他のモジュールをインポートします。例えば BrowserModule はブラウザアプリのコアモジュールです。
   • providers：アプリで使用されるサービスの提供者を宣言します。
   • bootstrap：アプリ起動時にロードされるルートコンポーネントを定義します。通常は AppComponent。

2. 特性モジュール

   大規模なアプリケーションでは、コードを整理するために複数の機能モジュール（Feature Modules）を作成し、機能ごとに分離や遅延ロードを実現します。

   1
   ng generate module feature-module
   2
   # 或者简写
   3
   ng g m feature-module

コンポーネントとモジュールの関係#

• モジュールはコンポーネントを整理するために使用します：Angular では、モジュールはコンポーネントを管理・整理します。各モジュールは複数のコンポーネントを含むことができます。
• コンポーネントの再利用性：1つのコンポーネントは複数のモジュールで宣言・使用できますが、まずそのコンポーネントを宣言しているモジュールをインポートする必要があります。
• ルートモジュールと機能モジュール：ルートモジュール（例：AppModule）はアプリの起動を担当し、機能モジュールはアプリの具体的な機能を整理します。

インターポレーション（Interpolation）#

インターポレーションは {{ }} 構文を使用してデータをバインドします。HTML 内でコンポーネントの属性値を表示するのに通常使用します。

例： コンポーネントクラスに属性 title を定義し、それをテンプレートで表示します。

1
// コンポーネントの TypeScript ファイル内
2
export class MyComponent {
3
  title = 'Hello, Angular!';
4
}

1
<!-- コンポーネントの HTML テンプレート内 -->
2
<h1>{{ title }}</h1>

ここで {{ title }} は Hello, Angular! に置換されます。インターポレーションは通常、テキスト内容の表示に使用されます。

属性バインディング（Property Binding）#

属性バインディングは方括弧 [] 構文を使い、コンポーネントの属性値を HTML 要素の属性にバインドします。例： src、href、disabled など。

例： 画像リンクを持っていると仮定し、それを img 要素の src 属性にバインドします。

1
// コンポーネントの TypeScript ファイル内
2
export class MyComponent {
3
  imageUrl = 'https://example.com/image.jpg';
4
}

1
<!-- コンポーネントの HTML テンプレート内 -->
2
<img [src]="imageUrl" alt="Example Image">

ここの [src]="imageUrl" は、imageUrl の値を img の src 属性にバインドしていることを意味します。

イベントバインディング（Event Binding）#

イベントバインディングは丸括弧 () 構文を使用し、ビューのイベント（例：click、mouseover）をコンポーネントのメソッドにバインドして、特定のロジックを発火させます。

例： ボタンに click イベントをバインドして、コンポーネントの onClick メソッドを呼び出します。

1
// コンポーネントの TypeScript ファイル内
2
export class MyComponent {
3
  onClick() {
4
    console.log('Button clicked!');
5
  }
6
}

1
<!-- コンポーネントの HTML テンプレート内 -->
2
<button (click)="onClick()">Click Me</button>

ここで (click)="onClick()" は click イベントをバインドし、ボタンをクリックすると onClick メソッドが実行され、"Button clicked!" が出力されます。

双方向データバインディング（Two-way Binding）#

双方向データバインディングは [(ngModel)] 構文を使用し、データとビューを双方向に同期します。ユーザーが入力したデータは自動的にコンポーネントの属性を更新し、属性の変更もビューに自動的に反映されます。双方向バインディングは通常、フォームの入力やユーザー入力のシーンで使用されます。

例： 入力フィールドで双方向データバインディングを使用し、name 属性を input フィールドの値と同期します。FormsModule のインポートが必要です。

1
// コンポーネントの TypeScript ファイル内
2
export class MyComponent {
3
  name = '';
4
}

1
<!-- コンポーネントの HTML テンプレート内 -->
2
<input [(ngModel)]="name" placeholder="Enter your name">
3
<p>Hello, {{ name }}!</p>

ここでは [(ngModel)]="name" が双方向データバインディングを実現し、入力欄の入力は即座に name を更新し、name の値はページに即座に表示されます。

注意：双方向バインディングを使用するには、アプリのモジュールで FormsModule をインポートする必要があります。そうしないとエラーになります。

1
import { FormsModule } from '@angular/forms';
2

3
@NgModule({
4
  imports: [FormsModule],
5
  ...
6
})
7
export class AppModule { }

データバインディングの利点#

• コードの簡素化：バインディングを使うことで、DOM を手動で更新するコードを減らせます。
• リアルタイムの同期：データとビューを同期させ、アプリをより動的にします。
• 保守性の向上：データとビューを分離することで、アプリの保守・拡張が容易になります。

ディレクティブのタイプ#

Angular には主に3つのディレクティブタイプがあります：

1. コンポーネントディレクティブ：コンポーネント自体も一種のディレクティブで、テンプレート・スタイル・ロジックを持ち、ディレクティブの拡張形式です。
2. 構造ディレクティブ（Structural Directives）：DOM 要素の追加・削除やページ構造の制御に使用します。よく使われるのは ngIf と ngFor。
3. 属性ディレクティブ（Attribute Directives）：要素の外観や振る舞いを変更するために使用します。よく使われるのは ngClass と ngStyle。

構造ディレクティブ#

構造ディレクティブは DOM 要素の追加、削除、置換を行います。使用時にはディレクティブの前に * を付けます。

• ngIf は条件に応じて DOM 要素を表示または非表示にします。

  1
  <div *ngIf="isVisible">This is visible only if isVisible is true.</div>

  上の例では、*ngIf="isVisible" が div の表示を制御します。isVisible が true の場合のみこの要素がレンダリングされます。

• ngFor は配列を反復処理して、一連の DOM 要素を生成します。

  1
  <ul>
  2
    <li *ngFor="let item of items">{{ item }}</li>
  3
  </ul>

  上の例では、*ngFor が items 配列を走査し、各要素に対して <li> を生成します。

• ngSwitch は異なる条件に応じて異なる要素をレンダリングします。通常は複数条件の判定に使用されます。

  1
  <div [ngSwitch]="value">
  2
    <p *ngSwitchCase="'one'">Value is one</p>
  3
    <p *ngSwitchCase="'two'">Value is two</p>
  4
    <p *ngSwitchDefault>Value is unknown</p>
  5
  </div>

  ngSwitchCase は特定の値にマッチさせるために使用します。ngSwitchDefault はデフォルトのケースを表します。

属性ディレクティブ#

属性ディレクティブは DOM 要素の外観または振る舞いを変更します。要素を作成または削除するのではなく、既存の要素の属性を変更します。

• ngClass は要素の CSS クラスを動的に設定します。

  1
  <div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }">Styled div</div>

  上の例では、isActive と isHighlighted の値に基づいて active と highlight クラスを動的に追加します。

• ngStyle は要素のインラインスタイルを動的に設定します。

  1
  <div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">Styled div</div>

  上の例では、textColor と fontSize によって div 要素の色とフォントサイズを動的に制御します。

自定义ディレクティブ#

Angular が提供する組み込みディレクティブに加え、特定の振る舞いを実装するカスタムディレクティブを作成することもできます。通常、カスタムディレクティブは属性型ディレクティブで、要素の機能を拡張します。

• カスタムディレクティブを作成する

Angular CLI を使用してディレクティブを作成するコマンドは次のとおりです：

1
ng generate directive highlight
2
# 或简写
3
ng g d highlight

このコマンドは highlight.directive.ts というディレクティブファイルを生成します。初期内容は次のとおりです：

1
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
2

3
@Directive({
4
  selector: '[appHighlight]'
5
})
6
export class HighlightDirective {
7
  constructor(private el: ElementRef, private renderer: Renderer2) {}
8

9
  @HostListener('mouseenter') onMouseEnter() {
10
    this.highlight('yellow');
11
  }
12

13
  @HostListener('mouseleave') onMouseLeave() {
14
    this.highlight(null);
15
  }
16

17
  private highlight(color: string) {
18
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
19
  }
20
}

この例では、カスタムの HighlightDirective ディレクティブは、マウスを要素上に置くと背景色を黄色に設定し、離れると色を元に戻します。

• @Directive デコレーター：ディレクティブを定義します。selector: '[appHighlight]' は属性型ディレクティブを意味し、使用時には appHighlight 属性を要素に追加します。

• ElementRef：ディレクティブが適用される DOM 要素へアクセスします。

• Renderer2：DOM スタイルを安全に操作するため、直接 DOM を変更しないようにします。

• @HostListener：要素のイベントをリスンします。mouseenter はマウスが入るとき、mouseleave はマウスが出るときです。

• 自定義ディレクティブの使用

テンプレートで appHighlight ディレクティブを使用します：

1
<p appHighlight>Hover over this text to see the highlight effect.</p>

appHighlight 属性を追加すると、ディレクティブが要素に適用されます。マウスをホバーすると背景色が黄色になり、離れると元に戻ります。

サービス#

サービスは通常、Angular でクラスとして実装され、特定のコンポーネントに属さないロジックとデータをカプセル化します。データの取得、ビジネスロジックの処理、状態の管理などを含み、サービスは複数のコンポーネント間で共有できます。

1. サービスの作成

Angular CLI を使って高速にサービスを生成します：

1
ng generate service my-service
2
# 或者简写
3
ng g s my-service

生成されるサービスファイルはおおむね以下のとおりです：

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

3
@Injectable({
4
  providedIn: 'root'  // 将服务注册在根注入器中，全局可用
5
})
6
export class MyService {
7
  constructor() { }
8

9
  getData() {
10
    return 'Hello from MyService!';
11
  }
12
}

• @Injectable デコレーター：別のコンポーネントやサービスに依存として注入できることをマークします。
• providedIn: 'root'：このサービスがルートインジェクターで提供され、アプリ全体で利用できます。これにより、providers に手動登録する必要がなくなります。

1. コンポーネントでのサービスの使用

サービスは通常、依存性注入を介して使用します。コンポーネントのコンストラクターにサービスを注入して、コンポーネント内でサービスのメソッドを呼び出します。

以下は、MyService というサービスを作成済みとして、コンポーネントでこのサービスを使用する例です：

1
import { Component, OnInit } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@Component({
5
  selector: 'app-my-component',
6
  template: `<p>{{ message }}</p>`
7
})
8
export class MyComponent implements OnInit {
9
  message: string;
10

11
  // コンストラクターでサービスを注入
12
  constructor(private myService: MyService) {}
13

14
  ngOnInit(): void {
15
    this.message = this.myService.getData();
16
  }
17
}

• コンストラクターインジェクション：コンポーネントのコンストラクターで private myService: MyService を定義してサービスを注入します。
• サービスメソッドの呼び出し：ngOnInit ライフサイクルフックで getData() を呼び出し、戻り値を message に代入します。

1. サービスのスコープと提供方法

Angular のサービス提供方法には複数あり、提供方法の違いはサービスのスコープとライフサイクルに影響します：

• ルートレベルの提供方法

providedIn: 'root' を用いてルートインジェクターでサービスを提供します。サービスのインスタンスはアプリ全体のライフサイクルでシングルトンになります。この方法は、グローバルに共有されるデータやロジックに通常使用されます。

1
@Injectable({
2
  providedIn: 'root'
3
})
4
export class MyService { }

• モジュールレベルの提供方法

サービスを特定のモジュールだけで使用可能にしたい場合、そのモジュールの providers 配列にサービスを登録します。これにより、サービスのライフサイクルはモジュールと同じになり、ローカルに共有されるデータやロジックに適しています。

1
import { NgModule } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@NgModule({
5
  providers: [MyService]  // モジュールレベルで提供する
6
})
7
export class MyModule { }

• コンポーネントレベルの提供方法

サービスのインスタンスを単一のコンポーネントやその子コンポーネントのみで使用したい場合、コンポーネントの providers 配列にサービスを登録します。これにより、各コンポーネントのインスタンスが独自のサービスインスタンスを持ち、特定のコンポーネント内でのみ使用されるロジックに適しています。

1
import { Component } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@Component({
5
  selector: 'app-my-component',
6
  template: `<p>My Component</p>`,
7
  providers: [MyService]  // コンポーネントレベルでサービスを提供
8
})
9
export class MyComponent { }

依存性注入（Dependency Injection）#

依存性注入は、依存関係（例：サービス）をコンポーネントや他のサービスに注入することで、ハードコードされた依存を避ける設計パターンです。Angular の DI システムは依存関係の生成と提供を自動で管理し、アプリの構造を簡素化します。

1. DI システムの動作原理

Angular が特定のクラスが特定の依存を必要とすると検出すると、インジェクターでその依存のインスタンスを探します。インスタンスが存在しない場合、インスタンスを作成してコンポーネントやサービスに返します。

1. カスタムインジェクター

Angular はコンポーネント内でカスタムの注入器をサポートします。これにより、依存の提供方法を制御できます。これは大多数のアプリでは一般的ではありませんが、サービスのスコープを制御したり特殊な依存関係を実装する場合に便利です。

サービスの実際の適用シーン#

• データ共有：共有データをサービスに格納して、複数のコンポーネントがデータにアクセス・更新できるようにします。
• HTTP リクエスト：HttpClient サービスを通じてバックエンド API からデータを取得し、ロジックをサービスにカプセル化して再利用とテストを容易にします。
• グローバルな状態管理：サービスでアプリの状態を管理します（例：ユーザー認証情報やテーマ設定）。

例：シンプルなデータサービスの作成#

以下は、ユーザーデータのセットを管理し、追加・削除・更新・検索機能を提供するシンプルなデータサービス DataService を作成する例です。

• サービスの作成

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

3
@Injectable({
4
  providedIn: 'root'
5
})
6
export class DataService {
7
  private users = ['Alice', 'Bob', 'Charlie'];
8

9
  getUsers() {
10
    return this.users;
11
  }
12

13
  addUser(user: string) {
14
    this.users.push(user);
15
  }
16
}

• コンポーネントでのサービスの使用

1
import { Component } from '@angular/core';
2
import { DataService } from './data.service';
3

4
@Component({
5
  selector: 'app-user-list',
6
  template: `
7
    <ul>
8
      <li *ngFor="let user of users">{{ user }}</li>
9
    </ul>
10
    <input [(ngModel)]="newUser" placeholder="Enter name">
11
    <button (click)="addUser()">Add User</button>
12
  `
13
})
14
export class UserListComponent {
15
  users: string[];
16
  newUser = '';
17

18
  constructor(private dataService: DataService) {
19
    this.users = this.dataService.getUsers();
20
  }
21

22
  addUser() {
23
    if (this.newUser) {
24
      this.dataService.addUser(this.newUser);
25
      this.newUser = '';
26
    }
27
  }
28
}

この例では、DataService はユーザデータの管理ロジックを提供し、UserListComponent はサービスからデータを取得してビューに表示し、同時にサービスを通じて新しいユーザーを追加できます。

ルーティングとは？#

シングルページアプリケーションでは、実際には1つのページしかありませんが、異なる URL を介してアプリの異なる部分にナビゲートできます。Angular のルーティングは URL パスとコンポーネントの対応付けを定義でき、ナビゲーションリンクをクリックすると対応するコンポーネントがロードされ、ページ全体をリフレッシュすることはありません。

Angular のルーティング設定#

1. RouterModule のインポート

Angular アプリでルーティングを設定するには、アプリのルートモジュールまたは関連機能モジュールで RouterModule をインポートし、ルーティング設定を定義します。

例えば、 standalone モードでは main.ts でルーティングを構成します：

1
import { bootstrapApplication } from '@angular/platform-browser';
2
import { AppComponent } from './app/app.component';
3
import { provideRouter } from '@angular/router';
4
import { HomeComponent } from './app/home/home.component';
5
import { AboutComponent } from './app/about/about.component';
6

7
bootstrapApplication(AppComponent, {
8
  providers: [
9
    provideRouter([
10
      { path: '', component: HomeComponent },          // default route
11
      { path: 'about', component: AboutComponent }     // /about route
12
    ])
13
  ]
14
});

この例では、2つのルートを定義しています：

• '' はルートパス（/）で、HomeComponent に対応します。
• 'about' は /about パスで、AboutComponent に対応します。

1. コンポーネントの作成

関連するコンポーネントがまだない場合は、次のコマンドで生成します：

1
ng generate component home --standalone
2
ng generate component about --standalone

1. テンプレートにルーティングリンクを追加

Angular はルーティングリンクを作成するための routerLink ディレクティブを提供します。AppComponent のテンプレートにナビゲーションリンクを追加できます：

1
<nav>
2
  <a routerLink="/">Home</a> |
3
  <a routerLink="/about">About</a>
4
</nav>
5
<router-outlet></router-outlet>

• routerLink：ナビゲーションリンクのパスを指定します。例：routerLink="/" はルートパスを指します。
• <router-outlet></router-outlet>：ルートアウトレット。ルーティングされたコンポーネントが表示される場所を指定します。<router-outlet> はルーティングシステムのプレースホルダーで、現在の URL に基づいて対応するコンポーネントをここに表示します。

1. ルーティングパラメータの伝達

Angular ルーティングは URL にパラメータを伝え、コンポーネント側で受け取り処理します。例として、ユーザー詳細を表示するルートを定義します：

• パラメータ付きルートの定義

ルート設定で :id をプレースホルダーとしてパラメータを定義します：

1
{ path: 'user/:id', component: UserComponent }

• テンプレートにリンクを追加

テンプレートで routerLink を使ってパラメータを渡すことができます：

1
<a [routerLink]="['/user', 1]">User 1</a>
2
<a [routerLink]="['/user', 2]">User 2</a>

• コンポーネントでパラメータを取得

UserComponent では ActivatedRoute を使用してルートパラメータを取得できます：

1
import { Component, OnInit } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3

4
@Component({
5
  selector: 'app-user',
6
  standalone: true,
7
  template: `<p>User ID: {{ userId }}</p>`
8
})
9
export class UserComponent implements OnInit {
10
  userId: string;
11

12
  constructor(private route: ActivatedRoute) {}
13

14
  ngOnInit(): void {
15
    this.userId = this.route.snapshot.paramMap.get('id')!;
16
  }
17
}

• ActivatedRoute：Angular のルーティングサービスで、ルート情報を取得します。
• paramMap：ルートパラメータのキー/値の集合です。get('id') で現在のルートの id パラメータを取得します。

路由守衛（Route Guards）#

ルートガードはルートを保護し、ユーザーがアクセス権を持っていることを保証します。よく使われるルートガードには次のものがあります：

• CanActivate：特定のルートへナビゲートする前にチェックを行い、アクセスを許可するかを決定します。
• CanDeactivate：ルートを離れるときにチェックを行い、離れることを許可するかを決定します。

例えば、ユーザーがログインしている場合のみ特定のルートにアクセスできるようにするシンプルな AuthGuard を作成します。

1. ガードの生成

CLI を使ってガードを生成します：

1
ng generate guard auth

1. AuthGuard のロジックを実装

生成された auth.guard.ts ファイルに認証ロジックを実装します：

1
import { Injectable } from '@angular/core';
2
import { CanActivate, Router } from '@angular/router';
3

4
@Injectable({
5
  providedIn: 'root'
6
})
7
export class AuthGuard implements CanActivate {
8
  constructor(private router: Router) {}
9

10
  canActivate(): boolean {
11
    const isAuthenticated = false; // 実際の認証ロジックに置き換える
12

13
    if (!isAuthenticated) {
14
      this.router.navigate(['/login']);
15
      return false;
16
    }
17
    return true;
18
  }
19
}

1. 守衛をルートに適用

ルーティング設定で canActivate プロパティを用いて守衛を適用します：

1
{ path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }

懒加载（Lazy Loading）#

レイジーロードは、特定のモジュールを必要なときだけ読み込むことで、アプリの初期ロード速度を最適化します。loadComponent を使ってコンポーネントのレイジーロードを簡単に実現できます：

1
{ path: 'lazy', loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent) }

テンプレート駆動フォーム（Template-driven Forms）#

テンプレート駆動フォームは主に HTML テンプレートを通じてフォームの構造と検証ロジックを定義します。簡単なフォームに適しています。データバインディングと検証サポートは Angular の FormsModule を使用して提供されます。

• FormsModule のインポート

まず、モジュールで FormsModule をインポートします。プロジェクトがモジュール化されている場合は、app.module.ts または対応するモジュールファイルを開いて FormsModule を追加します。

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { FormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    FormsModule  // Import FormsModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• テンプレート駆動フォームの定義

テンプレート内でシンプルなフォームを作成し、ngModel ディレクティブを使って双方向データバインディングを実現します。#name="ngModel" のようにテンプレート変数を作成して、入力の検証状態にアクセスします。

1
<form #myForm="ngForm">
2
  <label for="name">Name:</label>
3
  <input id="name" name="name" [(ngModel)]="user.name" required>
4
  <div *ngIf="!myForm.controls.name?.valid && myForm.controls.name?.touched">
5
    Name is required.
6
  </div>
7

8
  <label for="email">Email:</label>
9
  <input id="email" name="email" [(ngModel)]="user.email" required email>
10
  <div *ngIf="!myForm.controls.email?.valid && myForm.controls.email?.touched">
11
    Valid email is required.
12
  </div>
13

14
  <button [disabled]="!myForm.valid">Submit</button>
15
</form>

• [(ngModel)]：双方向データバインディング。フォームフィールドとコンポーネントのデータを同期します。
• #myForm="ngForm"：テンプレート参照変数 myForm を作成し、フォームの状態にアクセスできます。
• **required および email 検証：Angular が HTML5 の検証ルールを自動的に提供します。
• コンポーネントでデータモデルを定義

app.component.ts に user データモデルを定義し、フォームとバインドします。

1
import { Component } from '@angular/core';
2

3
@Component({
4
  selector: 'app-root',
5
  templateUrl: './app.component.html'
6
})
7
export class AppComponent {
8
  user = {
9
    name: '',
10
    email: ''
11
  };
12
}

反応的フォーム（Reactive Forms）#

反応的フォームは、コンポーネントクラス内でフォーム構造と検証ロジックを定義します。より柔軟で、動的な複雑なフォームに適しています。ReactiveFormsModule を使ってフォームコントロールと検証を提供します。

• ReactiveFormsModule のインポート

モジュールで ReactiveFormsModule をインポートします。

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { ReactiveFormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    ReactiveFormsModule  // Import ReactiveFormsModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• 反応的フォームの定義

FormBuilder を用いてフォーム構造と検証ルールを定義します。

1
import { Component } from '@angular/core';
2
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3

4
@Component({
5
  selector: 'app-root',
6
  templateUrl: './app.component.html'
7
})
8
export class AppComponent {
9
  userForm: FormGroup;
10

11
  constructor(private fb: FormBuilder) {
12
    this.userForm = this.fb.group({
13
      name: ['', Validators.required],
14
      email: ['', [Validators.required, Validators.email]]
15
    });
16
  }
17

18
  onSubmit() {
19
    if (this.userForm.valid) {
20
      console.log(this.userForm.value);
21
    }
22
  }
23
}

• FormBuilder：Angular が提供するサービスで、フォーム構造の作成を簡略化します。
• Validators：フォームフィールドの検証ルールを設定します。
• 反応的フォームをテンプレートにバインド

テンプレートでは [formGroup] で全体のフォームをバインドし、formControlName で各フォームコントロールをバインドします。

1
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
2
  <label for="name">Name:</label>
3
  <input id="name" formControlName="name">
4
  <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">
5
    Name is required.
6
  </div>
7

8
  <label for="email">Email:</label>
9
  <input id="email" formControlName="email">
10
  <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">
11
    Valid email is required.
12
  </div>
13

14
  <button [disabled]="userForm.invalid">Submit</button>
15
</form>

• [formGroup]：コンポーネントの userForm をテンプレートのフォームにバインドします。
• formControlName：フォームコントロールを userForm の対応するコントロールにバインドします。

フォーム検証#

Angular は多数の組み込みバリデータを提供します。例えば、Validators.required、Validators.email などがあり、カスタム検証器を作成することもできます。

• カスタム検証器

コンポーネント内でカスタム検証器を定義し、フォームコントロールに適用します。

1
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
2

3
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
4
  return (control: AbstractControl): ValidationErrors | null => {
5
    const forbidden = nameRe.test(control.value);
6
    return forbidden ? { forbiddenName: { value: control.value } } : null;
7
  };
8
}

そのうえで、フォーム作成時にカスタム検証器を適用します：

1
this.userForm = this.fb.group({
2
  name: ['', [Validators.required, forbiddenNameValidator(/bob/i)]],
3
  email: ['', [Validators.required, Validators.email]]
4
});

HttpClient の設定#

Angular アプリで HttpClient を使用するには、モジュールで HttpClientModule をインポートする必要があります。

• HttpClientModule のインポート

ルートモジュールまたは機能モジュールで HttpClientModule をインポートします：

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { HttpClientModule } from '@angular/common/http';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    HttpClientModule  // Import HttpClientModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• HttpClient でリクエストを送る

HttpClient は get、post、put、delete など、さまざまな HTTP リクエストを送信するメソッドを提供します。

1. GET リクエストの送信

API からユーザー一覧を取得する例では、HttpClient.get を使って GET リクエストを送ります：

1
import { HttpClient } from '@angular/common/http';
2
import { Component, OnInit } from '@angular/core';
3

4
@Component({
5
  selector: 'app-user-list',
6
  template: `
7
    <ul>
8
      <li *ngFor="let user of users">{{ user.name }}</li>
9
    </ul>
10
  `
11
})
12
export class UserListComponent implements OnInit {
13
  users: any[] = [];
14

15
  constructor(private http: HttpClient) {}
16

17
  ngOnInit(): void {
18
    this.http.get<any[]>('<https://jsonplaceholder.typicode.com/users>')
19
      .subscribe(data => {
20
        this.users = data;
21
      });
22
  }
23
}

この例では：

• this.http.get が GET リクエストを送信します。

• subscribe はレスポンスデータを処理します。受け取る data はユーザーリストで、コンポーネントの users プロパティに代入されます。

• POST リクエストの送信

サーバーへデータを送信する場合は、HttpClient.post を使用して POST リクエストを送ります。

1
addUser(newUser: any) {
2
  this.http.post('<https://jsonplaceholder.typicode.com/users>', newUser)
3
    .subscribe(response => {
4
      console.log('User added:', response);
5
    });
6
}

ここでの post メソッドは POST リクエストを送信し、newUser データを API に渡します。subscribe の response にはサーバーが返した結果が含まれます。

エラーハンドリング#

実際のアプリケーションでは、API リクエストでネットワークタイムアウトやサーバーエラーなどのさまざまなエラーが発生する可能性があります。catchError 演算子を使ってエラーを捕捉・処理できます。

• エラーハンドリングの例

リクエストのエラーを catchError 演算子で処理し、handleError メソッドを呼び出します：

1
import { HttpErrorResponse } from '@angular/common/http';
2
import { catchError } from 'rxjs/operators';
3
import { throwError } from 'rxjs';
4

5
this.http.get('<https://jsonplaceholder.typicode.com/users>')
6
  .pipe(
7
    catchError(this.handleError)
8
  )
9
  .subscribe(
10
    data => console.log('Data:', data),
11
    error => console.error('Error:', error)
12
  );
13

14
handleError(error: HttpErrorResponse) {
15
  let errorMessage = 'Unknown error!';
16
  if (error.error instanceof ErrorEvent) {
17
    // Client-side error
18
    errorMessage = `Error: ${error.error.message}`;
19
  } else {
20
    // Server-side error
21
    errorMessage = `Error Code: ${error.status}\\nMessage: ${error.message}`;
22
  }
23
  return throwError(errorMessage);
24
}

ここで：

• catchError 演算子はエラーを捕捉して handleError メソッドを呼び出します。
• handleError メソッドはエラーのタイプに基づいてエラーメッセージを生成し、throwError で返します。

HTTP インターセプター（Interceptors）#

HTTP インターセプターは、リクエストやレスポンスを処理する前にロジックを挿入することを可能にします。例えば認証トークンを追加したり、ログを記録したりします。

• インターセプターの作成

Angular CLI を使ってインターセプターを作成します：

1
ng generate interceptor auth

インターセプターのファイルは次のようになることが多いです：

1
import { Injectable } from '@angular/core';
2
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
3

4
@Injectable()
5
export class AuthInterceptor implements HttpInterceptor {
6
  intercept(req: HttpRequest<any>, next: HttpHandler) {
7
    // 克隆请求并添加认证 token
8
    const authReq = req.clone({
9
      setHeaders: {
10
        Authorization: `Bearer YOUR_TOKEN_HERE`
11
      }
12
    });
13
    return next.handle(authReq);
14
  }
15
}

• HttpInterceptor インターフェースの intercept メソッドはリクエストを送信する前に実行されます。

• req.clone はリクエストオブジェクトをクローンして認証トークンを追加します。

• 守衛の登録

モジュールでインターセプターを HTTP_INTERCEPTORS のマルチプロバイダとして登録します：

1
import { HTTP_INTERCEPTORS } from '@angular/common/http';
2
import { AuthInterceptor } from './auth.interceptor';
3

4
@NgModule({
5
  providers: [
6
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
7
  ]
8
})
9
export class AppModule {}

RxJS を用いた非同期処理#

HttpClient のメソッドは Observable を返します。データを購読するには subscribe を使用します。非同期データフローを処理するには、RxJS の演算子（例：map、switchMap）を使用できます。

• RxJS 演算子の例

リクエスト送信後にデータを処理したい場合、map 演算子を使用します：

1
import { map } from 'rxjs/operators';
2

3
this.http.get<any[]>('<https://api.example.com/users>')
4
  .pipe(
5
    map(users => users.map(user => user.name))
6
  )
7
  .subscribe(names => console.log(names));

RxJS とリアクティブプログラミング#

RxJS は Angular の核心ライブラリのひとつで、非同期イベントとデータフローを処理します。

RxJS の強力さは、豊富な演算子を提供し、データをストリームとして扱い、データの変換・フィルタリング・組み合わせを行って、データの変化に対して反応することです。Angular では、HTTP リクエスト、フォーム処理、ルーティング、コンポーネント間通信などの場面で広く使用されています。

RxJS（Reactive Extensions for JavaScript） は、非同期データフローを扱うライブラリで、Observable、Observer、Operators などの機能を提供します。リアクティブプログラミングの核心は、データをストリームとして扱い、一連の演算子を適用してデータを組み合わせ、フィルタリング、変換して、データの変化に反応することです。

Observable（可観測オブジェクト）#

• Observable はデータフローの核心概念です。非同期データソースを表し、HTTP リクエスト、イベント、タイマーなどになることがあります。
• データフローを購読するには Observable.subscribe() を使用します。データが到着すると、オブザーバーに通知されます。

よく使う RxJS 演算子#

RxJS にはデータフローを処理する多くの演算子が用意されています。以下はよく使われる演算子とその適用例です：

1. map - データ変換

map 演算子は、Observable データフローの各データ項目を新しい値に変換します。

例：取得したユーザー配列の各ユーザーオブジェクトをユーザー名にマッピングします。

1
import { map } from 'rxjs/operators';
2

3
this.http.get<any[]>('<https://api.example.com/users>')
4
  .pipe(
5
    map(users => users.map(user => user.name))
6
  )
7
  .subscribe(names => console.log(names));

1. filter - データのフィルタリング

filter はデータフローの条件に合わないデータ項目をフィルタリングします。

例：isActive が true のユーザーをフィルタリングします。

1
import { filter } from 'rxjs/operators';
2

3
this.http.get<any[]>('<https://api.example.com/users>')
4
  .pipe(
5
    map(users => users.filter(user => user.isActive))
6
  )
7
  .subscribe(activeUsers => console.log(activeUsers));

1. switchMap - 古い購読をキャンセルして最新データを処理

switchMap は新しいデータを受け取るたびに、前の未完了の Observable をキャンセルします。ネストしたリクエストや連続イベント（例：フォーム入力、ルートパラメータの変化）を処理する際に便利です。

例：ユーザーの入力キーワードに合わせて自動的に検索し、前回のリクエストをキャンセルします。

1
import { switchMap, debounceTime } from 'rxjs/operators';
2
import { FormControl } from '@angular/forms';
3

4
searchControl = new FormControl();
5

6
this.searchControl.valueChanges
7
  .pipe(
8
    debounceTime(300),  // 防抖。過度なリクエストを避ける
9
    switchMap(query => this.http.get(`https://api.example.com/search?q=${query}`))
10
  )
11
  .subscribe(results => console.log(results));

1. mergeMap - 並列処理

mergeMap は各データ項目を新しい Observable にマッピングし、各 Observable を並列に処理します。

例：複数のユーザーの詳細情報を並列で取得します。

1
import { mergeMap } from 'rxjs/operators';
2

3
const userIds = [1, 2, 3];
4
from(userIds)
5
  .pipe(
6
    mergeMap(id => this.http.get(`https://api.example.com/users/${id}`))
7
  )
8
  .subscribe(user => console.log(user));

1. catchError - エラーハンドリング

catchError はデータフローのエラーを捕捉し、適切に処理します。

例：リクエストが失敗した場合、デフォルト値を返します。

1
import { catchError } from 'rxjs/operators';
2
import { of } from 'rxjs';
3

4
this.http.get('<https://api.example.com/data>')
5
  .pipe(
6
    catchError(error => {
7
      console.error('Error occurred:', error);
8
      return of([]);  // デフォルト値として空配列を返す
9
    })
10
  )
11
  .subscribe(data => console.log(data));

RxJS のフロー制御#

RxJS には debounceTime や distinctUntilChanged などのフロー制御演算子が用意されており、ユーザー入力やクリックなどのイベントフローを処理するのに役立ちます。

1. debounceTime - デバウンス

debounceTime はデータの流量を制御します。一定時間内に新しいデータが到着しない場合にのみデータを送信します。通常、連続した高速な入力を処理する際に使用します。

例：ユーザーが入力を停止してから 500 ミリ秒後に検索リクエストを実行します。

1
searchControl.valueChanges
2
  .pipe(
3
    debounceTime(500)
4
  )
5
  .subscribe(value => console.log('Search:', value));

1. distinctUntilChanged - 重複排除

distinctUntilChanged は前回と同じデータ項目を無視し、重複処理を防ぎます。

例：ユーザーが同じ内容を入力した場合、リクエストを再送しません。

1
searchControl.valueChanges
2
  .pipe(
3
    debounceTime(500),
4
    distinctUntilChanged()
5
  )
6
  .subscribe(value => console.log('Unique search:', value));

RxJS を Angular で活用するシーン#

• HTTP リクエスト：HttpClient の戻り値に RxJS 演算子を適用して、データ取得とエラー処理を容易にします。
• ルートパラメータの変化：ルートパラメータの変化を監視し、依存するリクエストを実行します。
• フォーム入力の処理：入力を処理し、デバウンス・重複排除などを行います。
• コンポーネント間通信：Subject を介してコンポーネント間のイベントやデータ伝達を実現します。

例：RxJS ベースのリアルタイム検索#

以下は、switchMap、debounceTime、distinctUntilChanged を使用してリアルタイム検索機能を構築する完全な例です：

1
import { Component } from '@angular/core';
2
import { FormControl } from '@angular/forms';
3
import { HttpClient } from '@angular/common/http';
4
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
5

6
@Component({
7
  selector: 'app-search',
8
  template: `
9
    <input [formControl]="searchControl" placeholder="Search...">
10
    <ul>
11
      <li *ngFor="let result of results">{{ result.name }}</li>
12
    </ul>
13
  `
14
})
15
export class SearchComponent {
16
  searchControl = new FormControl();
17
  results: any[] = [];
18

19
  constructor(private http: HttpClient) {
20
    this.searchControl.valueChanges
21
      .pipe(
22
        debounceTime(300),
23
        distinctUntilChanged(),
24
        switchMap(query => this.http.get<any[]>(`https://api.example.com/search?q=${query}`))
25
      )
26
      .subscribe(data => this.results = data);
27
  }
28
}

この例では：

• debounceTime(300) はデバウンスで、ユーザーが入力を停止してから 300 ミリ秒後にリクエストを送信します。
• distinctUntilChanged() は重複するリクエストを避けます。
• switchMap は新しい入力があるたびに以前のリクエストをキャンセルし、頻繁なネットワークリクエストのパフォーマンスコストを回避します。

Angular での状態管理の方法#

1. サービスを用いた状態共有

Angular のサービスはアプリケーション全体でシングルトンとして動作します。サービスを通じて複数のコンポーネント間で状態を共有でき、複雑な状態ロジックを必要としない小規模なアプリに適しています。

• 例：シンプルな UserService を作成してユーザー情報を管理する

1
import { Injectable } from '@angular/core';
2
import { BehaviorSubject } from 'rxjs';
3

4
@Injectable({
5
  providedIn: 'root'
6
})
7
export class UserService {
8
  private userSource = new BehaviorSubject<User | null>(null); // ユーザー情報を格納
9
  user$ = this.userSource.asObservable(); // 公開しているユーザー情報を Observable として提供
10

11
  setUser(user: User) {
12
    this.userSource.next(user); // ユーザー情報を更新
13
  }
14

15
  clearUser() {
16
    this.userSource.next(null); // ユーザー情報をクリア
17
  }
18
}

コンポーネント側では、UserService を介してユーザーの状態へアクセス・更新します：

1
@Component({
2
  selector: 'app-profile',
3
  template: `<div *ngIf="user$ | async as user">{{ user.name }}</div>`
4
})
5
export class ProfileComponent {
6
  user$ = this.userService.user$;
7

8
  constructor(private userService: UserService) {}
9
}

別のコンポーネントでユーザー情報を更新する例：

1
@Component({
2
  selector: 'app-login',
3
  template: `<button (click)="login()">Login</button>`
4
})
5
export class LoginComponent {
6
  constructor(private userService: UserService) {}
7

8
  login() {
9
    const user = { name: 'Alice', email: '[email protected]' };
10
    this.userService.setUser(user); // ユーザー情報を更新
11
  }
12
}

2. @ngrx/store を用いた集中管理

大規模なアプリケーションでは、@ngrx/store ライブラリを用いて集中管理を実現します。@ngrx/store は Redux スタイルを実装しており、アプリの全状態を1つのデータソースで集中管理・同期・更新します。

• @ngrx/store のコア概念
  • Store：アプリのグローバル状態を格納します。すべてのコンポーネントは Store からデータを取得・更新できます。
  • Actions：状態変更をトリガーするイベントで、どのような状態更新を行うかを記述します。
  • Reducers：Actions を処理するロジックで、異なる Actions に基づいて Store の状態を更新します。
  • Selectors：Store から必要な状態データを取得します。
• @ngrx/store のインストール

まず、Angular CLI を使って @ngrx/store をインストールします：

1
ng add @ngrx/store

• 状態管理のサンプル作成

カウンター状態を管理するサンプルを作成します。increment と decrement の操作を含みます。

1. Action の定義

counter.actions.ts でカウンターの Action を定義します：

1
import { createAction } from '@ngrx/store';
2

3
export const increment = createAction('[Counter] Increment');
4
export const decrement = createAction('[Counter] Decrement');
5
export const reset = createAction('[Counter] Reset');

2. Reducer の定義

counter.reducer.ts でカウンターの Reducer を定義します：

1
import { createReducer, on } from '@ngrx/store';
2
import { increment, decrement, reset } from './counter.actions';
3

4
export const initialState = 0;
5

6
const _counterReducer = createReducer(
7
  initialState,
8
  on(increment, state => state + 1),
9
  on(decrement, state => state - 1),
10
  on(reset, state => initialState)
11
);
12

13
export function counterReducer(state: any, action: any) {
14
  return _counterReducer(state, action);
15
}

3. Reducer の登録

アプリの app.module.ts で Reducer を Store に登録します：

1
import { StoreModule } from '@ngrx/store';
2
import { counterReducer } from './counter.reducer';
3

4
@NgModule({
5
  imports: [
6
    StoreModule.forRoot({ count: counterReducer })
7
  ],
8
  bootstrap: [AppComponent]
9
})
10
export class AppModule {}

4. コンポーネントで Store を使って状態を管理

1
import { Component } from '@angular/core';
2
import { Store } from '@ngrx/store';
3
import { increment, decrement, reset } from './counter.actions';
4

5
@Component({
6
  selector: 'app-counter',
7
  template: `
8
    <p>Count: {{ count$ | async }}</p>
9
    <button (click)="increment()">Increment</button>
10
    <button (click)="decrement()">Decrement</button>
11
    <button (click)="reset()">Reset</button>
12
  `
13
})
14
export class CounterComponent {
15
  count$ = this.store.select('count'); // count 状態を取得
16

17
  constructor(private store: Store<{ count: number }>) {}
18

19
  increment() {
20
    this.store.dispatch(increment());
21
  }
22

23
  decrement() {
24
    this.store.dispatch(decrement());
25
  }
26

27
  reset() {
28
    this.store.dispatch(reset());
29
  }
30
}