Angularの開発環境を構築する！Node.jsとAngular CLIのインストール
この記事では、Angularを使って開発をおこなうための準備について説明する。
AngularはJavaScriptのフレームワークであり、高機能なウェブアプリケーションを作成するために使うことができる。
Angularを使用するための準備
Angularを使用するための準備は以下の通りだ。
- Node.jsのダウンロードとインストール
- npmを使用してAngular CLIをインストール
- VSCodeなどのIDEをインストールする
Angular公式ドキュメンテーションのセットアップに関するページ
https://angular.io/guide/setup-local（英語、新しいページで開きます。）
Node.jsのダウンロードとインストール
Angularを使用するにはNode.jsのインストールが必要となる。
Node.jsのダウンロード
以下のダウンロードページにアクセスする。
Node.jsダウンロードページ:: https://nodejs.org/en/download
LTSのタブを選択した状態で、使用しているOSのボタンをクリックしてインストーラーをダウンロードする。（LTSはLong Term Supportの略で、安定したリリースバージョンのことだ。）
Node.jsのインストール
ダウンロードしたインストーラーをダブルクリックしてインストールをスタートする。
ライセンス許諾を確認し次へ進める。
その後、いくつかインストール先やカスタムセットアップなどに関する質問が表示されるが、すべてそのまま「Next」ボタンを押して問題ないだろう。
インストールが始まる際に「ソフトがコンピュータに変更を加えることを許可する」旨の確認ダイアログが表示されるので、許可するとインストールが始まる。
インストールが終了すると以下の確認画面が表示される。
Node.jsが正常にインストールされたか確認したい場合は、コマンドプロンプトで「npm –version」を実行する。
バージョン名が表示されれば無事にインストールされている。
Angular CLIのインストールとコマンド一覧
次にAngular CLIについて見ていこう。
Angular CLIのインストール
まずはAngular CLIをインストールする。
コマンドプロンプトにて以下のコードを実行する。
npm install -g @angular/cliインストールが終了する前に、利用データをGoogleのAngular Teamとシェアしてもいいかの確認メッセージが表示される。シェアするなら「y」をしないなら「n」を入力しENTERを押す。
ここまで来たらすでにAngularのプロジェクトを作成し動かすことができるが、IDE（統合開発環境）無しでAngularの開発をおこなうのは非常に煩わしいので、JavaScriptの開発向けのIDEをインストールしよう。
Angular CLIのコマンド一覧
以下がAngular CLIのコマンドの一覧だ。
| コマンド | 詳細 |
|---|---|
add | プロジェクトに外部ライブラリを追加する。 |
analytics | Angular CLIの利用情報の収集を設定します。 |
build | Angularアプリを指定したディレクトリにコンパイルする。 |
config | angular.jsonファイルのAngular設定の値を取得する。 |
deploy | 指定したプロジェクトのデプロイ・ビルダーを起動する。 |
doc | Angularの公式ドキュメントをブラウザで開く。 |
e2e | Angularアプリをビルドして、e2eテストを実行する。 |
extract-i18n | ソースコードからi18nテキストを抽出する。 |
generate | プロパティに応じてファイルを作成・編集する。 |
help | コマンドのリストと説明を表示する。 |
lint | 指定したフォルダに対しコーディング規則のチェックを実行する。 |
new | 新しいプロジェクトを作成する。 |
run | コマンドのひとつをオプションとともに実行する。 |
serve | アプリをビルドしてサーブする。変更が加わった場合は自動的に再ビルドする。 |
test | ユニットテストを実行する。 |
update | アプリとそのディペンデンシーをアップデートする。 |
version | Angular CLIのバージョンを出力する。 |
コマンドは以下のように先頭に「ng」を付けたうえでオプションの値を指定して使用する。
ng new myAppNameコマンドのオプションについては公式のドキュメントを参照してほしい。
Angular CLIのコマンドの中で頻繁に使用するのは、「new」「generate」「serve」の3つだ。