Angular の ng generate コマンド詳解

みじんこ きなこ

皆様こんにちは、あるいはこんばんは、みじんこきなこです。

CoWaASというサービスを鋭意開発中の私ですが、フロントエンドとしてAngularを使用しています。

Angularは公式マニュアルがしっかりしていて非常に良いのですが、しっかりしすぎていてng generateコマンド一つとっても何ができるか全容を把握するのに少し時間を要するので、自身のチートシート作成も兼ねて記事にします。

今回は、Gemini 1.5pro with Deep Researchさんに敲き台を作っていただきました。


はじめに

Angular は、Google によって開発された、フロントエンドフレームワークです。コンポーネントベースのアーキテクチャを採用し、大規模で複雑なウェブアプリケーションの開発に適しています。

Angular CLI (Command Line Interface) は、Angular アプリケーションの開発を支援する強力なツールであり、その中核をなすのが ng generate コマンドです。

ng generate コマンドは、schematic と呼ばれるテンプレートに基づいて、コンポーネント、サービス、モジュールなど、さまざまなコードを自動生成します。schematic を使用することで、コードスタイルや構造に一貫性を持たせ、保守性の高いプロジェクトを実現できます。

この記事では、Angular 19 の ng generate コマンドで使用できるすべてのオプションと schematic について、詳細な説明と生成されるものの解説、仕様サンプルコード付きで解説します。

ng generate コマンドの概要

ng generate コマンドは、Angular CLI で提供されるコード生成コマンドです。このコマンドを使用することで、Angular アプリケーションの開発に必要なさまざまなファイルを自動的に生成することができます。

ng generate コマンドの基本的な構文は以下のとおりです。

ng generate <schematic> <name> [options]

<schematic> は、生成するファイルの種類を指定します。例えば、コンポーネントを生成する場合は component、サービスを生成する場合は service を指定します。

<name> は、生成するファイルの設定を指定します。例えば、ファイル名やパス、テンプレートの形式などを指定することができます。

[options]は、ng generate コマンドで使用できるオプションを指定します。例えば、テストファイルを生成しない、既存のファイルを上書きする、モジュールに追加するなどのオプションを指定することができます。

ng generate で使用できる schematic 一覧

  • application

    • 新しい Angular アプリケーションを生成します。

  • app-shell

    • サーバーサイドレンダリング用のアプリケーションシェルを生成します。

  • component

    • 新しいコンポーネントを生成します。

  • enum

    • 新しい列挙型を生成します。

  • guard

    • 新しいガードを生成します。

  • interceptor

    • 新しいインターセプターを生成します。

  • interface

    • 新しいインターフェースを生成します。

  • module

    • 新しいモジュールを生成します。

  • pipe

    • 新しいパイプを生成します。

  • service

    • 新しいサービスを生成します。

  • serviceworker

    • サービスワーカーを生成します。

  • webworker

    • 新しい Web Worker を生成します。

  • environments

    • アプリケーションの環境設定ファイルを生成または更新します。

ng generate で使用できるオプション

ng generate コマンドでは、さまざまなオプションを指定することができます。

  • --dry-run

    • 実際にファイルを生成せずに、生成されるファイルの一覧を表示します。このオプションを使用することで、コマンドを実行する前に生成されるファイルを確認し、意図しない変更を防ぐことができます。

ng generate component my-component --dry-run

  • --force

    • 既存のファイルを上書きします。

ng generate component my-component --force

  • --skip-tests

    • テストファイルを生成しません。

ng generate component my-component --skip-tests

  • --minimal

    • spec ファイルを生成せずにコンポーネントを生成します。

ng generate component my-component --minimal

  • --flat

    • 現在のディレクトリにファイルを直接生成します。

ng generate component my-component --flat

  • --module

    • 生成するファイルを指定したモジュールに追加します。

ng generate component my-component --module=app.module.ts

  • --project

    • 生成するファイルのプロジェクトを指定します。

ng generate component my-component --project=my-project

ng generate で使用できる schematic 詳細

application

新しい Angular アプリケーションを生成します。

使用方法:

ng generate application my-app

生成されるファイル:

新しい Angular アプリケーションに必要なファイル一式が生成されます。主なファイルは以下のとおりです。

  • src/app/app.module.ts: アプリケーションのルートモジュール

  • src/app/app.component.ts: アプリケーションのルートコンポーネント

  • src/index.html: アプリケーションの HTML エントリポイント

  • angular.json: アプリケーションの設定ファイル

  • package.json: アプリケーションの依存関係を管理するファイル

ベストプラクティスと注意点:

  • アプリケーション名は、英小文字とハイフン (-) を使用して命名することを推奨します。

  • 生成されたアプリケーションは、ng serve コマンドでローカルサーバーを起動して動作確認することができます。

class

新しいクラスを生成します。

使用方法:

ng generate class my-class

生成されるファイル:

  • my-class.ts: 指定した名前のクラスを定義した TypeScript ファイル

サンプルコード:

// my-class.ts
export class MyClass {
  constructor(public name: string) { }  
}

ベストプラクティスと注意点:

  • クラス名は、PascalCase (単語の先頭を大文字にする) で命名することを推奨します。

  • クラスは、オブジェクト指向プログラミングの基本的な構成要素であり、データとメソッドをカプセル化するために使用されます。

component

新しいコンポーネントを生成します。コンポーネントは、Angular アプリケーションの UI を構成する基本的な要素です。HTML テンプレート、CSS スタイル、TypeScript クラスから構成され、再利用可能な UI 部品として機能します。

使用方法:

ng generate component my-component

生成されるファイル:

  • my-component.component.ts: コンポーネントの TypeScript クラス

  • my-component.component.html: コンポーネントの HTML テンプレート

  • my-component.component.css: コンポーネントの CSS スタイル

  • my-component.component.spec.ts: コンポーネントのテストファイル

サンプルコード:

// my-component.component.ts`  
import { Component } from '@angular/core';

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

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

ベストプラクティスと注意点:

  • コンポーネント名は、ケバブケース (英小文字とハイフン (-) を使用) で命名することを推奨します。

  • コンポーネントは、Angular アプリケーションの UI を構築するための基本的なビルディングブロックです。

  • @Component デコレータを使用して、コンポーネントのメタデータを定義します。

  • selector プロパティは、コンポーネントを HTML で使用するためのセレクタを指定します。

  • templateUrl プロパティは、コンポーネントの HTML テンプレートを指定します。

  • styleUrls プロパティは、コンポーネントの CSS スタイルを指定します。

使用例:

ユーザーリストを表示するコンポーネントを生成する場合、以下のようにコマンドを実行します。

ng generate component user-list

directive

新しいディレクティブを生成します。ディレクティブは、DOM 要素の外観や動作を変更するために使用されます。属性ディレクティブと構造ディレクティブの 2 種類があります。

使用方法:

ng generate directive my-directive

生成されるファイル:

  • my-directive.directive.ts: ディレクティブの TypeScript クラス

  • my-directive.directive.spec.ts: ディレクティブのテストファイル

サンプルコード:

// my-directive.directive.ts`  
import { Directive, ElementRef } from '@angular/core';

@Directive({ 
  selector: ''
})
export class MyDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

ベストプラクティスと注意点:

  • ディレクティブ名は、キャメルケース (先頭小文字、以降単語の先頭を大文字) で命名することを推奨します。

  • 属性ディレクティブは、DOM 要素の属性として使用されます。

  • 構造ディレクティブは、DOM 要素の構造を変更するために使用されます。

  • @Directive デコレータを使用して、ディレクティブのメタデータを定義します。

  • selector プロパティは、ディレクティブを HTML で使用するためのセレクタを指定します。

使用例:

要素にハイライト効果を追加する属性ディレクティブを生成する場合、以下のようにコマンドを実行します。

ng generate directive highlight

enum

新しい列挙型を生成します。

使用方法:

ng generate enum my-enum

生成されるファイル:

  • my-enum.ts: 指定した名前の列挙型を定義した TypeScript ファイル

サンプルコード:

// my-enum.ts
export enum MyEnum {
  Value1,  
  Value2,
  Value3
}

ベストプラクティスと注意点:

  • 列挙型名は、PascalCase で命名することを推奨します。

  • 列挙型は、関連する定数の集合を定義するために使用されます。

guard

新しいガードを生成します。ガードは、ルートへのアクセスを制御するために使用されます。

使用方法:

`ng generate guard my-guard`

生成されるファイル:

  • my-guard.guard.ts: ガードの TypeScript クラス

  • my-guard.guard.spec.ts: ガードのテストファイル

サンプルコード:

// my-guard.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})  
export class MyGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // ここでルートへのアクセスを許可するかどうかを判定するロジックを実装します。
    return true;
  }  
    
}

ベストプラクティスと注意点:

  • ガード名は、PascalCase で命名し、末尾に Guard を付けることを推奨します (例: AuthGuard)。

  • ガードは、CanActivate インターフェースを実装する必要があります。

  • canActivate メソッドは、ルートへのアクセスを許可するかどうかを判定します。

  • ガードは、認証、認可、ルートの保護などに使用されます。

使用例:

ログインユーザーのみがアクセスできるルートを保護するガードを生成する場合、以下のようにコマンドを実行します。

ng generate guard Auth

interface

新しいインターフェースを生成します。

使用方法:

ng generate interface my-interface

生成されるファイル:

  • my-interface.ts: 指定した名前のインターフェースを定義した TypeScript ファイル

サンプルコード:

// my-interface.ts
export interface MyInterface {
  name: string;
  age: number;
}

ベストプラクティスと注意点:

  • インターフェース名は、PascalCase で命名し、先頭に I を付けることを推奨します (例: IUser)。

  • インターフェースは、オブジェクトの構造を定義するために使用されます。

interceptor

新しいインターセプターを生成します。インターセプターは、HTTP リクエストとレスポンスに割り込んで処理を行うために使用されます。例えば、リクエストにヘッダーを追加したり、レスポンスのエラーを処理したりすることができます。

使用方法:

ng generate interceptor my-interceptor

生成されるファイル:

  • my-interceptor.interceptor.ts: インターセプターの TypeScript クラス

  • my-interceptor.interceptor.spec.ts: インターセプターのテストファイル

サンプルコード:

// my-interceptor.interceptor.ts`  
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // リクエストに認証ヘッダーを追加する例
    const authReq = request.clone({
      setHeaders: { Authorization: 'Bearer <token>' }
    });
    return next.handle(authReq);
  }  
}

ベストプラクティスと注意点:

  • インターセプター名は、PascalCase で命名し、末尾に Interceptor を付けることを推奨します (例: AuthInterceptor)。

  • インターセプターは、HttpInterceptor インターフェースを実装する必要があります。

  • intercept メソッドは、HTTP リクエストをインターセプトして処理を行います。

  • インターセプターは、認証、ロギング、エラー処理などに使用されます。

使用例:

すべての HTTP リクエストに認証ヘッダーを追加するインターセプターを生成する場合、以下のようにコマンドを実行します。

ng generate interceptor Auth

module

新しいモジュールを生成します。モジュールは、Angular アプリケーションを構成する単位です。コンポーネント、サービス、ディレクティブなどをグループ化し、アプリケーションの構造化を促進します。

使用方法:

ng generate module my-module

生成されるファイル:

  • my-module.module.ts: モジュールの TypeScript クラス

サンプルコード:

// my-module.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations:,
  imports:
})
export class MyModule { }

ベストプラクティスと注意点:

  • モジュール名は、PascalCase で命名し、末尾に Module を付けることを推奨します (例: UserModule)。

  • モジュールは、@NgModule デコレータを使用して定義します。

  • declarations プロパティは、モジュールに属するコンポーネント、ディレクティブ、パイプを宣言します。

  • imports プロパティは、モジュールが依存する他のモジュールをインポートします。

  • exports プロパティは、モジュールが外部に公開するコンポーネント、ディレクティブ、パイプを宣言します。

使用例:

ユーザー管理機能を扱うモジュールを生成する場合、以下のようにコマンドを実行します。

ng generate module user

pipe

新しいパイプを生成します。パイプは、データの表示形式を変更するために使用されます。例えば、日付を特定の形式で表示したり、数値を通貨記号付きで表示したりすることができます。

使用方法:

ng generate pipe my-pipe

生成されるファイル:

  • my-pipe.pipe.ts: パイプの TypeScript クラス

  • my-pipe.pipe.spec.ts: パイプのテストファイル

サンプルコード:

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

@Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown): unknown {
    // ここで値を変換するロジックを実装します。
    return value;
  }

}

ベストプラクティスと注意点:

  • パイプ名は、キャメルケースで命名することを推奨します。

  • パイプは、PipeTransform インターフェースを実装する必要があります。

  • transform メソッドは、値を変換するロジックを実装します。

  • パイプは、テンプレート式で | 記号を使用して適用します。

使用例:

日付を "yyyy年MM月dd日" の形式で表示するパイプを生成する場合、以下のようにコマンドを実行します。

ng generate pipe date-format

service

新しいサービスを生成します。サービスは、Angular アプリケーションでロジックをカプセル化するために使用されます。データの取得、処理、共有など、さまざまなタスクを実行することができます。

使用方法:

ng generate service my-service

生成されるファイル:

  • my-service.service.ts: サービスの TypeScript クラス

  • my-service.service.spec.ts: サービスのテストファイル

サンプルコード:

// my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {

  constructor() { }

  getData() {
    // ここでデータを取得するロジックを実装します。
    return 'data';
  }
}

ベストプラクティスと注意点:

  • サービス名は、キャメルケースで命名し、末尾に Service を付けることを推奨します (例: UserService)。

  • サービスは、@Injectable デコレータを使用して定義します。

  • providedIn: 'root' を指定することで、サービスをアプリケーション全体で利用可能にします。

  • サービスは、コンポーネントから依存性注入によって利用されます。

使用例:

ユーザーデータを取得するサービスを生成する場合、以下のようにコマンドを実行します。

ng generate service user

web-worker

新しい Web Worker を生成します。Web Worker は、バックグラウンドで JavaScript コードを実行するために使用されます。メインスレッドをブロックすることなく、CPU を集中的に使用するタスクを実行することができます。

使用方法:

ng generate web-worker my-worker

生成されるファイル:

  • my-worker.worker.ts: Web Worker の TypeScript クラス

サンプルコード:

// my-worker.worker.ts
/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

ベストプラクティスと注意点:

  • Web Worker 名は、キャメルケースで命名し、末尾に Worker を付けることを推奨します (例: DataProcessorWorker)。

  • Web Worker は、メインスレッドとは別のスレッドで実行されます。

  • addEventListener('message', ...) を使用して、メインスレッドからのメッセージを受信します。

  • postMessage(...) を使用して、メインスレッドにメッセージを送信します。

使用例:

大量のデータを処理する Web Worker を生成する場合、以下のようにコマンドを実行します。

ng generate web-worker data-processor

environments

Angular アプリケーションの環境設定ファイルを生成または更新します。環境設定ファイルは、開発環境、ステージング環境、本番環境など、異なる環境でアプリケーションを動作させるために使用されます。

使用方法:

ng generate environments

生成されるファイル:

  • src/environments/environment.ts: 開発環境の設定ファイル

  • src/environments/environment.prod.ts: 本番環境の設定ファイル

サンプルコード:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://my-api.com/api'
};

ベストプラクティスと注意点:

  • 環境設定ファイルは、src/environments ディレクトリに配置されます。

  • environment.ts はデフォルトの環境設定ファイルであり、開発環境で使用されます。

  • environment.prod.ts は本番環境用の環境設定ファイルです。

  • 環境変数を定義することで、異なる環境で異なる設定を使用することができます。

まとめ

Angular CLI の ng generate コマンドは、Angular アプリケーションの開発を効率化するための強力なツールです。

schematic を使用することで、コードの生成を自動化し、一貫性と保守性を向上させることができます。

この記事では、ng generate コマンドで使用できるすべてのオプションと schematic について解説しました。

これらのオプションと schematic を効果的に使用することで、Angular アプリケーションの開発をよりスムーズに進めることができます。

より詳細な情報については、Angular CLI の公式ドキュメントを参照してください。

いいなと思ったら応援しよう！