Angular TIPS

Angular TIPS

Angular CLIで、Angularアプリのコードを自動生成するには?

2017年6月19日

Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成してみる。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 4以降。v4時点で執筆しました。

 別稿「TIPS:Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行」では、Angular CLIを利用して、Angularアプリの骨格を生成し、Angular CLI標準の開発用サーバー(webpack-dev-server)で起動する方法について解説しました。

 もっとも、Angular CLIの機能は新規アプリの骨格を作成したり開発用サーバーを立ち上げたりするだけではありません。アプリ開発を効率化するためのさまざまなコマンドを備えています。以下に、主なものをまとめます。

コマンド 概要
ng generate モジュール/コンポーネントなどの骨格を自動生成
ng build アプリをビルドし、/distフォルダーにビルドファイルを生成
ng test ユニットテストを実行
ng e2e E2Eテストを実行
ng get 指定されたキーの値をAngular CLIの設定(Config)ファイルから取得
ng set 指定されたキーと値でAngular CLIの設定ファイルを更新
表1 Angular CLIの主なコマンド

 この中でもよく利用するのがng generateコマンドです。コンポーネント/サービスなどのコードそのものを生成するだけでなく、モジュールにも自動で登録してくれるので、定型的な作業の手間をぐんと削減できます。

[構文]ng generateコマンド

ng generate type name [options]

  • type: 生成するコードの種類
  • name: クラス名
  • options: オプション

 生成できるコードの種類(コマンド引数type)と、対応する主なオプション(コマンド引数[options])もまとめておきます。カッコ内は、種類やオプションで利用できる別名(省略名)です。

種類(別名) 概要 概要
  オプション(別名)
module(m) モジュール
--flat サブフォルダーを生成するか
--spec テストコードを生成するか
--routing ルーティングモジュールを生成するか
component(c) コンポーネント
--flat サブフォルダーを生成するか
--inline-template(-it) インラインテンプレートを生成するか
--prefix セレクター(要素名)に付与するプレフィクス
--spec テストコードを生成するか
--skip-import モジュールへの登録をスキップするか
--module(-m) 登録先のモジュール
--export エクスポートするか(@NgModuleexportに登録するか)
directive(d) ディレクティブ
--flat サブフォルダーを生成するか
--prefix セレクター(要素/属性名)に付与するプレフィクス
--spec テストコードを生成するか
--skip-import モジュールへの登録をスキップするか
--module(-m) 登録先のモジュール
--export エクスポートするか(@NgModuleexportに登録するか)
service(s) サービス
--flat サブフォルダーを生成するか
--spec テストコードを生成するか
--module(-m) 登録先のモジュール
pipe(p) パイプ
--flat サブフォルダーを生成するか
--spec テストコードを生成するか
--skip-import モジュールへの登録をスキップするか
--module(-m) 登録先のモジュール
--export エクスポートするか(@NgModuleexportに登録するか)
guard(g) ガード
--flat サブフォルダーを生成するか
--spec テストコードを生成するか
--module(-m) 登録先のモジュール
class(cl) クラス(AngularのコンポーネントやモジュールなどではないTypeScriptの通常のクラス)
--spec テストコードを生成するか
interface(i) インターフェース
enum(e) 列挙体
表2 ng generateコマンドで生成できるコード(種類とその主なオプション)

 例えば、以下はArticleModuleモジュールを生成して、その配下にContentComponentコンポーネント(セレクターはwin-content)を作成する例です。

ターミナル
> cd cli-atips          # アプリケーションルートに移動
> ng generate module article
installing module
  create src\app\article\article.module.ts

> ng generate component content --prefix win --module article --flat
installing component
  create src\app\content.component.css
  create src\app\content.component.html
  create src\app\content.component.spec.ts
  create src\app\content.component.ts
  update src\app\app.module.ts
リスト1 新規にモジュール/コンポーネントを作成する例

 モジュール/コンポーネントは、デフォルトで、作成するモジュール/コンポーネントと同名のフォルダーを/src/appフォルダー配下に作成して、そのフォルダー配下に生成されたファイル群が配置されます。例えばArticleModuleであればarticleサブフォルダーが/src/appフォルダー配下に作成されたことが、リスト1では確認できます*1

  • *1 ディレクティブ/サービスなどは、/src/appフォルダー直下にファイルが作成されます。

 /src/appフォルダー配下に作成するには、--flatオプションを付与してください。例えばリスト1ではContentComponentの生成で--flatオプションを付与しているため、contentサブフォルダーは作成されずに、ファイル群が/src/appフォルダー直下に生成されたことが確認できます。

 コンポーネントの作成が完了した後、ArticleModuleモジュール(=生成された/src/app/article/article.module.tsファイル)を閲覧すると(リスト2)、確かにコンポーネントが登録されていることが確認できます。

article.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContentComponent } from '../content.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ContentComponent]
})
export class ArticleModule { }
リスト2 コンポーネントがモジュールに登録された

共通設定は設定ファイルに記載する

 --flat--prefixのようなオプションは、設定ファイルで宣言することで、個々のコマンドでいちいち明示する必要がなくなります。Angular CLIの設定ファイルは、アプリケーションルートの直下に.angular-cli.jsonという名前で用意されています。

 それぞれ以下の太字部分を編集してください。

.angular-cli.json
{
  ……中略……
  "apps": [
    {
      ……中略……
      "testTsconfig": "tsconfig.spec.json",
      // セレクターのプレフィックス
      "prefix": "win",
      "styles": [
        "styles.css"
      ],
      ……中略……
    }
  ],
  ……中略……
  "defaults": {
    "styleExt": "css",
    "component": {
      // サブフォルダーを作成しないか
      "flat": true
    }
  }
}
リスト3 Angular CLIの設定ファイルに

設定ファイルで指定できるキーは、「Angular CLI Config Schema」(英語)を参照してください。

 ここではコンポーネントの生成方法をdefaultscomponentsキーで設定していますが、同じようにdefaultsmoduledirectiveなどのキー配下で、モジュール、ディレクティブなどの生成オプションを指定することもできます。

処理対象:Azure CLI カテゴリ:基本
処理対象:設定(Config)ファイル カテゴリ:Azure CLI
処理対象:コマンド実行 カテゴリ:Azure CLI
API:ng generate|ng build|ng test|ng e2e|ng get|ng set カテゴリ:Azure CLI

※以下では、本稿の前後を合わせて5回分(第14回~第18回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

14. 文字列/配列から部分文字列/要素を抜き出すには?(slice)

JavaScriptのString/Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

15. Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行

新規Angularアプリの作成時にAngular CLIを使うと効率的だ。そのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、そのアプリを起動する方法を説明する。

16. 【現在、表示中】≫ Angular CLIで、Angularアプリのコードを自動生成するには?

Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成してみる。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介する。

17. イベントハンドラーを登録するには?(Event Binding)

要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。

18. フォームの入力値をコンポーネントと同期するには?(双方向バインディング)

テンプレート上のフォーム入力値とコンポーネントのプロパティ値を双方向にバインドするTwo-way Bindingのバインディング構文を説明し、その仕組みを紹介する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!