本記事は Angular Advent Calendar 2021 の11日目の記事です。
私は普段Symfonyを書いているPHPerですが、Angularを触る機会がありng generateコマンドに感動しました。
Angularの構文を書き慣れていない身としては、このコマンドに大変お世話になりました :pray:
（Symfonyのmakeコマンド みたいな感触でした。）
内容は初心者レベルです:beginner:

ng generateとは

https://angular.jp/cli/generate

componentやserviceを生成できるコマンドで、$ ng gでも実行可能です。

$ ng g --help
Generates and/or modifies files based on a schematic.
usage: ng generate <schematic> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults
    Disable interactive input prompts for options with a default.
  --dry-run (-d)
    Run through and reports activity without writing out results.
  --force (-f)
    Force overwriting of existing files.
  --help
    Shows a help message for this command in the console.
  --interactive
    Enable interactive input prompts.

Available Schematics:
  Collection "@schematics/angular" (default):
    app-shell
    application
    class
    component
    directive
    enum
    guard
    interceptor
    interface
    library
    module
    pipe
    resolver
    service
    service-worker
    web-worker

ng generate component

$ ng newのときに”Sass”を選択したので”.sass”のスタイルシートが生成されます。

$ ng g component hoge
CREATE src/app/hoge/hoge.component.sass (0 bytes)
CREATE src/app/hoge/hoge.component.html (19 bytes)
CREATE src/app/hoge/hoge.component.spec.ts (612 bytes)
CREATE src/app/hoge/hoge.component.ts (268 bytes)
UPDATE src/app/app.module.ts (467 bytes)

src/app/hoge/hoge.component.ts

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

@Component({
  selector: 'app-hoge',
  templateUrl: './hoge.component.html',
  styleUrls: ['./hoge.component.sass']
})
export class HogeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

src/app/app.module.ts

+import { HogeComponent } from './hoge/hoge.component';

 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HogeComponent
   ],

オプション--inline-style --inline-templateをつけると、sass(style)やhtmlを別ファイルで持たないcomponentの作成も可能です。

$ ng g component hogehoge --inline-style --inline-template
CREATE src/app/hogehoge/hogehoge.component.spec.ts (640 bytes)
CREATE src/app/hogehoge/hogehoge.component.ts (271 bytes)
UPDATE src/app/app.module.ts (567 bytes)

src/app/hogehoge/hogehoge.component.ts

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

@Component({
  selector: 'app-hogehoge',
  template: `
    <p>
      hogehoge works!
    </p>
  `,
  styles: [
  ]
})
export class HogehogeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

ng generate service

$ ng g service foo
CREATE src/app/foo.service.spec.ts (342 bytes)
CREATE src/app/foo.service.ts (132 bytes)

src/app/foo.service.ts

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

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

  constructor() { }
}

ng generate enum

$ ng g enum bar
CREATE src/app/bar.ts (20 bytes)

src/app/bar.ts

export enum Bar {
}

ng generate interface

$ ng g interface fuga
CREATE src/app/fuga.ts (26 bytes)

src/app/fuga.ts

export interface Fuga {
}

ng generate class

$ ng g class baz
CREATE src/app/baz.spec.ts (142 bytes)
CREATE src/app/baz.ts (21 bytes)

src/app/baz.ts

export class Baz {
}

生成されたコードから学んだこと :memo:

  • export: TypeScriptの機能で、”export class HogeComponent” とする事で AngularのDIコンテナからコンポーネントのクラスを参照する事ができます。
  • constructorとngInit: どちらもコンポーネントの初期化時に実行されます。
    • constructor: クラスの生成時に実行されます。
    • ngOnInit: Angularのライフサイクルイベントとしてデータバインドの評価後に実行されます。データバインドの値に基づくフェッチ処理などは”ngOnInit”で実行するほうが安全です。