Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 本連載では、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サイトhttps://cli.angular.io/
図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)
図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 ビルドで出力されたファイル群
図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」と実行すると、ファイルの最小化や未使用部分の削除が行われて、ファイルサイズを小さくできます。


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

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5