Angular での関数型プログラミング: インジェクトとリソースの探索

Angular の進化するエコシステムは、より機能的でリアクティブなプログラミング パラダイムに移行しています。 シグナル、リソース API、注入関数 などのツールを使用すると、開発者はアプリケーション ロジックを簡素化し、ボイラープレートを削減し、再利用性を高めることができます。

このブログ投稿では、Angular の最新機能により、開発者がクリーン、宣言的、リアクティブな方法で非同期ロジックを処理できるようにする方法について説明します。

Angular の機能の主な利点

1. 依存関係注入による再利用可能な関数: 注入関数を使用すると、開発者は Angular の依存関係注入システムとシームレスに統合するスタンドアロン関数を作成できます。これにより、ビジネス ロジックがコンポーネントやサービスから切り離され、アプリケーション全体で関数を再利用できるようになります。
2. 簡素化された状態管理: 読み込み、成功、エラーの状態を自動的に処理します。
3. 強化された反応性: 依存関係が変更されたときにデータを自動的に更新します。
4. 定型句の削減: 手動のサブスクリプションやライフサイクル管理ではなく、ロジックに重点を置きます。
5. 可読性の向上: 宣言型テンプレートにより、UI の状態遷移が理解しやすくなります。

---

ステップ 1: API とデータ モデル

この例では、REST API から投稿を取得します。各投稿は次の構造になっています:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

API のベース URL は InjectionToken 経由で提供されます:

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

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});

---

ステップ 2: データ取得関数を定義する

1. 従来の RxJS ベースのアプローチ

次の関数は、Angular の HttpClient を使用して ID によって投稿を取得します。

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<Post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<Post>(`${baseUrl}/posts/${postId}`);
}

コンポーネントでこの関数を使用するには、この関数をオブザーバブルにバインドし、非同期パイプを使用して結果を表示します。

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

制限事項

• 反応性の問題: シグナルの変更 (postId など) は、新しいフェッチを自動的にトリガーしません。
• 手動エラー処理: ロード状態とエラー状態のカスタム ロジックを作成する必要があります。

---

2. 信号ベースのリソース API アプローチ

リソース API は、反応性と状態の管理を簡素化します。これはリソース API を使用する関数です:

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<Post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<Post, { id: number }>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}

このアプローチ:

• postId が変更されるとデータを自動的にリロードします。
• 読み込み、エラー、成功の状態を宣言的に処理します。

コンポーネント内:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

---

リソース API の主な機能

宣言的な状態管理

リソース API は、読み込み、エラー、成功などの状態を自動的に管理します。これにより、カスタム フラグの必要性がなくなり、よりクリーンなテンプレートが確保されます。

反応性

リソース API はシグナルと緊密に統合されています。シグナルを変更すると、ローダー関数が自動的にトリガーされ、UI に常に最新のデータが反映されます。

エラー処理

エラーは .error() 経由で一元管理され、公開されるため、テンプレートでのエラー管理が簡素化されます。

自動ライフサイクル管理

依存関係 (postId など) が変更されると、API は進行中のリクエストをキャンセルし、競合状態や古いデータを防ぎます。

---

RxJS とリソース API: 簡単な比較

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (loading, error)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

---

結論

Angular の挿入関数とシグナルベースのリソース API は、非同期ロジックの簡素化における飛躍的な進歩を表しています。これらのツールを使用すると、開発者は次のことが可能になります。

1. ビジネス ロジックをコンポーネントから分離します。
2. Angular の依存関係注入システムとシームレスに統合する再利用可能な関数を作成します。
3. 状態管理のための定型文を排除します。
4. リアクティブな宣言型アプリケーションを簡単に構築します。

リソース API は特に、最新の Angular プロジェクトに最適であり、自動反応性と宣言的な状態処理を提供します。今すぐこれらの機能の探索を開始し、Angular 開発を次のレベルに引き上げてください!

以上がAngular での関数型プログラミング: インジェクトとリソースの探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。