angular

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Angular でシングルページアプリケーション（SPA）を構築する
• Angular のコンポーネント、サービス、ディレクティブ、パイプを作成する
• ルーティング、遅延読み込み、ナビゲーションガードを実装する
• リアクティブフォームまたはテンプレート駆動フォームを扱う
• 依存性注入と Angular モジュールを使用する
• RxJS のオブザーバブルと async パイプを統合する
• Angular CLI プロジェクトをセットアップし、スキャフォールディングを生成する
• OnPush の変更検知でパフォーマンスを最適化する

このスキルの使用方法

ワークフロー

1. ユーザーの質問からリクエストの分野を特定します（コンポーネントの作成、ルーティング、フォーム、サービスなど）
2. 公式スタイルガイドに従って Angular のベストプラクティスを適用します
3. Angular の規約とデコレーターを使用して TypeScript コードを生成します
4. 解決策がコンパイルでき、依存性注入のパターンに従っていることを確認します

1. プロジェクトのセットアップ

# Create a new Angular project
ng new my-app --routing --style=scss

# Generate components and services
ng generate component features/user-list
ng generate service core/services/user

2. コンポーネントの例

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../../core/services/user.service';
import { User } from '../../core/models/user.model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent implements OnInit {
  users$!: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.users$ = this.userService.getUsers();
  }
}

3. HttpClient を使用したサービス

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private readonly apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}

4. 遅延読み込みを使用したルーティング

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'users',
    loadChildren: () =>
      import('./features/users/users.module').then(m => m.UsersModule)
  }
];

ベストプラクティス

• パフォーマンス向上のため、OnPush の変更検知と純粋パイプを使用します
• コードを Core、Shared、Feature モジュールに整理します
• コンストラクターインジェクションを優先し、シングルトンには providedIn: 'root' でサービスを登録します
• メモリーリークを防ぐため、オブザーバブルの購読を解除します（takeUntil または async パイプを使用します）
• 複雑なバリデーションが必要な場合は、リアクティブフォームを使用します
• 初期バンドルサイズを削減するため、Feature モジュールを遅延読み込みします

リソース

• 公式ドキュメント：https://angular.io/docs
• Angular CLI：https://angular.io/cli
• RxJS：https://rxjs.dev/

キーワード

angular, Angular CLI, コンポーネント, サービス, RxJS, 依存性注入, ルーティング, リアクティブフォーム, TypeScript, SPA, OnPush, 遅延読み込み, モジュール, ディレクティブ, パイプ