Angular CLIの便利なコマンド
Angular CLIでは、プロジェクトの生成や実行以外に、開発で便利に利用できるさまざまな機能を提供します。
モジュールやコンポーネントの自動生成
Angularアプリの構成要素であるモジュールやコンポーネントを、「ng generate」コマンドで自動的に追加できます。
ルートモジュール（appモジュール）の配下にsubmod1モジュールを追加するには、リスト8のコマンドを実行します。
ng generate module submod1 --module app
ここで「--module app」は、追加するsubmod1モジュールをappモジュールの配下にするオプションです。このように実行すると、app/submod1/submod1.module.tsファイルが生成されると同時に、appモジュールのモジュール定義ファイル（app.modules.ts）に、submod1モジュールを参照する記述が自動的に追加されます。
import { Submod1Module } from './submod1/submod1.module';
@NgModule({
（略）
imports: [
BrowserModule,
Submod1Module
],
})
同様にしてコンポーネントも追加できます。submod1モジュール配下に、subcomp1コンポーネントを追加するには、リスト10のようにします。
ng generate component submod1/subcomp1
この場合、submod1/subcomp1フォルダーにコンポーネントのファイルが生成されると同時に、submod1のモジュール定義ファイルにコンポーネントを参照する記述が自動的に追加されます。
import { Subcomp1Component } from './subcomp1/subcomp1.component';
@NgModule({
（略）
declarations: [Subcomp1Component]
})
なお、コマンド実行時に「--dry-run」オプションを指定すると、実際の処理は行わず、追加・変更されるファイルを事前に確認できます。
ng generateコマンドを利用して、サービスやディレクティブなど、Angularアプリを構成するさまざまな要素を追加できます。詳細は公式ドキュメントを参照してください。
実装の形式チェック
「ng lint」コマンドを利用すると、TypeScriptの静的解析ツールTSLintで、ソースコードの望ましくない記法をチェックできます。
例えば、リスト12のTypeScriptコードには、TSLintが望ましくないと指摘する実装が含まれています。
export class AppComponent {
// Lint: シングルクォートを利用するべき
title = "app";
// Lint: 1行は140文字以内であるべき
longValue = '<長い文字列、ここでは省略>';
//コメント <- Lint: コメント記号の後は空白を入れるべき
func1() {
alert('hello');
}
}
リスト12を含むAngular CLIのプロジェクトで「ng lint」コマンドを実行すると、TSLintが望ましくない実装をチェックして、図7のように指摘してくれます。
TSLintの指摘内容は、tslint.jsonファイルでカスタマイズできます。図7の指摘に関連する設定を、リスト13に抜粋します。trueをfalseに変更すると、対応するチェックを行わなくなります。
"comment-format": [ // コメントフォーマット true, // チェックする "check-space" // 空白を入れるべき ], "max-line-length": [ // 1行の最大文字数 true, // チェックする 140 // 140文字 ], "quotemark": [ // クォート文字列 true, // チェックする "single" // シングルクォート ],
tslint.jsonの設定詳細は、公式サイトを参照してください。
単体テスト、E2Eテスト
Angular CLIのプロジェクトには、テスト用フレームワークJasmineと、テスト実行ツールのKarma、Protractorを利用できる設定が組み込まれています。テスト内容をJasmineで記述して、クラスやメソッドの単体テストをKarmaで、ブラウザーを操作してテストを行うE2E（End-to-End）テストをProtractorで、それぞれ実行します。
単体テストを実行するには「ng test」コマンドを実行します。実行結果はWebブラウザーに図8のように表示されます。デフォルトのテストでは、アプリが生成されたこと、アプリのタイトルが「app」で、それが<h1>タグに反映されることがチェックされます。
E2Eテストを実行するには「ng e2e」コマンドを実行します。Webブラウザーが起動して、画面操作などの処理を行い、結果はコマンドラインに表示されます。デフォルトのテストでは、Webページに「Welcome to app!」が含まれることがチェックされます。
開発者が望むテストを実行させるには、テスト内容をファイルに記述する必要があります。テストについての詳細は、次回以降に説明します。
そのほかのコマンド
ここまで紹介したコマンドのほかに、Angular CLIでは表1のようなコマンドが利用できます。詳細は公式ドキュメントを参照してください。
| コマンド | コマンドの機能 |
|---|---|
| ng get / ng set | .angular-cli.jsonに記述された設定の表示／更新 |
| ng doc | AngularのAPIドキュメントを表示 |
| ng eject | Angular CLIなしでビルドできるように、webpackの設定を出力 |
| ng xi18n | 国際化メッセージをテンプレートから抽出 |
| ng update | プロジェクトで利用しているライブラリーを最新に更新 |
まとめ
本記事では、Angularアプリ開発で利用するCLIツールAngular CLIについて、機能や利用方法を説明しました。プロジェクト生成、ビルド、テストなど、開発のあらゆる場面で利用できる必須ツールといえます。
次回は、Angularプロジェクトで単体テストを行う方法について説明していきます。
