？？？となってしまった方でも１から理解できるように前提の前提から理解できるようにわかりやすく解説します。

Angular：ルーティングとは？

Angularのルーティングは、Webアプリケーション内でのページ遷移（＝実際にはページを遷移するのではなく、今見ているページの内容を書き換える）を制御する仕組み。

通常のWebアプリケーションでは複数のページ（ユーザ情報表示用ページ、トップページ、レポートページなど）があり、リンクをたどることでそれぞれのページに遷移していくのですが、AngularはSPA（シングルページアプリケーション）なのでそのような動作はしません。

シングルページアプリケーション（SPA）では、従来のWebサイトのようにページを全て読み込み直して表示するのではなく、必要なデータやコンポーネントのみを動的に読み込むことでページの内容を更新します。つまり、ここでいう「ページ遷移」とは、実際にはページをまたいで移動するのではなく、単一のページ内で表示内容を切り替えることを指します。

この方法を採用することで、リンクをクリックするたびに発生する全画面の読み込みを待つことなく、ほぼ即座に新しいコンテンツを見ることができるようになります。また、このページ遷移のプロセスはブラウザの履歴管理と連携しているので、ユーザーがブラウザの「戻る」や「進む」ボタンを使用しても、適切なコンテンツが表示されるようにできている点が特徴です。

Angularでは別のページに移動しているわけではなく、１つのページ内で表示を変えている！ってのを理解できればOKです。

それでは、ここから具体的な実装方法を見ていきます。Angularではどのようにページ遷移を実現しているのか？という点に注目してください。

Angularでのルーティング設定

Angularでのルーティング設定を４ステップにわけて説明します。ざっくり言うと、ルーティング用のモジュール（ここにはURLと表示するコンポーネントの紐づけ情報を保持）を作って、そのモジュールをアプリケーションモジュールにImportするという手順です。

ステップ１　ルーティングモジュールの作成

Angular CLIを使用して、ルーティングモジュールを作成します。このモジュールは、ルート（URLパターンとそれに対応するAngularコンポーネントのマッピング）の定義を保持します。

コマンドは以下の通り。

ng generate module app-routing --flat --module=app

1. --flatフラグ
   • 新しいフォルダを作成せずにファイルをプロジェクトのルートに直接置くことを指定。
2. --module=app
   • 新しく生成されたルーティングモジュールをアプリケーションのルートモジュールに自動的にインポートするように指定。

このフラグは必要に応じて書き換えてください。

ステップ２　ルートの定義

ルーティングモジュール（例: app-routing.module.ts）内で、Routes型の配列を定義し、各ルートを設定します。Routes型は@angular/routerからインポートされます。

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component'; // 例としてHomeComponentをインポート
import { AboutComponent } from './about/about.component'; // AboutComponentも例として

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // その他のルート定義...
];

↑の配列はpathとcomponentプロパティを持ちます。pathはURLの一部。componentにはそのURLが指定されたときに表示されるコンポーネントを指定します。

/home を含むURLを押したときに「HomeComponent」を表示するよ！ということ。

ステップ３　RouterModuleのインポートと設定

次に、RouterModuleをルーティングモジュールにインポートし、forRoot()メソッドを使ってアプリケーションのルートルートを設定します。

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• imports配列でRouterModule.forRoot(routes)を呼び出すことにより、先ほど定義したルートがアプリケーションに登録されます。
• exports配列にRouterModuleを含めることで、ルーティング機能がアプリケーションの他の部分から利用可能になります。

ステップ４　アプリケーションモジュールにルーティングモジュールをインポート

最後に、AppRoutingModuleをアプリケーションのルートモジュール（通常はapp.module.ts）にインポートします。これは、Angular CLIを使用してルーティングモジュールを生成した場合、自動的に行われることが多いですが、手動で行う必要がある場合もあります。

import { AppRoutingModule } from './app-routing.module'; // AppRoutingModuleのインポート

@NgModule({
  // ...
  imports: [
    // ...
    AppRoutingModule // ルーティングモジュールをインポート
  ],
  // ...
})
export class AppModule { }

これで、ルーティングの基本設定は完了。実はそんなに難しいことはしていません。

が、Angularのルーティングはここからが本番です。ページを切り替えたときにどのコンポーネントを表示するか？は決まったものの、どこに表示するか？を決められていません。

続いては、ルーターアウトレット（router-outlet）についてご説明します。

Angular：<router-outlet>とは何か？

<router-outlet>は、テンプレート内に配置されるディレクティブ（指示子）で、Angularが動的にコンポーネントを表示する場所を表します。

つまり、URLに基づいて、コンポーネントをこの<router-outlet>の場所に読み込む役割を持ちます。

サンプルコード　router-outlet

app-routing.module.tsに、2つのコンポーネントへのルートを定義。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html（または任意のテンプレートファイル）に<router-outlet>を配置。これにより、ルートに応じてコンポーネントがこの場所に表示されます。

<!-- ナビゲーションリンク -->
<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

<!-- ルートコンポーネントが表示される場所 -->
<router-outlet></router-outlet>

上記の例では、ブラウザで/homeや/aboutにアクセスすると、<router-outlet>の位置に対応するコンポーネントが表示されるということです。

<router-outlet>がAngularアプリケーションにおけるルーティングとビューの管理の中心であることが理解できましたか？実際には、さらに多くのルートや複雑なナビゲーション構造を設定することができますが、基本的な考え方は同じ。

<router-outlet>は、Angularでのルーティングシステムにおいて、動的にコンポーネントを表示する場所を指定するディレクティブ。アプリケーションのナビゲーションに従って、指定されたコンポーネントをこの場所に読み込み、表示します。

ナビゲーションとリンク

最後にリンクの設定方法を解説します。

ルーティングモジュール（コンポーネントとURLの紐づけ）、ルーターアウトレット（コンポーネントの表示領域）の設定が完了したら、あとは画面上に上記のURLを配置していくだけ。ただし、普通にHTMLのaタグを配置するだけでは不十分です。

Angularでは、ページ遷移を実現するために、ディレクティブとプログラム的な方法の両方を提供しています。ここでは、両方の方法を使ってナビゲーションを実装する方法について詳しく見ていきましょう。

ナビゲーションリンク（routerLinkディレクティブ）

Angularでは、テンプレート内で<a>タグにrouterLinkディレクティブを使用して、ナビゲーションリンクを簡単に作成することができます。routerLinkは、ユーザーがリンクをクリックしたときに遷移するパスを指定します。

<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

参考　navタグ / リストタグ

このサンプルコードでは、ホームページ(/home)と詳細ページ(/about)へのリンクを含むナビゲーションバーを作成しています。ユーザーがこれらのリンクのいずれかをクリックすると、指定されたパスに対応するコンポーネントを<router-outlet>に表示します。

プログラムによるナビゲーション（Routerサービス）

Angularでは、Routerサービスをインジェクトしてプログラムによるナビゲーションを実装することもできます。これは、ユーザーがフォームを送信した後や、特定のイベントが発生したときなど、コード内から直接ページ遷移をトリガーする場合に便利です。

ちょっと難しいですが、実際のコードを見てみましょう。コンポーネントクラス内でRouterサービスを使う方法は以下の通り。

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(private router: Router) {}

  navigateToHome() {
    this.router.navigate(['/home']);
  }
}

そして、テンプレート内で、このメソッドをイベント（例えば、ボタンクリック）にバインドします。↓の例では、navigateToHomeメソッドがボタンクリックイベントにバインドされているので、このメソッドが実行されると、アプリケーションは/homeパスに遷移させます。

<button (click)="navigateToHome()">Go to Home</button>

最後にAngularにおけるルーティングの基本知識を表形式で整理します。自分の理解が十分であるかどうか？チェックしておきましょう。

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

このページでは、Angular初心者の方向けにそもそもモジュールとは何か？という初歩の初歩から解説し、@NgModuleの意味と基本的な使い方を１からわかりやすくサンプルコード付きで解説します。

Angularのモジュールとは？

Angularのモジュールは、レゴブロックのセットのようなものです。

レゴは１つひとつの小さなブロックを組み合わせて様々なものを組み立てていきますよね。たとえば、家を作る時には、窓のブロック、ドアのブロック、屋根のブロックなど、それぞれのパーツを組み合わせることで１つの家を作り上げることができます。
レゴブロックに家を組み立てるためのブロックセットがあるように、Webページの一部分を作るために必要な「コンポーネント」や「サービス」などのパーツを１つにまとめたものとして、Angularのモジュールが存在します。

例えば、「プロフィールページ」というモジュールがあるとすると、このモジュールには「ユーザーの写真を表示するパーツ」「ユーザーの名前を表示するパーツ」「連絡先を表示するパーツ」などが含まれるかもしれません。これらのパーツを１つにまとめたものが「プロフィールページモジュール」です。

モジュールの必要性

大きなレゴの城を組み立てるとき、0から100までの全部を一度に組み立てようとすると大変です。（土台から天守閣までの一度に作成しようとすると、作業中に「いまは何をしていたっけ？」というように混乱してしまう・・・）

しかし、城の一部分ごとにセットを分けて、それぞれのセットを別々に組み立ててから、最後に全部をつなげるともっと簡単にできます。まずは、土台を作り、次に1階部分、2階部分として作成し、最後にそれぞれのブロックを連結させて作った方が簡単です。

Angularのモジュールも同じで、Webアプリケーションをいろいろなモジュール（セット）に分けることで、ひとつひとつをシンプルに作っていくことができます。そして、全部のモジュールが完成したら、それをつなげて一つの大きなWebアプリケーションを完成させるようなイメージです。

このモジュールを作成するために利用するのが@NgModuleです。

Angular：@NgModuleデコレータ

@NgModuleはAngularのデコレータの一種で、指定したクラスをAngularモジュールとして識別する役割を担います。モジュールのメタデータをAngularフレームワークに提供するために使用され、モジュールの振る舞いを定義します。

【TypeScript】デコレータ＠とは？1分でわかりやすく解説

Angularのデコレータは、コードをより宣言的で簡潔にし、フレームワークの機能を効果的に活用するための強力なツールです。この記事で紹介した主要なデコレータを理解することで、Angularアプリケーションの開発がよりスムーズに進むはずです。

it-biz.online

2025.04.23

ひとまずここでは「モジュールはいろんな部品をまとめた１つの箱」のようなイメージを持てればOK。

言葉だけで説明されても、中々イメージは湧かないと思いますので、早速モジュールの作成方法～利用方法までをサンプルコード付きで解説していきます。

@NgModuleの構文ルール

@NgModuleデコレータは、クラス定義の直前に配置。デコレータは次のように使用します。

@NgModule({
  // プロパティ: 値
})
export class MyModule {}

@NgModuleデコレータのプロパティ

これらのプロパティを使用して、Angularモジュールを定義し、アプリケーションの構造を整理することができます。

サンプルコード　Angularモジュールの作成例

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー（ここでは空）
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

AppModuleはAngularのルートモジュールとして機能し、アプリケーションで最初にロードされるモジュールです。declarationsには、このモジュールが直接使用するAppComponentが含まれています。importsには、アプリケーションがブラウザで動作するために必要なBrowserModuleが含まれています。bootstrapには、アプリケーションの起動時に最初にロードされるコンポーネントが指定されています。

モジュールの使用

ここからは、具体的な例を用いて実際にモジュールを定義する方法を見ていきましょう。

サンプルシナリオ

アプリケーションに「ユーザー管理機能」と「注文管理機能」があるとします。これらの機能をそれぞれ別のモジュールで管理することにしました。UserModuleとOrderModuleを作成し、それぞれに関連するコンポーネントやサービスをグループ化します。

ステップ1: 機能モジュールの作成

UserModuleには、ユーザー一覧を表示するUserListComponentとユーザーの詳細を表示するUserDetailComponentを含めます。

// src/app/user/user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule],
  exports: [UserListComponent] // UserListComponentを外部に公開
})
export class UserModule {}

同様に、OrderModuleには注文一覧を表示するOrderListComponentを含めます。

// src/app/order/order.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderListComponent } from './order-list.component';

@NgModule({
  declarations: [OrderListComponent],
  imports: [CommonModule],
  exports: [OrderListComponent] // OrderListComponentを外部に公開
})
export class OrderModule {}

ステップ2: モジュールの利用

AppModule（ルートモジュール）でUserModuleとOrderModuleを利用することにします。これにより、アプリケーション全体でユーザー管理と注文管理の機能が使えるようになります。

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module'; // UserModuleをインポート
import { OrderModule } from './order/order.module'; // OrderModuleをインポート

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UserModule, // AppModuleにUserModuleを追加
    OrderModule // AppModuleにOrderModuleを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

このように、Angularモジュールは「呼び出し」されるものではなく、アプリケーションの構造を定義し、コードを機能単位で整理するために「利用」されます。ルートモジュール（AppModule）または他の機能モジュール内でモジュールをインポートすることにより、そのモジュールが提供する機能（コンポーネント、サービスなど）をアプリケーションの他の部分で使用できるようになります。

Angularにおけるパイプ (Pipe) は、テンプレート内で表示するデータを「見た目」や「形式」の観点から変換・加工する仕組みです。このページでは、初心者向けのイメージと、仕組みの本質的な部分を段階的に解説していきます。

パイプ (Pipe) とは何か？

パイプの目的・役割

1. データ変換 (Formatting / Transforming)
   テンプレート (HTML) に表示する「直前」で、コンポーネントから受け取った生データを、ユーザーが見やすい・使いやすい形に整形する。
   例）日付の表示形式、数値の3桁区切り、文字列の大文字化など。
2. テンプレートの可読性向上
   もしパイプがない場合、コンポーネントやテンプレート内にフォーマット用の複雑な処理が散らばるおそれがある。パイプを使うことで、
   • ビジネスロジック (コンポーネント) と表示用のフォーマット処理 (ビュー) を分離しやすい
   • テンプレートは「必要な変換をパイプでつなぐ」だけになる
     ため可読性が向上する。
3. Angular が提供するビルトイン機能との連携
   代表的なビルトインパイプ (DatePipe, NumberPipe, CurrencyPipe, PercentPipe, UpperCasePipe など) を利用することで、面倒なデータ変換の多くを少ないコードで実現できる。

パイプを使うには

• “|” (パイプ記号) を使う
  テンプレート内で {{ 変数 | pipe名 }} のように使います。複数のパイプをつなげて使うこともできます。

<!-- 例: 価格を3桁区切りにフォーマットし、通貨も付けて表示する -->
{{ price | number:'1.0-0' | currency:'JPY' }}

初心者がつかむべき「イメージ」と簡単な利用シーン

単純なビルトインパイプの利用例

<!-- コンポーネントのプロパティ -->
export class ExampleComponent {
  today = new Date();  // たとえば 2025-01-18
  price = 1234.5;
  userName = 'angular user';
}

<!-- テンプレート -->
<!-- ① 日付を表示 -->
<p>Today: {{ today | date:'yyyy/MM/dd' }}</p>
<!-- 出力例: Today: 2025/01/18 -->

<!-- ② 価格を3桁区切りにして、通貨表記に -->
<p>Price: {{ price | currency:'USD':'symbol':'1.0-2' }}</p>
<!-- 出力例: Price: $1,234.50 -->

<!-- ③ 文字列をすべて大文字に -->
<p>User: {{ userName | uppercase }}</p>
<!-- 出力例: User: ANGULAR USER -->

• このように、{{ 変数 | pipe名:オプション }} の形で、テンプレート上で値を変換するのがパイプの基本的な使い方です。
• 利用シーン: ユーザーに見せたい情報があるとき、コンポーネント側のデータ構造や型はそのままで、最後の「表示」のタイミングだけパイプでスッキリ変換できる。

複数パイプの連続利用

1つの値に対して、パイプ記号 | を複数つなげることも可能です。

<!-- 価格を3桁区切り→JPY表記→大文字に -->
<p>{{ price | number:'1.0-0' | currency:'JPY':'symbol' | uppercase }}</p>

• price を整数表記にして (number:'1.0-0')、
• currency で通貨（￥）を付与し (currency:'JPY')、
• uppercase で最終的に大文字化したものが表示される。

データ変換が段階的に行われるため、一連のフォーマット処理をテンプレート上で可視化しやすいのが利点の１つです。

カスタムパイプの基本と概念

Angularで用意されているビルドインパイプでは要件を満たさない場合、自分でパイプを作成することもできます。

例）日付 +「何日前」「何時間前」といった表示形式にしたい、配列を特定の条件でフィルタリングしたい、など。

カスタムパイプの最小構成

// ex-rate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exRate' // テンプレート上で使うパイプ名
})
export class ExRatePipe implements PipeTransform {
  // transformメソッドが肝。引数は自由に定義できる（最初が「値」、それ以降がパラメータ）
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

1. @Pipe() デコレーターで、パイプであることとパイプ名を宣言。
2. PipeTransform インターフェースの transform メソッドを実装する（必須）。
3. 変換したい処理を transform で書き、戻り値を返す。

テンプレートでの使用例

<!-- コンポーネントで amount = 100 として、1ドル=135円換算 で表示 -->
<p>JPY: {{ amount | exRate:135 }}</p>
<!-- 実行結果: 13500 -->

@Pipe({
  name: 'exRate'
})
export class ExRatePipe implements PipeTransform {
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

Change Detection (変更検知) との関係

(1) Angular における変更検知

• Angular はコンポーネントのプロパティが変わったかどうかを監視 (Change Detection) し、変更があればテンプレートを再描画 (再評価) する仕組み。
• 純粋パイプ (Pure Pipe) は「入力値 (およびその参照) が変わったときのみ」transform を再実行する。
• 非純粋パイプ (Impure Pipe) は「変更検知サイクルごとに」transform を再実行する。

(2) 純粋パイプと非純粋パイプ

1. 純粋パイプ (Pure Pipe)
   • デフォルトではこちら。@Pipe({ name: 'xxx' }) と書くだけで純粋パイプとして扱われる。
   • 値が変わったときだけ再評価されるので、パフォーマンスによい。
   • 単純な日付変換や数値フォーマットなど、入力値が変わらないときに「結果も変わらない」処理に最適。
2. 非純粋パイプ (Impure Pipe)
   • @Pipe({ name: 'xxx', pure: false }) のように、pure: false を指定すると非純粋パイプになる。
   • 変更検知サイクルのたびに毎回 transform が走るので、配列やオブジェクトの“中身”の変化に対しても都度再評価される。
   • 利用シーン:
     • 配列・オブジェクトをテンプレート上でフィルタやソートしたいときに、「単純に参照が新規になった/ならない」を超えて、内容の微細な変化に対応させたい場合など。
     • ただしパフォーマンスに影響するので、よく検討してから使う。

非純粋パイプの簡単な例

@Pipe({
  name: 'search',
  pure: false // 非純粋パイプ
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], keyword: string): any[] {
    return items.filter(item => item.name.includes(keyword));
  }
}

この例では、items (配列) や keyword (検索文字列) が細かく変化するたびにパイプを再評価し、フィルタ済みの配列を返す。もし純粋パイプだと、配列の「参照」が同じままでは再実行されないため、意図するタイミングで結果が更新されない場合がある。とはいえ「毎回呼ばれる」ことになるため、大きな配列・複雑な処理には注意が必要です。

具体的な利用シーンとコード例

シーン1: ユーザー一覧の表示をフィルタ/ソートしたい

• パイプでフィルタ処理を書けば、テンプレートに | filterUser:'xxx' のように書くだけで表示を切り替えられる。
• ただし大量データがある場合は、都度全件フィルタするとパフォーマンスが落ちるため、コンポーネント側でフィルタした結果を保持するなど検討が必要。

@Pipe({ 
  name: 'filterUser'
})
export class FilterUserPipe implements PipeTransform {
  transform(users: { id: number; name: string; }[], searchTerm: string): any[] {
    if (!searchTerm) return users;
    return users.filter(user => 
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

<!-- テンプレート -->
<input [(ngModel)]="keyword" placeholder="検索ワード" />
<ul>
  <li *ngFor="let user of users | filterUser:keyword">
    {{ user.name }}
  </li>
</ul>

シーン2: 日付の差分を表示したい (たとえば「xx日前」「xx時間前」)

• ビルトインの DatePipe では「相対的な日付表示」はサポートしていない (locale, format によるもの) ので、カスタムパイプで実装する。

@Pipe({
  name: 'relativeTime'
})
export class RelativeTimePipe implements PipeTransform {
  transform(value: Date): string {
    const now = new Date();
    const diffMs = now.getTime() - value.getTime();
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));

    if (diffDays > 0) {
      return `${diffDays}日前`;
    } else if (diffHours > 0) {
      return `${diffHours}時間前`;
    } else {
      return 'たった今';
    }
  }
}

<!-- テンプレート例 -->
<p>投稿時刻: {{ post.createdAt | relativeTime }}</p>
<!-- 出力例: "1日前" "2時間前" ... -->

パイプは「コンポーネント → テンプレート」の単方向データフローの、テンプレート直前でのフォーマット処理 としてとらえると理解しやすいです。

前提として「Angularの変更検知の流れ (コンポーネントのプロパティが変わるとテンプレートに反映される)」を押さえておけば、純粋パイプと非純粋パイプの振る舞いも自然と理解できるでしょう。一度使ってみるとその便利さを実感できるので、まずはビルトインパイプの日付フォーマットや数値フォーマットから試し、必要に応じてカスタムパイプでオリジナルの変換処理を実装してみてください。

このページでは、そもそもディレクティブって何？という人向けにディレクティブのイメージ・本質的な理解が進むように１からわかりやすく使い方や注意点を解説していきます。

まずはディレクティブのイメージをつかむ

たとえば、普通のHTMLでは<div>や<p>などの要素をただ書いただけでは、そこに特別な「動き」はありません。テキストを表示したり、見出しを表現したりするだけです。

そこに「この要素は、ある条件が満たされたら表示し、そうでなければ非表示にしたい」とか、「ある配列のデータをもとに、同じ形の要素を繰り返し表示したい」といった動的な振る舞いを付けたくなる場面が出てきます。

Angularにおいては、この「動的な振る舞い」をHTML要素に追加するための仕組みこそがディレクティブです。ディレクティブを使うと、HTMLタグをただ書くだけでなく、「この要素はどう表示されるのか」「いつレンダリングされるのか」といった命令を付け加えることができます。

「HTMLに命令を埋め込む」という発想

ディレクティブはHTML側に命令を埋め込むようなイメージで考えると理解しやすくなります。「ここにもしデータがあったら繰り返し表示する」「ここの条件がtrueなら、このブロックを描画する」といった振る舞いを、HTMLタグの属性として書けるのです。

• 例: *ngIf="isVisible"
  • isVisibleという変数がtrueのときだけ要素が表示される
• 例: *ngFor="let item of items"
  • items配列をひとつずつ取り出して要素を繰り返し生成する

こうしたディレクティブをHTMLに貼り付けるだけで、Angularはテンプレートを解釈し、内部的にDOMを追加／削除したり、表示／非表示の切り替えを行ってくれます。

コンポーネントとの違いをざっくり知る

Angularを学び始めると、ディレクティブとほぼ同時に「コンポーネント」という言葉を耳にするはずです。コンポーネントも広い意味では「ディレクティブの一種」とされますが、次のような違いがあります。

• コンポーネント
  • HTMLテンプレート、TypeScriptのクラス、CSSスタイルなどをひとまとめにした「画面の部品」
  • <app-○○>のような独自タグとして使うことが多い
• ディレクティブ（構造・属性ディレクティブなど）
  • 画面の見た目そのものではなく、既存のHTML要素の振る舞いだけを拡張する命令書のようなイメージ
  • *ngIfや*ngForのような構造ディレクティブ、[ngClass]のような属性ディレクティブが代表例

このようにコンポーネントとディレクティブは、どちらも「AngularがHTMLをどう解釈して動的に扱うか」を制御していますが、コンポーネントは「見た目のかたまり」を構成するのに対し、ディレクティブは「特定の振る舞いを要素に追加する」という役割に特化しているというイメージを持つと、両者を使い分けやすくなります。

ディレクティブがもたらすメリット

1. HTMLテンプレートに直接“動き”を宣言できる
   • *ngIfや*ngForを見れば、一目で「ここの要素が条件付き表示／繰り返し表示なんだ」と理解できる。
2. コードの可読性・メンテナンス性の向上
   • 画面遷移や表示切り替えといったロジックを、HTML側と直接リンクさせて書けるため、可読性が上がる。
3. 複雑なDOM操作の削減
   • もしディレクティブがなければ、JavaScriptでDOM操作のAPIを使って要素の追加削除を毎回行う必要があるが、その分の処理をAngular側が肩代わりしてくれる。

こうしたメリットから、AngularのディレクティブはアプリケーションのUIをより動的かつ宣言的に構築できる重要な機能だと言えます。

このようにディレクティブの本質は「HTML要素をベースに、より複雑な処理を記述できる拡張機能」として存在していることにあります。単純なHTMLの延長線として考えられるので、初心者の方でも慣れてくると「ここで*ngIfを使えばいいのか」「繰り返し表示には*ngForを使うんだな」と自然に使いこなせるようになるでしょう。

ディレクティブの種類

Angularでは、多彩な動きをHTML要素に追加できるディレクティブですが、大きく分けて3つのカテゴリーに分類されます。ここでは、それぞれの特徴や使い方をイメージしやすいように、順を追って解説していきます。

1. コンポーネント（Component Directive）

• 何をする？
  • 画面（UI）を構成する最小単位の部品を定義するためのディレクティブです。
  • 独自のHTMLテンプレート、CSSスタイル、そして振る舞い（TypeScriptクラス）をまとめて管理します。
• どんなイメージ？
  • 「ボタン」「カード」「ユーザー情報パネル」のように、ひとかたまりのUI要素として切り出したいときに使います。
  • <app-xxx> のような独自タグが作られて、テンプレート内で再利用できるようになります。
• なぜ便利？
  • テンプレートやロジックが分離されずに一体化して管理できるため、開発・保守がしやすい。
  • コードの再利用やチーム開発時の分担がやりやすくなる。

コンポーネントはディレクティブの一種

技術的には、コンポーネント（@Component）もディレクティブ（@Directive）の拡張版として位置付けられています。ただし、コンポーネントが「UIのひとかたまり」であるのに対して、構造・属性ディレクティブは「UIの見た目や構造を変化させるための命令書」という位置づけです。

コンポーネントについては別切りで解説ページを作っておりますので以下で詳しく確認してください。

Angular：コンポーネントの基本：作成方法を３分で解説

Angularのコンポーネントとは何か、そして簡単なステップで自分のAngularコンポーネントを作成する方法を学びましょう。このガイドでは、コンポーネントの基本概念から、Angular CLIを利用した効率的なコンポーネントの生成、テンプレートとスタイルのカスタマイズ方法までをわかりやすく解説します。

it-biz.online

2025.01.10

2. 構造ディレクティブ（Structural Directive）

• 何をする？
  • HTMLの要素を「追加・削除」して、DOM（画面構造）自体を変化させるためのディレクティブです。
• どんなイメージ？
  • 「条件がtrueのときだけ要素を表示したい」「配列の要素を繰り返し表示したい」など、動的に要素を増減する仕組みが必要なときに使います。
• なぜ便利？
  • 従来ならJavaScriptでDOM操作をして要素を手動で増やしたり削除したりしていた部分を、テンプレートの記述だけで表現できる。
  • 画面ロジックがHTML上で明確にわかるので、可読性も高い。

サンプルコード1　*ngIfと*ngFor の併用

<div *ngIf="items && items.length > 0">
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

要素が存在して、かつ1つ以上アイテムがある場合にのみ、リストを表示する構造を簡潔に表現できます。構造ディレクティブは、*プレフィックスを使用してテンプレート上で適用されます。これにより、Angularはディレクティブの存在する要素をラップする<ng-template>を自動的に作成し、その内容の表示を制御することができます。

サンプルコード2　*ngIfを使用して条件に応じて要素を表示/非表示にする

<!-- 条件が真の場合のみ<p>タグを表示します -->
<p *ngIf="condition">条件が真のときに表示されます</p>

サンプルコード3　*ngForディレクティブを使用して配列の各アイテムに対して要素を繰り返し表示

<!-- 配列itemsの各アイテムに対して<li>タグを繰り返し表示します -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

カスタム構造ディレクティブ

カスタム属性ディレクティブとは、開発者が定義する属性ディレクティブの一種。標準の属性ディレクティブ（例えば、ngStyleやngClass）以外に、アプリケーションの特定の要求に応じた特別なロジックやスタイリングを適用する必要がある場合に、カスタム属性ディレクティブを作成します。

ポイント　カスタム属性ディレクティブの作成ステップ

1. ディレクティブクラスの作成
   • Angular CLIのコマンドng generate directive my-directiveを使用するか、手動でディレクティブクラスを作成します。ディレクティブのデコレーター@Directiveには、セレクターが指定され、このセレクターはディレクティブが適用される属性を識別します。
2. ロジックの実装
   • ディレクティブクラス内に、要素の外見や振る舞いを変更するロジックを実装します。ElementRefを使用してディレクティブが適用されるDOM要素にアクセスし、Renderer2を使って要素のスタイルやプロパティを安全に変更します。
3. アプリケーションのモジュールにディレクティブを宣言
   • 作成したディレクティブをアプリケーションのモジュール（通常はAppModule）のdeclarations配列に追加します。

サンプル　highlight.directive.ts (カスタム属性ディレクティブ)

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

app.component.htmlでappHighlightディレクティブを使用する方法

<div appHighlight>This text will be highlighted when hovered over.</div>

カスタム属性ディレクティブを作成することで、アプリケーションの再利用可能なロジックやビジュアルエフェクトを効率的に管理できるようになります。

3. 属性ディレクティブ（Attribute Directive）

• 何をする？
  • 既存のHTML要素やコンポーネントに対して、見た目や振る舞いを変更するための追加機能を付与するディレクティブです。
  • “HTMLタグそのものの構造を増減する”のではなく、“そのタグの属性やスタイルなどを動的に操作する”イメージです。
• どんなイメージ？
  • 「ある条件でクラスを切り替えたい」「スタイルを動的に変更したい」など、要素の属性に関わる部分をAngularの仕組みと連動させたいときに活躍します。
• なぜ便利？
  • 画面のデザインや動的変化をコード内のロジックと直接リンクできるので、UIの変更がわかりやすい。
  • Sassなどのスタイル管理とも相性がよく、UIの動的変更を細かく制御できます。

代表的な属性ディレクティブ

1. [ngClass]
   • 条件に応じてクラスを追加・削除したり、複数のクラスを同時に切り替えたりできる。
   • 例: [ngClass]="{ 'active': isActive, 'error': hasError }"
2. [ngStyle]
   • スタイルをオブジェクト形式で動的に変更できる。
   • 例: [ngStyle]="{ 'background-color': bgColor }"
3. [ngModel]
   • フォーム要素（入力欄など）とデータをバインドするために使う。（Template-driven formsで利用）
4. その他カスタム属性ディレクティブ
   • Angularが用意しているディレクティブ以外にも、自分で作成して要素の見た目や挙動を拡張できます。

サンプルコード4　ngClass の使用例

<button 
  [ngClass]="{ 'btn-primary': isPrimary, 'btn-disabled': isDisabled }">
  ボタン
</button>

サンプルコード5　ngStyleディレクティブを使用して要素のスタイルを動的に適用

<!-- スタイルオブジェクトに基づいて動的にスタイルを適用 -->
<div [ngStyle]="{'font-size': size + 'px'}">テキストサイズを動的に変更</div>

これらのディレクティブを利用することで、Angularアプリケーション内のHTML要素の外見や振る舞いを柔軟に制御することができます。構造ディレクティブと属性ディレクティブは、それぞれDOMの構造変更と要素のプロパティ/スタイルの変更という異なる目的で使用され、アプリケーションのUIをよりダイナミックにするために重要な役割を果たします。

このページでは、データバインディングの仕組み・動作原理と実際のコーディング方法を１からわかりやすく初心者向けに解説します。

データバインディングとは？

データバインディングとは、超ざっくり説明すると「データの橋渡し」をするようなのものです。Angularではこの「橋渡し」を通じて、あなたのアプリケーションのデータ（情報）と画面上の表示をリンクします。

アプリケーション内でデータ（例えば、テキストや数値）を変更すると、その変更が自動的に画面上に反映されるたり、逆にユーザーが画面上で何らかのアクション（例えば、フォームに値を入力するなど）を行った時にはそのアクションがアプリケーションのデータに影響を与えたりするのがデータバインディングです。

もし、データバインディングという仕組みがなかったとすると・・・

1. 手動でデータ同期が必要

• ユーザーインターフェース（UI）の変更を反映するために、コード内で明示的に値を更新しなければなりません。
• 逆に、データの変更も手動でUIに反映させる必要があり、作業量が増加。

2. コードが複雑化する

• 双方向のデータ更新を実現するために、多くのイベントリスナーやロジックを実装する必要があります。
• 結果、コードの保守性や可読性が低下します。

データバインディングという仕組みがあることで、画面とアプリケーション、アプリケーションと画面のデータの自動同期が簡単に行える、ということです。これはAngularを利用するメリットの1つでもあります。

データバインディングの動作原理は実際のコードを見ていくことでイメージが付きやすい性質のものでもあるので、ここから具体的な説明に入りつつ、いくつかサンプルコードをお見せしていきます。データバインディングには大きく分けて４つの種類があります。

１つずつ詳しく説明します。

補間（Interpolation）

補間（Interpolation）は、Angularで最も基本的かつ一般的なデータバインディングの形式です。

補間は、コンポーネントのプロパティやメソッドの値をHTMLテンプレートに結び付けて、コンポーネントのデータを画面（＝ビュー）に表示するために使われます。

手紙を書くようなイメージ。手紙の内容（データ）を変更すると、その手紙を読む人（画面上の表示）が見るメッセージも変わるのと同じです。

構文ルール：補間

補間の構文はシンプルです。二重中括弧{{ }}を使用し、その中に表示したいコンポーネントのプロパティ名やメソッドを記述します。二重中括弧内に記述されたコードは、Angularによって評価されその結果がHTMLテンプレート内の該当位置に文字列として挿入されます。

{{ propertyName }}

以下は、補間を使用した簡単なAngularコンポーネントの例です。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello, Angular!';
}

<h1>{{ title }}</h1>

上記のサンプルコードではAppComponentクラスにtitleプロパティが定義されており、プロパティの値が'Hello, Angular!'となっています。結果、HTMLテンプレート内で{{ title }}を使用することで、このtitleプロパティの値を<h1>タグ内に動的に表示する仕組み。このアプリケーションを実行すると、ブラウザにはHello, Angular!と表示されます。

もし、プロパティの値が変更されれば、Angularはその変更を検知し、その瞬間画面の表示も変わるという仕組みです。

プロパティバインディング

プロパティバインディングは、その名の通りコンポーネントのプロパティの値をHTML要素のプロパティにバインドします。

参考　HTML要素のプロパティ/属性についてわかりやすく３分で解説

構文ルール：プロパティバインディング

プロパティバインディングの構文は、HTML要素のプロパティ名を角括弧[ ]で囲み、その中にバインドしたいコンポーネントのプロパティ名を指定する形式です。targetはHTML要素のプロパティ名、expressionはバインドしたいコンポーネントのプロパティ名や式です。

[target]="expression"

以下は、AngularコンポーネントのimageUrlプロパティを<img>要素のsrc属性にバインドする方法です。

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

@Component({
  selector: 'app-image-display',
  templateUrl: './image-display.component.html',
  styleUrls: ['./image-display.component.css']
})
export class ImageDisplayComponent {
  imageUrl = 'https://example.com/image.png';
}

<img [src]="imageUrl" alt="Description of the image">

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

イベントバインディングは、HTML要素から発生するイベント（例えば、クリックやキーボード入力など）をコンポーネントのメソッドにバインドします。これにより、ユーザーのアクションに基づいてアプリケーションが反応するような仕組みを構築することができます。

構文ルール：イベントバインディング（Event Binding）

イベントバインディングの構文は、イベント名を括弧()で囲み、その中にバインドしたいコンポーネントのメソッド名を指定。イベントの種類に応じて、様々なHTMLイベントを指定することができます。

(target)="expression"

以下のサンプルコードでは、ボタンクリックイベントをAngularコンポーネントのonClickメソッドにバインドする方法を示しています。

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

@Component({
  selector: 'app-click-me',
  templateUrl: './click-me.component.html',
  styleUrls: ['./click-me.component.css']
})
export class ClickMeComponent {
  message = '';

  onClick() {
    this.message = 'Button was clicked!';
  }
}

<button (click)="onClick()">Click me</button>
<p>{{ message }}</p>

この例では、<button>要素のclickイベントがonClickメソッドにバインドされています。その結果ユーザーがボタンをクリックすると、onClickメソッドが実行され、messageプロパティの値が更新されるという例。この新しい値は補間を通じて<p>要素内に表示され、結果として「Button was clicked!」というメッセージがユーザーに表示されます。

誰かがドアベルを押した時に鳴るチャイムみたいなイメージ。ドアベル（画面上のアクション）が押されると、チャイム（アプリケーションの反応や処理）が鳴るような感じです。

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

双方向データバインディングは、コンポーネントのモデルとHTML要素のビューの間でデータを自動的に同期させる方法を指します。要は、ユーザーの入力が直接モデルを更新し、モデルの変更が直接画面上にリアルタイムで反映されるということ。

構文ルール：双方向データバインディング（Two-way Binding）

双方向データバインディングのためには、[(ngModel)]ディレクティブを使用します。propertyはコンポーネントのプロパティ名。ngModelはフォーム要素に最も一般的に使用され、例えばテキストフィールド、ラジオボタン、セレクトボックスなどの値をコンポーネントのプロパティにバインドするのに使われます。

[(ngModel)]="property"

以下のサンプルは、テキストフィールドの値をコンポーネントのnameプロパティと双方向にバインドする方法です。

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = '';
}

<input [(ngModel)]="name" placeholder="Enter name">
<p>Hello {{ name }}!</p>

この例では、<input>要素のvalueプロパティとNameEditorComponentコンポーネントのnameプロパティが[(ngModel)]を使って双方向にバインドされています。結果、ユーザーがテキストフィールドに名前を入力すると、その入力がリアルタイムで<p>要素に反映されます。また、プログラムによってnameプロパティの値が変更されると、その新しい値がテキストフィールドにも表示されます。

結論「ngOnInitは、Angularのライフサイクルフックの１つで、コンポーネントが初期化された直後に呼び出されます。主に、初期化処理やデータの準備を行うために使用されます。」

Angularのライフサイクルは、コンポーネントやディレクティブが「生成」「変化」「破棄」という流れで動作する仕組みを指します。ngOnInitはこのライフサイクルの中で、初期化のために特化したフックです。

ngOnInitを理解するために、このページではAngularのライフサイクル/ライフサイクルフックの概念について解説します。

Angularのライフサイクルとは？

Angularのコンポーネントは以下のような「一生」を持っています：

1. 生成 (Creation)
   コンポーネントが作られる瞬間。
2. 変化 (Change Detection)
   データが更新され、それに応じてビューが再描画される過程。
3. 破棄 (Destruction)
   役割を終えて、メモリから削除されるタイミング。

この一連の流れが「ライフサイクル」です。

よりシステム的に言えば、対象のコードがロードされ、そのコードが外部からのリクエストで様々な動作をし、最終的に処理が終了する～、という一連の流れをライフサイクルと呼びます。

日常生活の例で考えてみると以下のようなイメージです。

• 生成: 新しい家を建てる。
• 変化: 家具を配置し直したり、壁を塗り替える。
• 破棄: 家を解体する。

ライフサイクルフックとは？

ライフサイクルフックは、ライフサイクルの特定のタイミングで実行される「きっかけ」や「スイッチ」のようなものです。開発者がこれを利用して、適切なタイミングでカスタムロジックを追加することができます。

これをシステム的に捉えると、ライフサイクルフックは「状態遷移」に基づくイベント駆動型プログラミングの一部と説明できます。アプリケーションやコンポーネントは、それぞれの状態（生成、更新、破棄など）において異なる責務を持ち、ライフサイクルフックはその責務を実行するトリガーとして機能します。

Angularの主要フック

ngOnInitの役割と特徴

ngOnInitは、Angularがすべての入力プロパティ（@Input）を設定した後、1度だけ呼び出されます。生成フェーズの一部として、コンポーネントの初期化処理を担当します。

特徴

• 呼び出し回数: 一度だけ呼び出される。
• 依存性注入後に実行: コンストラクタで設定された依存性を利用可能。
• データが利用可能: 入力プロパティ（@Input）が初期化された状態。

用途

1. 初期データの設定
   • APIからのデータ取得。
   • 初期状態を設定する。
2. 入力データの利用
   • @Inputで渡された値を基にロジックを実行。
3. コンストラクタとの分離
   • 初期化ロジックをコンストラクタから分離し、コードを整理する。

ngOnInitを通じてライフサイクルを理解する

ここからは具体的にどんな感じで動作するのか？をイメージできるように実際のコードを用いてご説明します。

以下のコードでngOnInitがライフサイクル全体の中でどのように機能するかを見てみましょう。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<p>{{message}}</p>`
})
export class DemoComponent implements OnInit {
  @Input() userName: string = ''; // 入力プロパティ
  message: string = '';

  constructor() {
    console.log('Constructor: コンポーネントが生成されました');
  }

  ngOnInit() {
    console.log('ngOnInit: 初期化処理を実行します');
    this.message = `こんにちは、${this.userName}さん！`;
  }
}

このコードは、Angularのコンポーネントを使って、ユーザー名を受け取り、その名前を使ってメッセージを表示する仕組みを実現しています。以下に、実行結果と動作の原理をわかりやすく説明します。

実行結果

このコンポーネントを以下のように使用すると、画面に「こんにちは、〇〇さん！」と表示されます。

<app-demo [userName]="'太郎'"></app-demo>

画面の表示：

こんにちは、太郎さん！

動作の原理

1. コンポーネントの基本構成
   • @Component デコレーターでコンポーネントの情報を設定します。
   • selector: 'app-demo' により、このコンポーネントは <app-demo> というタグで使用可能になります。
   • template: <p>{{message}}</p> で、HTMLテンプレートに表示する内容を指定しています。
2. 入力プロパティ (@Input)
   • @Input() デコレーターを使うと、親コンポーネントから値を受け取ることができます。
   • この例では、userName プロパティが入力プロパティで、親コンポーネントから値が渡されます。
3. コンストラクター
   • constructor() は、コンポーネントが生成されたタイミングで一度だけ呼び出されます。
   • ここでは特別な処理はしていませんが、ログ出力で確認できます。
4. ngOnInit メソッド
   • ngOnInit() は、コンポーネントが初期化された後に呼び出されます。
   • このメソッドで、userName を使って message の内容を設定しています。
5. 動作の流れ
   • 親コンポーネントから <app-demo [userName]="'太郎'"></app-demo> として userName に値が渡されます。
   • ngOnInit() が実行され、message プロパティに「こんにちは、太郎さん！」という文字列がセットされます。
   • テンプレートの <p>{{message}}</p> がその値を表示します。

Angularとは何か？を概要レベルで理解していることを前提に解説します。

Angularのコンポーネントとは？

Angularのアプリケーションは、コンポーネント（Component）という単位を組み合わせて構築されます。コンポーネントは、以下の3つの要素から構成されるのが基本です。

1. テンプレート (template): UI (HTML) を定義する部分
2. クラス (class): ビジネスロジックや状態（プロパティ、メソッド）を定義する部分
3. メタデータ (metadata): デコレーター @Component({...}) によってコンポーネントの設定を行う部分

このように、見た目と振る舞いをひとまとめにした構造がコンポーネントです。HTML・CSS・TypeScriptで作られるコンポーネントを必要に応じて組み合わせていくことで、大規模なアプリケーションでもスケーラブルかつ保守しやすい設計が可能になります。

これらのコンポーネントを組み合わせて１つのアプリケーションを構築します。各コンポーネントは独立しているため、必要に応じて簡単に追加、削除、または再利用することができます。家を建てるときに部屋を追加したり、デザインを変更したりするのと似ています。

まずは早速コンポーネントの作成を行ってみましょう。（参考 Angular開発環境構築手順）

npm install -g @angular/cli

ng new プロジェクト名

ステップ1: コンポーネントの生成

プロジェクトディレクトリ内で、Angular CLIのgenerate componentコマンドを使用して新しいコンポーネントを生成します。ターミナルやコマンドプロンプトを開き、次のコマンドを実行してください。

ng generate component コンポーネント名

以下のように短縮形を使用することもできます。

ng g c コンポーネント名

このコマンドは、指定したコンポーネント名で新しいディレクトリを作成し、その中にコンポーネントのクラスファイル（.ts）、テンプレートファイル（.html）、スタイルシートファイル（.scssまたは.css）、テストファイル（.spec.ts）を生成します。

ng generate component users/user-profile

ステップ2: コンポーネントの編集

生成されたファイル（コンポーネントを構成する基本的なソースコードが生成されています）を編集して、コンポーネントのビジネスロジック、表示内容、スタイルを定義します。

ここでは、簡単なコンポーネントの例を通して、これらのファイルが初期状態でどのようになっているか、そしてどのように編集するかを見ていきましょう。

事例　ユーザープロフィールコンポーネント

初期のコード　user-profile.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

コンポーネントを作成すると上記のようなコードが生成されています。基本的には、このクラスの中のロジックを開発していくことになります。

ここではわかりやすい例としてユーザー名と説明をコンポーネントクラスのプロパティとして追加します。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
  userName: string = 'John Doe';
  userDescription: string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

  constructor() { }

  ngOnInit(): void {
  }

}

初期のコード　user-profile.component.html

<p>user-profile works!</p>

HTMLは上記の通りの状態で生成されます。

ここでは、ユーザー名と説明を表示するようにしたいので、Angularのデータバインディングを使用して、コンポーネントクラスのプロパティをテンプレートにバインドします。

<div class="user-profile">
  <h2>{{ userName }}</h2>
  <p>{{ userDescription }}</p>
</div>

参考　divタグ / h2タグ /pタグ

初期のコード　user-profile.component.css

/* ここにスタイルを追加します */

CSSファイルには上記のように何も書かれていないのが初期状態です。ユーザープロフィールの見た目を整えるために以下のように編集します。

.user-profile {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

h2 {
  color: #333;
}

p {
  color: #666;
}

これで、UserProfileComponentはユーザー名と説明を表示する簡単なUIを持つようになりました。コンポーネントクラスでデータを管理し、それをテンプレートにバインドして表示し、CSSでスタイリングを行う基本的なフローを理解することができました。

このプロセスは、Angularアプリケーションのほぼすべてのコンポーネントで共通していますので、あなたが作成したい機能に応じてコードを書き替えてください。

最後に、作成したコンポーネントを利用する方法です。

ステップ3: コンポーネントの使用

新しく生成したコンポーネントは、他のコンポーネントのテンプレート内で使用できます。コンポーネントのセレクター（@Componentデコレーター内で定義されている）をHTMLタグとして追加することで、そのコンポーネントを呼び出せます。

例えば、app-my-new-componentというセレクターを持つコンポーネントがある場合、別のコンポーネントのテンプレート内で以下のように使用できます。

<app-my-new-component></app-my-new-component>

これで、アプリケーションに新しい機能や要素を追加するためのコンポーネントを簡単に生成・統合することができます。効果的なコンポーネント設計には、再利用可能で責任範囲が明確なコンポーネントを作成することが重要です。

以前は「AngularJS」という名称でしたが、バージョン2から大幅に作りが変わり、単に「Angular」と呼ばれています（バージョン2以降をまとめてAngularと呼ぶことが多いです）。

このページではAngularとは何か？（どのような考え方で、どのような仕組みでWebアプリケーションを生成していくのか？）を平易な言葉でわかりやすく解説していきます。

Angularとは？

Angularとはシングルページアプリケーション（SPA）を構築するためのオープンソースのフロントエンドWebアプリケーションフレームワークです。TypeScript（TypeScriptとは？）で書かれており、アプリケーションのスケールに関わらず、構造化された方法でコードを管理し、拡張することができる点が特徴です。

ポイント　なぜAngularを使うの？

• 大規模開発に強い：複数人での開発や大規模プロジェクトでも、コードを整理しやすい仕組みが整っている。
• 型のサポート（TypeScript）：AngularはTypeScriptが標準なので、型によってバグを早期に発見しやすく、開発効率を高められる。
• 豊富なツールとエコシステム：CLI（Command Line Interface）のサポートや、テストを含むさまざまな開発フローが整備されてる。

Angularのプロジェクトは、特定のディレクトリ構造とファイルセットで構成されています。このディレクトリ構造といくつかのファイルが最初にAngularを理解するうえで非常に重要なので、初めに基本的なディレクトリ構成・ファイルの種類、およびそれらの関係性について説明します。

Angularの基本的なディレクトリ構造

プロジェクトルート
│
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── {other components}/
│   │       ├── {component}.component.ts
│   │       ├── {component}.component.html
│   │       └── {component}.component.css
│   │
│   ├── assets/
│   │   └── {static files like images, fonts, etc.}
│   │
│   └── environments/
│       ├── environment.ts
│       └── environment.prod.ts
│
├── angular.json
└── package.json

プロジェクトルート

1. angular.json

• Angular CLIの設定ファイルです。
• プロジェクトのビルドやテスト、サーバーの起動などの挙動を、CLIがこのファイルをもとにコントロールします。
• 例えば、アセットの配置先やビルド設定の切り替えなど、Angular特有の設定がここに書かれています。

2. package.json

• Node.jsで管理されるパッケージやスクリプトの情報をまとめたファイルです。
• dependenciesやdevDependenciesの欄に、プロジェクトで利用するライブラリやツールが記載されています。
• Angularを動かすためのコマンド（たとえばng serve）も、内部的にはここに書かれたパッケージを読み込んで動きます。

src/ フォルダ

メインのソースコードを置くフォルダです。
Angularのアプリケーションは、基本的にこのsrc配下に書かれたものを読み込んで動きます。

なので、開発者は基本的にはこのsrcフォルダ配下のファイルを編集して（＝プログラミングして）システム構築をしていくことになります。

app/ フォルダ

• アプリの中心となるフォルダで、画面を構成するコンポーネントがまとめられています。
• app.component.ts/html/css
  • アプリのルート（メイン）コンポーネント。Angularのアプリを起動したとき、最初に画面表示に関わるパーツです。
  • .ts → コンポーネントのロジック（クラスやメソッド）
  • .html → 画面表示のためのテンプレート
  • .css → 見た目をデザインするスタイルシート
• {other components}/
  • 追加で作成したコンポーネントが入るディレクトリ。
  • それぞれ**.component.ts/html/css**の3つセットで構成され、1つの画面やパーツを表現します。
  • 例: ログインフォーム用のコンポーネント、ユーザー一覧コンポーネントなど。
  • .tsファイルには「@Componentデコレーター」が付いたクラスが書かれ、ビュー(.html)やスタイル(.css)を紐づけます。

ポイント　ファイルの種類と内容

assets/ フォルダ

• 画像やフォントなどの静的ファイルを置く場所。
• ビルド時には自動的に成果物に含まれ、アプリ内で/assets/～のようなパスで参照できます。

environments/ フォルダ

• Angularアプリで使われる設定情報を環境別に分けて管理するためのフォルダ。
• environment.ts：通常の開発・テスト用設定。
• environment.prod.ts：本番リリース用の設定。
• 例）APIのエンドポイントや、APIキーなどを環境によって切り替えたいときに利用します。

この構造は、あくまでもAngularプロジェクトの基本的な骨格を示したもので、実際のプロジェクトでは追加のファイルやディレクトリが存在します。規模が大きくなるにつれ、ディレクトリの構造も大きくなっていきますが、とりあえずここではAngularの概要・骨格を明確にしていくために基本的な構造としての説明しておきます。

なんとなくの構造をみたところで、まずはAngular理解の最初のポイント「コンポーネント」について解説しておきます。

Angular：コンポーネントとは？

Angularのキモとなるのがコンポーネントです。コンポーネントは、アプリケーションを構成する部品を指します。
HTMLテンプレート・TypeScriptクラス・CSSスタイルの3つが基本セットとなり、これらがまとまって1つのコンポーネントとして機能します。

1. TypeScriptファイル（例: app.component.ts）
   • コンポーネントの振る舞い（ロジック）を定義するクラス。
   • @Componentデコレーターを使って、テンプレートやスタイルなどを紐づけます。
2. HTMLファイル（例: app.component.html）
   • コンポーネントのビュー（UI）を定義するテンプレート。
3. CSSファイル（例: app.component.css）
   • コンポーネントの見た目（デザイン）を定義するスタイルシート。

ここでは、以下のようなページを作ると想定して、それぞれの役割を解説していきます。

これを作るために「トップページ用のコンポーネント」を用意するイメージです。
（実際のAngularアプリでは最初に生成される app.component がトップページの役割を担うことが多いです）

• 大きなタイトル「Welcome to My Website」
• 文章「ここでは素敵な情報をお届けします。」
• ボタンを押すとタイトルが変わる

TypeScriptクラス

TypeScriptクラスはコンポーネントのデータ（状態）とロジック（振る舞い）を担当する部分です。

簡単に言えばどんなデータを持つ？（例: タイトル文字列）ボタンが押されたら何をする？（例: タイトルを変える）などといった頭脳・司令塔の役割を果たします。

サンプルコード　app.component.ts のイメージ例

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',            // HTML上で <app-root> と書けば表示される
  templateUrl: './app.component.html', // 画面の骨組み（HTML）
  styleUrls: ['./app.component.css']   // 見た目（CSS）
})
export class AppComponent {
  title = 'Welcome to My Website'; 
  description = 'ここでは素敵な情報をお届けします。';

  changeTitle() {
    this.title = 'New Title! ようこそ！';
  }
}

基本構文ルール

TypeScriptクラスは@Componentデコレーターで修飾され、Angularに対してこれがコンポーネントであることを示します。このデコレーターは、セレクタ、テンプレートURL、スタイルURLなど、コンポーネントに関連するメタデータを指定します。

1. インポート文

Angularコアライブラリやその他必要なモジュール、コンポーネント、サービスなどから、必要な機能やデータ型をインポートします。

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

2. @Componentデコレーター

@Componentデコレーターは、クラスがAngularコンポーネントであることを示す役割を担います。また、コンポーネントのメタデータ（コンポーネントを識別するための名前・使用するテンプレートファイルのパス・およびコンポーネント専用のスタイルファイルのパス）が含まれます。

@Component({
  selector: 'app-root',            // HTML上で <app-root> と書けば表示される
  templateUrl: './app.component.html', // 画面の骨組み（HTML）
  styleUrls: ['./app.component.css']   // 見た目（CSS）
})

3. コンポーネントクラス

コンポーネントの振る舞いを定義するクラスです。title や description が、このコンポーネント（トップページ）のデータ。changeTitle() は、「ボタンをクリックしたらタイトルを変更する」ためのメソッドです。

export class AppComponent {
  title = 'Welcome to My Website'; 
  description = 'ここでは素敵な情報をお届けします。';

  changeTitle() {
    this.title = 'New Title! ようこそ！';
  }
}

テンプレート（HTML）

続いて、テンプレートについて。

• 画面の見た目の骨組みを記述するもの。
• さきほどの TypeScript ファイル（クラス）で定義した titleやdescription、changeTitle() を「使う場所」です。もっと言えば単なるHTMLファイルです。

サンプル　app.component.html のイメージ例

<!-- app.component.html -->
<h1>{{ title }}</h1>  <!-- {{ }} で TypeScriptのtitleを表示 -->
<p>{{ description }}</p>

<button (click)="changeTitle()">タイトルを変更</button>

• {{ title }} の部分が、AppComponent クラスの title プロパティを画面に差し込みます（データバインディング）。
• (click)="changeTitle()" は、ボタンがクリックされたときに changeTitle() メソッドを呼び出す設定。
• もしボタンを押したら、TypeScript側で title が更新されて、画面上のタイトルが変わります。

スタイル（CSS）

スタイルでは、コンポーネントの見た目を定義します。スタイルはコンポーネントにローカルに適用され、他のコンポーネントには影響を与えません。

サンプル　app.component.css のイメージ例

/* app.component.css */
h1 {
  color: navy;
  font-size: 2rem;
  margin-bottom: 10px;
}

button {
  background-color: orange;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  color: #fff;
}

button:hover {
  background-color: darkorange;
}

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

@Component({
  selector: 'app-user', // コンポーネントのセレクター
  templateUrl: './user.component.html', // テンプレートファイルへのパス
  styleUrls: ['./user.component.css'] // スタイルファイルへのパス
})
export class UserComponent {
  userName = 'John Doe'; // テンプレートで表示するためのユーザー名
}

<div class="user">
  User Name: {{ userName }}
</div>

.user {
  color: blue;
  font-weight: bold;
}

Angularの基本：モジュールとルートコンポーネント

ここまで学んできたように、Angularのコンポーネントは「HTML＋TypeScript＋CSS」の3つがセットになった“アプリの部品”です。

しかし、単体のコンポーネントだけではアプリ全体を構築できません。複数のコンポーネント同士をどうまとめるか？ そして、アプリを起動したときに最初に表示されるコンポーネントはどれなのか？ それらを管理・決定するのが モジュール（NgModule） と ルートコンポーネント です。ここでは、モジュールとルートコンポーネントについて説明しておきます。

モジュール（NgModule）

Angularでは、アプリを構成するコンポーネントやサービス、パイプなどをひとまとまりに管理する仕組みとして、モジュール（NgModule）が用意されています。

• いわば「アプリの基盤（土台）」。
• 「どんなコンポーネントを使うか」「どの外部ライブラリを読み込むか」を登録する場所です。

わかりやすくイメージすると・・・

• コンポーネント：おもちゃのブロック（赤・青・緑などの色や形を持つ小さなピース）。
• モジュール：ブロックを収納する整理箱（1つの箱には、同じシリーズのブロックをまとめて入れる）。

システムでの例：

• コンポーネント：フォームの「名前入力欄」や「送信ボタン」。
• モジュール：「ユーザー登録モジュール」として、フォーム全体＋登録処理ロジックを1つのまとまりとして管理。

2. AppModule（ルートモジュール）

Angularアプリを起動するとき、最初に読み込まれるモジュールがルートモジュール（Root Module）です。「アプリの起動に必要な設定」をすべて集めた“入り口”のような存在。

ルートモジュールは、「一番大きな箱」と考えるとわかりやすいです。この箱は、すべてのコンポーネントやモジュールを一元管理し、システム全体の「司令塔」として機能します。

1. コンポーネントを宣言（declarations）
2. 使いたい外部モジュールをインポート（imports）
3. アプリ起動時に使うコンポーネントを指定（bootstrap）
   …などを設定します。

// app.module.ts の例
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';  // ルートコンポーネント

@NgModule({
  declarations: [    // このアプリ内で使うコンポーネント等を登録
    AppComponent
  ],
  imports: [         // 他のモジュール(機能)を読み込む
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent] // 起動時に表示されるコンポーネントを指定
})
export class AppModule {}

なぜ「ルートモジュール」が必要なのか？

• Angularは複数のモジュールを組み合わせて大きなアプリを作れる仕組みですが、どこか一つ「最初に読み込む」モジュールが必要になります。
• ルートモジュールは、これらのまとめ役＆アプリのスタート地点として存在しているわけです。

ルートコンポーネント

1. アプリを立ち上げた瞬間に表示されるコンポーネント

通常、AppComponent（app.component.ts）が「ルートコンポーネント」の役割を担います。

• ユーザーがブラウザでページを開いたとき、真っ先に表示されるコンポーネントです。
• index.html 内の <app-root></app-root> タグに差し込まれる形で画面に描画されます。

// app.component.ts の例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',               // <app-root> で呼び出せる
  templateUrl: './app.component.html', // HTMLテンプレート
  styleUrls: ['./app.component.css']   // CSSスタイル
})
export class AppComponent {
  title = 'My Angular App';
}

• このクラスに記載したtitleなどのプロパティやメソッドが、「ルートページ」の表示や挙動を定義します。
• <app-root> タグを使うと、このコンポーネントが表示されます。

2. 他のコンポーネントを呼び出す“親”役

• ルートコンポーネントは、アプリ全体の“親”のような存在。
• 画面の上部にヘッダーを表示したり、各ページを切り替えるためのルーターを配置したりします。
• 実際の大規模アプリでは、ルートコンポーネントが子コンポーネントを呼び出し、さらにその下に孫コンポーネント…といった階層構造で画面を作り上げていきます。

Angularの基本：データバインディング（Data Binding）

最後に、データバインディングについて。これさえ押さえれば、Angularの全体像がなんとなく見えてくるはずです。

データバインディング（Data Binding）とは、コンポーネント(主にTypeScript側)で持っているデータや処理を、HTMLテンプレート側と自動的に同期させる仕組みのことです。

この仕組みのおかげで「変数の値を画面に表示する」「ボタンをクリックしたときに処理を実行し、画面を更新する」などがスムーズに行うことができるようになります。

なぜデータバインディングが重要なのか？

従来のWeb開発（例えばjQueryなど）であれば、

1. 値が変わったら、手動でDOMを更新する
2. クリックイベントを設定して、手動で値を書き換える
   …と、画面とデータを結びつけるために都度DOM操作を行う必要がありました。

Angularのデータバインディングでは、データが変われば画面も自動的に更新される、あるいは画面操作があればデータが自動的に変わるといった仕組みが用意されており、開発がシンプルになります。

データバインディングについては、別の記事で詳しく解説しています。併せてご覧ください。

Angular：データバインディングの基礎を1からわかりやすく

Angularのデータバインディングの基本から応用までをわかりやすく解説。補間、プロパティ、イベント、双方向バインディングの使い方とメリットを紹介。Web開発者必見。

it-biz.online

2025.01.14

まとめ — Angularのエッセンス

• コンポーネント＝アプリのパーツをHTMLテンプレート＋TypeScriptクラス＋CSSスタイルでまとめたもの。
• データバインディング＝コンポーネントのロジックと画面表示を効率よく結びつける仕組み。
• モジュール＝コンポーネントやサービスなどを整理・登録してアプリとしてまとめる入れ物。

アプリケーションのデータ（状態）とは、例えばログインしているユーザーのプロフィール情報だったり、ユーザーがログインしているかどうか・ユーザがショッピングカートに追加した商品の状態などが該当します。NgRxを使うと、この「データの変化」をきちんと管理しやすくなり、大きなアプリケーションでもデータの流れを追いやすくなります。

NgRxはアプリケーションのデータを効率的に管理するための道具箱のようなものです。NgRxを利用することで、アプリケーションが複雑になっても、データの管理を適切に行うことでバグを減らし、開発をスムーズに進めることができるようになります。

このページではそもそも状態管理ライブラリって何？なぜ状態管理が重要なの？NgRxはどのように利用するの？という疑問をお持ちの方向けに１からわかりやすく解説します。

「状態管理」はなぜ重要か

まず初めになぜ「状態管理が重要なのか？」について説明します。結論から言えば、状態管理はアプリの一貫性・リアルタイム性を実現するため、また開発者にとってはバグの発見と修正を早くすることを可能にするという点で重要だと言えます。

具体的に簡単なソーシャルメディアアプリを例にとってその重要性を考えていきたいと思います。

1. ユーザーの投稿リストの例

アプリにログインすると、友達やフォローしている人たちの最新の投稿がフィードに表示される機能の場合。まず、ここでの「投稿リスト」が１つの状態管理です（ユーザの友達・フォローしている人などによって状態が変わるので）。

ユーザーが新たに投稿を行うと、その投稿はリストの最上部に追加され、他のユーザーが投稿をするたびに、フィードがリアルタイムで更新されます。ログインするユーザによって何を表示するのか？（＝表示すべき投稿の内容）を管理する仕組みが重要になります。

2. 「いいね！」やコメントの例

投稿に対して「いいね！」をするかコメントをすると、その情報を即座に投稿の状態に反映する機能を考えてみましょう。たとえば、あなたがある投稿に「いいね！」をした場合、その「いいね！」の数が更新され、他の人がその投稿を見たときにもその更新が反映されているべきです。この「いいね！」やコメントも、１つの状態管理です。

3. 通知システム

誰かがあなたの投稿に「いいね！」をしたり、コメントをしたりすると、通知が届きます。この通知もまた、アプリの状態の一部であり、リアルタイムで更新される必要があります。

また、考えてみれば当たり前のことですが、同じアプリを異なるデバイスで開いたとき（たとえばスマホとタブレット）、または同じデバイスでも異なる画面では（たとえばフィード画面とプロフィール画面）、ユーザーに対して一貫した情報（投稿、コメント、いいねの数）を表示する必要があります。もし、状態管理がしっかりしていなければ、これらの情報を一元的に更新し、どこからアクセスしても同じ情報を見ることはできなくなってしまいます。

このように、状態管理は特に複雑なWebアプリケーションにおいて非常に重要な役割を担います。もし、状態管理が適切になされていなければ、ユーザのプロフィールが同時にログインしている他のユーザから参照できてしまったり、自分の投稿が他の人から見られなくなってしまったり・・・というような弊害が出てきます。

この状態管理をしやすくするためのAngularのツールの１つがNgRxです。

NgRxを使った状態管理の仕組み

NgRxを使った状態管理の仕組みを解説します。結論から言うと、NgRxでは以下４つの概念で１つの状態を管理しています。

ポイント　NgRxの4つの主要な部品

1. ストア（Store）
   • アプリのデータ（状態）が全部入っている大きな箱のようなもの。アプリのどこからでもこの箱の中身を見ることができ、必要なデータを取り出したり、新しいデータを追加したりすることができます。
2. アクション（Actions）
   • ユーザーが何か行動を起こしたとき（例えば、新しい投稿をする、コメントをする、いいね！をするなど）、その行動をアプリに伝えるメッセージです。このメッセージは「何をしたいのか」という情報を伝えます。
3. リデューサー（Reducers）
   • アクションからメッセージが来たときに「ストアのデータをどう変えるか」を決めるルールブックです。例えば、「新しい投稿アクション」が来たら、「投稿リストに新しい投稿を追加する」といった具体的な指示が含まれます。
4. エフェクト（Effects）
   • アプリの外の世界（サーバーやデータベースなど）と通信する必要があるときに使います。例えば、新しい投稿をサーバーに保存する、サーバーから最新の投稿リストを取得するといった場合です。エフェクトは、これらの操作が完了したときに、その結果をアプリに伝える新しいアクションを発行します。

実際のアプリを例にその流れを大まかに説明すると、ユーザーが新しい投稿を作成するとき「新しい投稿アクション」が発行される→このアクションはリデューサーによって処理され、ストアの「投稿リスト」データが新しい投稿で更新される→エフェクトがこのアクションを検知し、新しい投稿をサーバーに保存するための処理を行う、というような流れ。

つまり、このような仕組みでNgRxはアプリのデータ（状態）の変更を一元管理し、複雑なアプリケーションでもデータの流れを追跡しやすく、かつ効率的に非同期処理を管理します。

上記の図はNgRx理解の最重要ポイントです。

NgRxの実装

ここからは、上記の基本知識をさらに深めるため、実際にAngularでNgRxライブラリを用いたコードを記述していきたいと思います。

なんといっても、実装ができてなんぼの世界なので、１個１個丁寧に理解しておきましょう。

Store（ストア）のセットアップ

まず、アプリケーションのルートモジュールにNgRxストアをセットアップします。ストアは、アプリケーションの状態を保持するための容器です。これを設定することで、アプリケーション全体で状態を一貫性を持って管理できるようになります。

ステップ1: NgRxモジュールのインストール

まず、プロジェクトにNgRxをインストールする必要があります。コマンドラインまたはターミナルで以下のコマンドを実行して、NgRxをプロジェクトに追加します。

yarn add @ngrx/store

「NgRxをインストールする」というのは、実際には「NgRxのライブラリを自分のプロジェクトに追加する」という意味です。ライブラリとは、あらかじめ書かれたコードのセットで、特定の機能を提供するものです。

ステップ2: アプリケーションモジュールの設定

NgRxのストアをセットアップするためには、アプリケーションのルートモジュール（AppModule）にStoreModuleをインポートし、そのforRootメソッドを使ってストアを構成します。ここでは、まだ具体的なリデューサーを定義していないので、単にストアをセットアップする基本的なステップを踏みます。

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';

@NgModule({
  imports: [
    // ...他のモジュールのインポート
    StoreModule.forRoot({}, {}) // ここで空のリデューサーマップと構成オプションを指定
  ],
  // ...他のNgModuleメタデータ
})
export class AppModule { }

↑のコードでは、forRootメソッドに空のオブジェクトを2つ渡しています。１つ目の空のオブジェクトは、アプリケーションの状態を管理するリデューサーの関数を指定するのですが、現時点ではリデューサーがまだないため空にしています。

Actions（アクション）の定義

アクションは、アプリケーションで何かが起きたことを伝えるメッセージのようなものです。例えば、「ログインボタンがクリックされた」「商品がカートに追加された」といったユーザーの操作や、アプリケーションの状態変化を示します。

早速Actions（アクション）の定義をしていきましょう。

ステップ1: アクションの目的を決める

まず、どんな操作やイベントに対してアクションが必要かを考えます。例えば、ユーザー認証なら「ログイン実行」「ログイン成功」「ログイン失敗」が考えられます。

ステップ2: アクションファイルを作成する

src/app/actions ディレクトリに、機能ごとに分かれたアクションファイル（例：auth.actions.ts）を作成します。一応ディレクトリはどこに作成しても良いのですが、１つのディレクトリにアクションファイルを集めておくのがよく見かける管理方法の１つです。

ステップ3: createActionを使ってアクションを定義する

@ngrx/storeでは、createAction関数を利用してアクションを定義します。まず、この関数を使えるようにするために、@ngrx/storeからcreateActionをインポートします。

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

次に、createAction関数を使ってアクションを定義。この関数には少なくとも1つ、アクションの種類を示す文字列：アクションタイプを渡します。アクションタイプ（Action Type）は、NgRxなどの状態管理ライブラリにおいて、アクションを一意に識別するための文字列です。

export const loginStart = createAction('[Auth] Login Start');

ステップ4: 必要に応じてペイロードを定義

アクションに追加のデータ（ペイロード）を含めたい場合は、props関数を使ってその形状を定義します。

import { createAction, props } from '@ngrx/store';

export const loginStart = createAction(
  '[Auth] Login Start',
  props<{ username: string; password: string }>()
);

ステップ5: アクションをエクスポートする

定義したアクションは、他のファイルから使えるようにエクスポートします。これで、アクションをディスパッチする準備が整います。

まとめると以下のような感じですね。

import { createAction, props } from '@ngrx/store';

// ユーザーログインのアクション定義
export const loginStart = createAction(
  '[Auth] Login Start',
  props<{ username: string; password: string }>()
);

// ログイン成功時のアクション定義
export const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ userId: string; token: string }>()
);

// ログイン失敗時のアクション定義
export const loginFailure = createAction(
  '[Auth] Login Failure',
  props<{ error: string }>()
);

ちなみに、上記のコードを簡単に説明すると以下の通りになります。

• loginStart
  • ユーザーがログインを試みる際にディスパッチされ、ユーザー名とパスワードをペイロードとして含みます。
• loginSuccess
  • ログインプロセスが成功した際にディスパッチされ、ユーザーIDと認証トークンをペイロードとして含みます。
• loginFailure
  • ログインが失敗した際にディスパッチされ、エラーメッセージをペイロードとして含みます。

このようにアクションを定義することで、アプリケーションの状態管理ロジックがどのようなイベントに反応するべきか、そしてそれに応じてどのような状態変化を適用するかを明確にできます。

Reducers（リデューサー）の作成

リデューサーは、アクションが発生したときにアプリケーションの状態をどのように変更するかを定義する関数です。ざっくり言えば「今の状態とアクションを受け取って、新しい状態を返す」という役割を担います。

ステップ1: 状態の形状を定義する

まず、管理したいデータ（状態）の形状を決めます。例えば、認証状態なら、ユーザー情報やログイン状態を含むオブジェクトになるでしょう。

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
}

参考　TypeScriptのインターフェースとは？

ステップ2: 初期状態を定義する

次に、アプリケーションが最初に起動したときの状態（初期状態）を定義します。

const initialState: AuthState = {
  user: null,
  isAuthenticated: false
};

ステップ3: リデューサー関数を作成する

リデューサー関数を作成し、アクションタイプに応じて状態を更新するロジックを書きます。

function authReducer(state: AuthState = initialState, action: Action): AuthState {
  switch (action.type) {
    case '[Auth] Login Success':
      return {
        ...state,
        user: action.payload.user,
        isAuthenticated: true
      };
    // 他のアクションタイプに対する処理
    default:
      return state;
  }
}

この例では、[Auth] Login Successアクションが発生した場合に、ユーザー情報を更新し、isAuthenticatedをtrueに設定しています。

先ほど定義したアクションファイルと見比べてみましょう。以下で定義したアクションと、今回定義したリデューサーがどのように対応しているか？にポイントを置きながら。

import { createAction, props } from '@ngrx/store';

// ユーザーログインのアクション定義
export const loginStart = createAction(
  '[Auth] Login Start',
  props<{ username: string; password: string }>()
);

// ログイン成功時のアクション定義
export const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ userId: string; token: string }>()
);

// ログイン失敗時のアクション定義
export const loginFailure = createAction(
  '[Auth] Login Failure',
  props<{ error: string }>()
);

ステップ4: ストアへのリデューサーの登録

リデューサーが準備できたら、アプリケーションの状態管理のためにNgRxストアに登録します。これは通常、アプリケーションのルートモジュール（例：AppModule）で行います。

import { StoreModule } from '@ngrx/store';
import { authReducer } from './auth.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ auth: authReducer }),
    // 他のモジュールのインポート
  ],
  // その他のNgModuleメタデータ
})
export class AppModule {}

このステップを通じて、アクションがディスパッチされたときにリデューサーが呼び出され、アプリケーションの状態が適切に更新されるようになります。コンポーネントやサービスからは、アクションをディスパッチすることで、リデューサーによる状態の変更を間接的に行うことができます。

リデューサーの作成方法/細かい構文ルールは以下でも解説しております。

【Angular/NgRx】createReducer の使い方/コツを１分で

アプリケーションの状態管理において中心的な役割を果たすリデューサーの概念と、NgRxのcreateReducerを用いたリデューサーの簡単で効率的な作成方法を初心者向けに解説します。具体的なサンプルコード付きで、リデューサーの基礎から学べます。

it-biz.online

2024.03.27

Effects（エフェクト）の実装

エフェクトは、アプリケーションの外部とのやりとり（例えば、データベースへの問い合わせや外部APIの呼び出し）を管理するための仕組みです。エフェクトを使うことで、ユーザーの操作やシステムのイベントが発生したときに、それに応じて必要な副作用（外部との通信など）を実行し、その結果を元にアプリケーションの状態を更新します。

アクションが「何かをしてほしい」という要求であると考えると、エフェクトはその要求に対して「では、これをしましょう」と応答する役割を持ちます。その結果を元にまた別のアクションを起こして、アプリケーションに知らせるのがエフェクトです。

ステップ 4.1: エフェクト用のモジュールをインストール

まず、NgRxエフェクトを使用するために必要なモジュールをインストールします。yarnを使用して、プロジェクトに@ngrx/effectsを追加します。

yarn add @ngrx/effects

ステップ 4.2: エフェクトクラスを作成

エフェクトクラスを作成します。

// auth.effects.ts
import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { AuthService } from '../services/auth.service';
import * as AuthActions from './auth.actions';

@Injectable()
export class AuthEffects {
  constructor(
    private actions$: Actions,
    private authService: AuthService
  ) {}
}

ステップ3: エフェクトを定義

ログインアクションをリッスン（＝監視）し、成功または失敗の結果をもとに新しいアクションをディスパッチするエフェクトを定義します。

login$ = createEffect(() =>
  this.actions$.pipe(
    ofType(AuthActions.loginStart),
    mergeMap(action =>
      this.authService.login(action.username, action.password).pipe(
        map(user => AuthActions.loginSuccess({ user })),
        catchError(error => of(AuthActions.loginFailure({ error })))
      )
    )
  )
);

ステップ4: AppModuleにエフェクトを登録

最後に、作成したエフェクトをアプリケーションに登録します。これには、AppModuleにEffectsModule.forRoot([])を追加し、その配列内にエフェクトクラスを指定します。

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './auth.effects';

@NgModule({
  imports: [
    // 他のモジュール
    EffectsModule.forRoot([AuthEffects]),
  ],
})
export class AppModule {}

以上でエフェクトの実装は完了です。

セレクタの使用/コンポーネントとの統合

ここからは、定義したアクションやストアなどを実際にアプリケーションの中で「用いるステップ」に関する解説となります。これらのステップは、NgRxを用いた状態管理の流れの中で、状態の読み取りや更新を行うための実践的な部分です。

NgRxとコンポーネントを統合する方法を解説して本ページの解説を終えます。

Selector（セレクタ）の使用

セレクタは、アプリケーションの状態（State）の中から、特定の情報を取り出すためのツールです。ある意味で「状態のクエリ」のようなものと考えることができます。例えば、アプリ全体の状態が本棚のようなものだとしたら、セレクタはその棚から読みたい本を選び出す役割を持っています。

セレクタの作り方

まず、アプリの状態（データ）の中から何を取り出したいのかを決めます。例えば、「ユーザーの名前」や「商品リスト」などです。次に、そのデータを取り出すためのセレクタ関数を作ります。NgRxにはcreateSelectorという便利な関数があり、これを使ってセレクタを作ることができます。

import { createSelector } from '@ngrx/store';

// 全体の状態からユーザー部分の状態を取り出す
const selectUserState = (state) => state.user;

// ユーザー部分の状態から名前だけを取り出す
export const selectUserName = createSelector(
  selectUserState,
  (user) => user.name
);

セレクタの使い方

セレクタができたら、コンポーネントでそれを使ってデータを取り出します。コンポーネントでは、selectメソッドを通じてストアから特定の状態を選択するためにセレクタを使用します。これにより、必要なデータのみを効率的に取得できます。

count$ = this.store.select(selectFeatureCount);

次に、コンポーネントからユーザーの操作やイベントに応じてアクションをストアにディスパッチします。これにより、アプリケーションの状態を更新する流れが始まります。

onLogin(username: string, password: string) {
  this.store.dispatch(login({ username, password }));
}

最後に、コンポーネントでストアを利用するために、まずコンストラクタ内でストアを注入します。以下は、ストアと統合されたコンポーネントの例です。

@Component({
  selector: 'app-my-component',
  template: `
    <div>Count: {{ count$ | async }}</div>
    <button (click)="onLogin('username', 'password')">Login</button>
  `,
})
export class MyComponent {
  count$ = this.store.select(selectFeatureCount);

  constructor(private store: Store<AppState>) {}

  onLogin(username: string, password: string) {
    this.store.dispatch(login({ username, password }));
  }
}

ここで言う「状態」とは、アプリが覚えておくべき全ての情報（例：ユーザー情報、ショッピングカートの内容など）のことで、アプリで何か操作をする（例：ボタンをクリックする、何かを追加する等）とき、その操作に応じて状態を「どのように変えるか」をリデューサーが決めます。

Reducer：リデューサーをもっとざっくりと説明すると「このアクションが起こったら、こんなふうに状態を変えてね」というルールを作るためのツールのようなものです。

このページでは、NgRxライブラリの「リデューサー」に焦点を当て、createReducer関数の使い方を分かりやすく解説します。

createReducer

createReducerは、リデューサーを作るための便利なツールです。このツールを使って、アプリの状態をどのように更新するか、というルールを設定することができます。

ポイント　createReducer でリデューサーを作るときのステップ

1. 初期状態を決める
   • 最初に、この状態が持つ情報が何もないとき（つまり、アプリが起動したてのとき）は、どんな値になっているかを決めます。これが「初期状態」。
2. アクションに応じて状態を変えるルールを書く
   • 次に、「もしこのアクションが起きたら、状態をこう変更して」というルールを記述。例えば、商品をカートに追加するアクションがあったら、カートの状態にその商品を追加する、というようなルールです。

具体的な構文ルールは以下の通り。

createReducer(
  initialState, // 1. 初期状態

  on(actionOne, (state, action) => { 
    // 2. アクション1が起きたときの新しい状態
  }),

  on(actionTwo, (state, action) => {
    // 3. アクション2が起きたときの新しい状態
  }),
  // ここに必要なだけアクションを追加できる
);

• initialState：これが状態のスタートラインです。アプリが始まったときのデフォルトの状態。
• on(action, (state, action) => {})：もしactionが起きたら、どう状態を変えるかを定義します。stateは変更前の状態、actionはそのアクションに関連する情報を持っています。

createReducerの例

以下の例では、カウンターアプリの状態を管理するリデューサーをcreateReducerで作成しています。incrementアクションが発生したらカウントを1増やし、decrementアクションが発生したら1減らす、というシンプルなルールを設定しています。

// createReducer関数,on関数を利用するために必要
import { createReducer, on } from '@ngrx/store';
// リデューサーが対応するアクションを識別できるようにアクション定義のインポートが必要
import { increment, decrement } from './counter.actions';


// 初期状態の設定
export const initialState = 0;

// リデューサーの定義
export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

incrementやdecrementというアクションは、actions.tsファイル内で宣言されているものです。アクションは、アプリケーション内で起こるイベントを表し、そのイベントが発生したときにリデューサーによって状態がどのように更新されるべきかを伝える役割を持っています。

以下で定義したincrementやdecrementというアクションを、reducers.ts 内で参照するような形です。

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

// カウンターを1増やすアクション
export const increment = createAction('[Counter Component] Increment');

// カウンターを1減らすアクション
export const decrement = createAction('[Counter Component] Decrement');

// リデューサーの定義
export const counterReducer = createReducer(
initialState,
on(increment, state => state + 1),
on(decrement, state => state - 1)
);

state => state + 1という記述は、リデューサー関数内での状態の更新方法を示しています。ここでのstateは、アプリケーションの現在の状態（この場合は、数値）を指します。この式は「現在の状態（state）に1を足した新しい状態を返す」という意味になります。

参考　JavaScript：アロー関数（=>）

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

// 初期状態
export const initialState = 0;

// リデューサーの作成
export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);