SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

次世代Webアプリケーションフレームワーク「Angular」の活用

Angular開発の強力サポートするコマンドラインツール「Angular CLI」の活用法

次世代Webアプリケーションフレームワーク「Angular」の活用 第12回


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

Angular CLIの便利なコマンド

 Angular CLIでは、プロジェクトの生成や実行以外に、開発で便利に利用できるさまざまな機能を提供します。

モジュールやコンポーネントの自動生成

 Angularアプリの構成要素であるモジュールやコンポーネントを、「ng generate」コマンドで自動的に追加できます。

 ルートモジュール(appモジュール)の配下にsubmod1モジュールを追加するには、リスト8のコマンドを実行します。

リスト8 appモジュールの配下にsubmod1モジュールを追加するコマンド
ng generate module submod1 --module app

 ここで「--module app」は、追加するsubmod1モジュールをappモジュールの配下にするオプションです。このように実行すると、app/submod1/submod1.module.tsファイルが生成されると同時に、appモジュールのモジュール定義ファイル(app.modules.ts)に、submod1モジュールを参照する記述が自動的に追加されます。

リスト9 appモジュール定義ファイルに追加されたsubmod1モジュールの参照(P003-generate/app/app.module.ts)
import { Submod1Module } from './submod1/submod1.module';
@NgModule({
(略)
  imports: [
    BrowserModule,
    Submod1Module
  ],
})

 同様にしてコンポーネントも追加できます。submod1モジュール配下に、subcomp1コンポーネントを追加するには、リスト10のようにします。

リスト10 submod1モジュールの配下にsubcomp1モジュールを追加するコマンド
ng generate component submod1/subcomp1

 この場合、submod1/subcomp1フォルダーにコンポーネントのファイルが生成されると同時に、submod1のモジュール定義ファイルにコンポーネントを参照する記述が自動的に追加されます。

リスト11 submod1のモジュール定義ファイル(P003-generate/app/submod1/submod1.module.ts)
import { Subcomp1Component } from './subcomp1/subcomp1.component';
@NgModule({
(略)
  declarations: [Subcomp1Component]
})

 なお、コマンド実行時に「--dry-run」オプションを指定すると、実際の処理は行わず、追加・変更されるファイルを事前に確認できます。

図6 --dry-runオプションで、処理結果を事前確認できる(P003-generate)
図6 --dry-runオプションで、処理結果を事前確認できる(P003-generate)

 ng generateコマンドを利用して、サービスやディレクティブなど、Angularアプリを構成するさまざまな要素を追加できます。詳細は公式ドキュメントを参照してください。

実装の形式チェック

 「ng lint」コマンドを利用すると、TypeScriptの静的解析ツールTSLintで、ソースコードの望ましくない記法をチェックできます。

 例えば、リスト12のTypeScriptコードには、TSLintが望ましくないと指摘する実装が含まれています。

リスト12 形式チェックが指摘する望ましくない実装の例(P004-lint/src/app/app.component.ts)
export class AppComponent {
  // Lint: シングルクォートを利用するべき
  title = "app";

  // Lint: 1行は140文字以内であるべき
  longValue = '<長い文字列、ここでは省略>';

  //コメント <- Lint: コメント記号の後は空白を入れるべき
  func1() {
    alert('hello');
  }
}

 リスト12を含むAngular CLIのプロジェクトで「ng lint」コマンドを実行すると、TSLintが望ましくない実装をチェックして、図7のように指摘してくれます。

図7 「ng lint」コマンドでソースコードの望ましくない実装を発見(P004-lint)
図7 「ng lint」コマンドでソースコードの望ましくない実装を発見(P004-lint)

 TSLintの指摘内容は、tslint.jsonファイルでカスタマイズできます。図7の指摘に関連する設定を、リスト13に抜粋します。trueをfalseに変更すると、対応するチェックを行わなくなります。

リスト13 TSLint設定ファイルの一部(P004-lint/tslint.json)
"comment-format": [  // コメントフォーマット
  true,              // チェックする
  "check-space"      // 空白を入れるべき
],
"max-line-length": [ // 1行の最大文字数
  true,              // チェックする
  140                // 140文字
],
"quotemark": [       // クォート文字列
  true,              // チェックする
  "single"           // シングルクォート
],

 tslint.jsonの設定詳細は、公式サイトを参照してください。

単体テスト、E2Eテスト

 Angular CLIのプロジェクトには、テスト用フレームワークJasmineと、テスト実行ツールのKarmaProtractorを利用できる設定が組み込まれています。テスト内容をJasmineで記述して、クラスやメソッドの単体テストをKarmaで、ブラウザーを操作してテストを行うE2E(End-to-End)テストをProtractorで、それぞれ実行します。

 単体テストを実行するには「ng test」コマンドを実行します。実行結果はWebブラウザーに図8のように表示されます。デフォルトのテストでは、アプリが生成されたこと、アプリのタイトルが「app」で、それが<h1>タグに反映されることがチェックされます。

図8 Angular CLIのプロジェクトで単体テストを実行した結果表示(P005-test)
図8 Angular CLIのプロジェクトで単体テストを実行した結果表示(P005-test)

 E2Eテストを実行するには「ng e2e」コマンドを実行します。Webブラウザーが起動して、画面操作などの処理を行い、結果はコマンドラインに表示されます。デフォルトのテストでは、Webページに「Welcome to app!」が含まれることがチェックされます。

図9 Angular CLIのプロジェクトでE2Eテストを実行した結果表示(P005-test)
図9 Angular CLIのプロジェクトでE2Eテストを実行した結果表示(P005-test)

 開発者が望むテストを実行させるには、テスト内容をファイルに記述する必要があります。テストについての詳細は、次回以降に説明します。

そのほかのコマンド

 ここまで紹介したコマンドのほかに、Angular CLIでは表1のようなコマンドが利用できます。詳細は公式ドキュメントを参照してください。

表1 Angular CLIで利用可能なそのほかのコマンド
コマンド コマンドの機能
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プロジェクトで単体テストを行う方法について説明していきます。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10795 2018/05/15 17:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング