Angular TIPS

Angular TIPS

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

2017年6月5日

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

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

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

 別稿「TIPS:Angularの特徴とは? 開発環境を構築するには?」「TIPS:Angularの基本構造を理解して、アプリ開発を始めるには?」では、Angular QuickStart Source(以降、QuickStart)を利用して、Angularアプリを立ち上げる方法について解説しました。QuickStartの利用は手軽ですが、アプリ立ち上げのたびにQuickStartをダウンロード(あるいはコピー)して、フォルダー名をリネームして……という手順を踏まなければならないのは面倒です。

 そこでより効率的な手段として、Angular CLIという公式コマンドラインツールが用意されています。Angular CLIを利用することで、コマンド1つでアプリの骨格を生成できます。その他にも、開発を効率化するためのコマンドがさまざまに用意されていますので、本格的にAngularでアプリを開発するならば、導入しておいて損はないツールです。

Angular CLIのインストール

 Angular CLIを利用するには、Node.js 6.9.x以上(npm 3.x以上)がインストールされている必要があります。Angularを利用している人も、Angular本体とは要件バージョンが異なるので、あらかじめインストール済みのバージョンを確認しておきましょう。

 Node.js(npm)を用意できたら、あとは以下のコマンドでAngular CLIをインストールできます。-gオプションは、ライブラリをシステムグローバルにインストールしなさい、という意味です。

ターミナル
> npm install -g @angular/cli
……中略……
  +-- webpack-dev-server@2.4.5
  | +-- chokidar@1.7.0
  | +-- express@4.15.2
  | | `-- finalhandler@1.0.2
  | |   `-- debug@2.6.4
  | +-- html-entities@1.2.1
  | +-- http-proxy-middleware@0.17.4
  | | `-- micromatch@2.3.11
  | |   +-- braces@1.8.5
  | |   | `-- expand-range@1.8.2
  | |   |   `-- fill-range@2.2.3
  | |   |     `-- isobject@2.1.0
  | |   `-- filename-regex@2.0.1
  | `-- sockjs-client@1.1.2
  |   `-- url-parse@1.1.9
  |     `-- querystringify@1.0.0
  `-- zone.js@0.8.10
……中略……
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"an
y"} (current: {"os":"win32","arch":"x64"})
リスト1 Angular CLIをインストールするコマンドの実行例

Angularアプリの骨組みを生成する

 Angular CLIをインストールできたら、さっそく、アプリの骨組みを作成し、実際に実行してみましょう。

1アプリを作成する

 本稿では、Windows上のc:\dataフォルダー配下にcli-atipsアプリを作成するものとします。

ターミナル
> cd c:\data          # カレントフォルダーを移動
> ng new cli-atips    # cli-atipsアプリを作成
installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
……中略……
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'cli-atips' successfully created.
リスト2 Angular CLIをインストールするコマンドの実行例

 リスト2のようにコマンドを実行すると、アプリの骨組みが作成されると共に、ライブラリがインストールされて実行可能な状態になります。

 以下は、初期作成されたアプリの構造(主なフォルダーとファイル)です。細かな点では異なるところもありますが、その構造は、大まかにはQuickStartと類似しています。QuickStartをメインで利用していた人も、Angular CLIで作成されたアプリの構造に慣れるのは、それほど難しいことではないでしょう。

/cli-atips …… アプリケーションルート
 ├─ /src …… ソースコード一式
 │  ├─ /app
 │  │  ├─ app.module.ts …… ルートモジュール
 │  │  └─ app.component.ts …… ルートコンポーネント
 │  ├─ /assets …… 画像などのアセット一式
 │  ├─ /environments …… 環境情報ファイル
 │  ├─ main.ts …… スタートアップのためのスクリプト
 │  └─ index.html …… スタートページ
 ├─ /e2e …… E2E(End to End)テスト関連のスクリプト
 ├─ /node_modules …… Angularで利用するライブラリ一式
 ├─ package.json …… npmの設定ファイル
 ├─ tsconfig.json …… TypeScriptコンパイラーの設定ファイル
 ├─ karma.conf.js …… Karmaの設定ファイル
 └─ protractor.conf.js …… Protractorの設定ファイル
表1 Angular CLIで作成されたアプリ(主なフォルダー/ファイル)

…… いずれもテスト実行のためのテストランナーです。

2アプリを起動する

 Angular CLIでは、ng serveコマンドでアプリを起動します(リスト3)。--openオプションは、アプリの起動時にブラウザーを自動起動しなさい、という意味です。

ターミナル
> cd cli-atips          # アプリケーションルートに移動
> ng serve --open       # アプリを起動
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
10% building modules 6/9 modules 3 active ...ode_modules\style-loader\addStyles.jswebpack: wait until bundle finished:
/                                  Hash: b6d4bd9e490793126da9
Time: 17370ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.7 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
リスト3 アプリを起動するコマンドの実行例

「NG Live Development Server is listening on localhost:4200」と記載されていますが、Angular CLI標準の開発用サーバー(webpack-dev-server)が起動されて(ちなみにQuickStartでは標準でlite-serverが使われます)、「localhost:4200」をリスニングしていることが分かります。

 アプリがビルドされた後、ブラウザーが起動し、以下のようなページが表示されれば、Angular(Angular CLI)は正しく動作しています。

図1 Angular CLIで生成されたサンプルアプリ
図1 Angular CLIで生成されたサンプルアプリ

執筆時点ではこのような表示になっています。バージョンアップが進むにつれ表示内容も変化していくことが予想されますので、何らかのページが表示されたら「それで成功」と考えてください。

 QuickStartではポート番号は3000ですが、Angular CLI環境では4200がデフォルトです。

処理対象:ライブラリインストール カテゴリ:基本
処理対象:Azure CLI カテゴリ:基本
処理対象:コマンド実行 カテゴリ:Azure CLI
API:ng new|ng serve カテゴリ:Azure CLI

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

13. 数値データに桁区切り文字を付与するには?(number)

Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明する。整数と小数点以下の桁数を指定して整形することも可能。

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つのバインディング構文を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社