STDIO

システム開発やフクロウ、節約などの情報をI/Oするためのブログ

【Angular】開発環境の構築(Angular 4対応)

Angular CLIによる開発環境の構築、Webアプリのプロジェクト作成から実行までの手順をまとめました。 現時点の最新版「Angular 4」を対象としています。

Angular CLIを使用すると、Webアプリを簡単に作成・実行できるだけでなく、各種ファイルの自動生成やテスト、本番環境向けの最適化など、開発に必要な作業を効率良く行えます。

必要な環境

Angular CLIを使用するためには、Node.jsとnpmが必要です。

  • Node.js: 6.9.x以上
  • npm: 3.x.x以上

Node.jsとnpmのバージョン確認

既にインストール済みの場合は、Angular CLIに対応したバージョンか確認します。

$ node -v
v6.10.2
$ npm -v
4.5.0

Node.jsのインストール・アップデート

Mac用のNode.jsバージョン管理ツール「nodebrew」を用いたインストール、アップデート方法は以下の記事にまとめています。

Angular CLIのインストール

はじめてインストールする場合

$ npm install -g @angular/cli

古いCLIがインストール済みの場合

Angular 2用の「angular-cli」からパッケージ名が変更されています。 インストール済みの場合は旧版を削除して新しいCLIをインストールします。

$ npm uninstall -g angular-cli
$ npm install -g @angular/cli

動作確認

Angular CLIが正常にインストールされ、「ng」コマンドが使えるようになったことを確認します。

$ ng version

Angular CLI インストール

ヘルプ

ngコマンドの使用方法やオプションは、ヘルプで確認できます。

すべてのコマンドを表示

$ ng help

特定のコマンドを表示

「ng help」に続けて対象のコマンドを指定します。 (プロジェクト作成の「new」コマンドを調べる例)

$ ng help new

プロジェクトの作成

Webアプリのプロジェクトを作成します。

$ ng new プロジェクト名

例えば下記コマンドを実行すると、カレントディレクトリ内に「my-app」ディレクトリが作成され、Webアプリを構成するソースや各種設定ファイルの作成、必要なパッケージのインストールが自動的に行われます。

$ ng new my-app
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'my-app' successfully created.

オプション

「ng help new」にて、プロジェクト作成時のオプションが確認できます。 便利なものを3つ紹介します。

skip-install

Angular本体をはじめとする各種パッケージのインストールを行わずに、ソース・設定ファイルの生成のみ行います。 対象パッケージの確認・変更後にインストールする場合に使用します。

短時間で完了するので、「ng new」コマンドのオプションを試す場合にも便利です。

Webアプリの実行前に「npm install」によるパッケージの手動インストールが必要です。

$ ng new my-app --skip-install
$ cd my-app
$ npm install

source-dir

ソースファイルの格納先ディレクトリ(デフォルト: src)を変更します。

$ ng new my-app --source-dir src/client
installing ng
  create .editorconfig
  create README.md
  create src/client/app/app.component.css
  create src/client/app/app.component.html
  create src/client/app/app.component.spec.ts
  create src/client/app/app.component.ts
  create src/client/app/app.module.ts
〜

この例では、「my-app/src/client」内にAngular用のソースが格納されます。 サーバーサイドのソースと分けて管理する場合などに便利です。 (「my-app/src/server」など)

style

Angular CLIでスタイルシートを作成する際の拡張子(デフォルト: css)を変更します。

$ ng new my-app --style scss
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.scss
〜

Webアプリの実行・表示

作成したWebアプリを実行します。

プロジェクトディレクトリに移動して起動コマンドを実行します。

$ cd my-app
$ ng serve --open

オプション「open」により、ブラウザの起動とページ表示が自動的に行われます。

Angular CLI アプリ

デフォルトの設定では4200番ポートで起動しますので、手動で表示する場合は「http://localhost:4200/」にアクセスします。

この状態でソースを変更すると、ページが自動的にリロードされます。

Webアプリを停止する際は[control] + [C]キーを押します。

あると便利なソフト

Chrome(Webブラウザ)

Webアプリの開発時に役立つ「デベロッパー ツール」が搭載されており、アプリの状態(エラーメッセージ、Angularによって動的に変化するページの要素や変数、ストレージなど)の確認・操作が行えます。

Windowsの場合は[F12]キー、Macの場合は[command] + [option] + [I]キーでデベロッパー ツールを起動できます。

Visual Studio Code(テキストエディタ)

Microsoftが無償で提供するエディタで、Webアプリの開発時に必要なHTML、CSS、JavaScriptなどのシンタックスハイライト・候補表示に対応しています。

AngularのデファクトスタンダードであるTypeScriptにも対応しており、拡張機能を追加すれば更に開発効率を高めることも可能です。

まとめ

Angular CLIを使用すれば、Webアプリの作成と実行が簡単に行えます。

今後、CLIを活用した具体的な開発方法をまとめていければと思います。