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

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、バージョン5の変更点や新機能を解説しました。今回は、プロジェクトの生成や実行など、Angularアプリの開発をさまざまな機能でサポートするコマンドラインツール「Angular CLI」の利用方法を説明します。

はじめに

　Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降アップデートが続いています。

　Angular CLIは、Angularアプリのプロジェクト生成や実行などが行えるコマンドラインツールです。開発者はAngular CLIのコマンドで生成したプロジェクトをひな型にして、Angularアプリを開発できます。またAngular CLIは、アプリのビルドやテストなど、開発を支援するさまざまな機能を提供します。

図1　Angular CLIの公式Webサイト

　Angular CLI以前から、Angularアプリのひな型となるクイックスタートプロジェクトがGitHubで提供されていますが、2017年11月以降は非推奨になり、バージョンアップも行われていません。これからAngularアプリを作成する場合は、Angular CLIでプロジェクトのひな型を生成することになります。

　本記事では、開発をサポートするAngular CLIのさまざまな機能を説明していきます。

対象読者

• Angularアプリをこれから作ってみたい方
• Angular CLIをプロジェクト生成と実行でしか使っていない方
• Angular開発でより楽をしたい方

必要な環境

　Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

　今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Angular 5.2
  • Node.js v8.10.0 64bit版
  • Angular CLI 1.7.3
  • Microsoft Edge 41.16299.248.0

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。「--aot」は、実行前にスクリプトの変換処理をまとめて行うオプション、「--open」は、ブラウザーを自動的に起動するオプションです。

Angular CLIの基本的な利用方法

　最初に、Angular CLIをインストールして、Angularプロジェクトを生成、実行するまでの基本的な手順を説明します。

Angular CLIのインストール

　Angular CLIをインストールするには、Node.jsをインストール後、リスト1のコマンドを実行します。「-g」オプションは、システム全体にインストールすることを表します。

リスト1　Angular CLIをインストールするコマンド

npm install -g @angular/cli

Angular CLIでプロジェクトを生成して実行

　リスト2のようにコマンドを実行すると、Angularのプロジェクトを生成して実行できます。（1）の「ng new」でP001-basicプロジェクトを生成後、（2）でそのプロジェクトフォルダーに移動して、（3）の「ng serve」コマンドで実行します。Angular CLIのコマンドは、基本的に「ng <処理内容> <オプション>」という形式です。

リスト2　Angular CLIでプロジェクトを生成して実行するコマンド

ng new P001-basic      # プロジェクトを生成 ...（1）
cd P001-basic          # プロジェクトフォルダーに移動 ...（2）
ng serve --aot --open  # プロジェクトを実行 ...（3）

　Angular CLIで生成したプロジェクトには、Angularの基本的な実装がすでに含まれており、実行すると図2のようなWebページが表示されます。

図2　Angular CLIで生成したプロジェクトの実行結果（P001-basic）

［参考］Angular CLIのアップデート

　システム全体にインストールしたAngular CLIをアップデートするには、リスト3のコマンドを実行します。なお、npmのバージョンが5以前の場合は、「npm cache verify」のかわりに「npm cache clean」とします。

リスト3　システム全体のAngular CLIをアップデートするコマンド

npm uninstall -g @angular/cli      # アンインストール
npm cache verify                   # キャッシュの整合性確認
npm install -g @angular/cli@latest # 再インストール

　システム全体とは別に、プロジェクトに含まれるAngular CLIを更新する必要があります。Angular CLIやそのほかのライブラリーが格納されている「node_modules」フォルダーを削除してから、リスト4のコマンドを実行します。

リスト4　プロジェクトに含まれるAngular CLIをアップデートするコマンド

npm install --save-dev @angular/cli@latest # Angular CLIの最新版をインストール
npm install                                # 他のライブラリーを再インストール[/s]

プロジェクトのビルド

　Webサーバーに配置して実行できるファイルをビルドするには「ng build」コマンドを実行します。index.htmlやJavaScriptファイルなどの一式が、distフォルダーに出力されます。

図3　ビルドで出力されたファイル群

　出力されたファイル一式をWebサーバーに配置してブラウザーで開くと、図2と同じWebページが表示されます。index.htmlをファイルとして直接ブラウザーで開くと、JavaScriptが動作せず、Webページが表示されない点に注意が必要です。

［参考］ビルド出力を簡易Webサーバーで表示するサンプル

　Angular CLIプロジェクトのビルド出力を、簡易Webサーバーで表示できるようにしたプロジェクト（P001-basic-dist）を、ダウンロードできるサンプルに含めています。「npm install」で簡易Webサーバーのライブラリー（http-server）をインストール後、「npm start」で簡易Webサーバーを起動して「http://localhost:8080」をWebブラウザーで開くと、Webページが表示されます。

　なお、「ng build --prod」と実行すると、ファイルの最小化や未使用部分の削除が行われて、ファイルサイズを小さくできます。