Angularのインストールとプロジェクト作成手順 #Windows

先日、趣味で簡単なWebシステムを作ってみようと思い、自宅の Windows 10 に Angular の実行環境を整えてみました。その際に Node.js のインストールから Angular プロジェクト作成までの手順をまとめましたので、ご紹介します。

環境

前提

OS: Windows 10
ターミナル: Windows PowerShell (PS)
Git: Git for Windows

インストールするもの

Node.js
Yarn
Angular CLI

Node.js をインストール

Node.js の公式サイトからLTS(推奨版)をダウンロードして実行します。

Node.js をインストーする際、オプションの Chocolatey も一緒にインストールしておくことをオススメします。

Chocolatey は Windows 用のパッケージマネージャで、今回主役の Angular とあまり関係はありませんが、PlantUML や Java などをインストールする際に Chocolatey が役に立ちます。

Yarn をインストール

Yarn は、Node.js に付属しているパッケージマネージャの npm と互換性のあるパッケージマネージャであり、 npm よりも高速かつセキュアにモジュールのインストールが行えます。

Yarn は npm でインストールできます。

npm install --global yarn

どちらのパッケージマネージャを使用するかはプロジェクト毎に方針を決めておきましょう。
共存はできますが、そうするとチームで開発する時に思わぬトラブルの元になります。

当ページでは Yarn を使用した手順をご紹介します。

グローバルインストールしたモジュールのPathを通す

Yarn や npm でグローバルインストールしたモジュールをコンソールから実行できるように、環境変数の Path を確認します。

もし Path が通っていなければ Path に追加する必要があります。

環境変数の編集は、Windows の検索ボックスから「システム環境変数の編集」を開き、表示された [環境設定] ボタンから行う手順が簡単です。

npmでグローバルインストールしたモジュールの場所

npmでグローバルインストールしたモジュールの場所は次のコマンドで調べることができます。

npm bin --global

npm でグローバルインストールしたモジュールのパスは通常ならユーザーフォルダにありますので、ユーザー環境変数の Path に登録してください。

Yarnでグローバルインストールしたモジュールの場所

Yarnでグローバルインストールしたモジュールの場所は次のコマンドで調べることができます。

yarn global bin

Yarn でグローバルインストールしたモジュールのパスは通常ならユーザーフォルダにありますので、ユーザー環境変数の Path に登録してください。

Angular CLI のインストール

Angular のプロジェクトではコマンドを利用して、プロジェクト作成や、サーバ起動、テスト実行、コンポーネントやサービスの追加など様々な操作を行います。

Angular CLI をインストールすると、そのための「ng」コマンドが使用できるようになります。

yarn add

次のコマンドで Angular CLI をインストールします。

yarn global add @angular/cli

初めてインストールする場合は次のような質問があります。

? Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.io/analytics.

和訳すると『 https://policies.google.com/privacy にある Google のプライバシーポリシーに基づいて、このプロジェクトに関する仮名の使用データを Google の Angular チームと共有しますか？この設定の詳細と変更方法については、https://angular.io/analytics を参照してください。』となります。

「y」でも「N」でも好きな方を選択しましょう。
私は「N」にしています。

次のコマンドで ng コマンドが使用できるようになったか確認します。

ng version

パッケージマネージャの変更

Angular CLI (ngコマンド) は内部で Node.js のパッケージマネージャを用います。
組織の方針に従い、ngコマンドで使用するパッケージマネージャを設定しましょう。

次のコマンドを実行すると、パッケージマネージャが何になっているか確認できます。

ng version | Select-String -Pattern "Package Manager"

Yarn に変更したい場合は、次のコマンドを実行します。

ng config --global cli.packageManager yarn

変更されたかどうかは、先程と同様に ng version で確認できます。

ngコマンドの使用方法

当ページでは ng コマンドの詳しい解説は行いません。
ng コマンドの使用方法は公式ドキュメントや「ng help」で確認できます。

> ng help

Angular プロジェクトの作成

PS> cd C:\my-projects
PS> ng new example-project

上記のコマンドでプロジェクトを作成すると、最初のコミットが自動で行われます。

自動で行いたくない場合は、--commit false オプションで回避できます。

ng new example-project --commit false

Angular ルーティング機能を追加するか尋ねられますが、複数の画面を作るなら「Yes」になります。

? Would you like to add Angular routing? Yes

単一画面なら「No」でも可

スタイルシートのフォーマットを「CSS」「SCSS」「Sass」「Less」のどにするか尋ねられます。

? Which stylesheet format would you like to use?
  CSS
> SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ]

私の好みは SCSS です。

次のコマンドのようにオプションを付けると、対話式を避けることができます。

ng new example-project --routing true --style scss

動作確認

次のコマンドで開発用サーバが起動します。

cd example-project
ng serve --open

--openオプションを付けると、サーバ起動後に自動でWelcomeページが開きます。

Welcomeページ（http://localhost:4200/）が表示出来たらAngularプロジェクト作成の完了です。

Ctrl + C でサーバを終了します。

[補足] バージョン確認方法

Node.js のバージョン確認

node --version

npm のバージョン確認

npm --version

Yarn のバージョン確認

yarn --version

Angular CLI (ngコマンド) のバージョン確認

ng version

Git

git version

まとめ

Node.js のインストールから Angular プロジェクト作成までの手順をご紹介しました。

Node.js のプロジェクトでは、パッケージマネージャに npm と yarn のどちらかを使用することになりますが、混在は禁物ですので、プロジェクト単位でどちらを使用するか決めてから取り掛かりましょう。

Angular はWebアプリケーションのフロントエンドフレームワークの中で、私が最も気に入っているフレームワークです。といっても私はあまり多くのフレームワークを知っているわけではありませんし、それぞれの使いどころもあるので一概には言えませんが、もし Vue と Angular を比較するなら Angular の方が断然良いと思っています。

なお、Angular用の公式UIコンポーネント集である Angular Material も大変優秀ですので、Angular を学ぶなら是非一緒に試してみてほしいと思います。

以上、この情報がお役に立てれば幸いです。