sigma-se

目的

この記事では、Angular開発の必須環境となるVisual Studio Code、Node.js、Angular CLI、TypeScriptの環境構築手順について記載する。

※ インストーラーのバージョンは最新バージョンに読み替えること。
Visual Studio Code : VSCodeSetup-x64-1.63.2.exe Node.js : node-v16.13.1-x64.msi

Visual Studio Codeのダウンロード

以下、Visual Studio Codeのダウンロード手順について記載する。

公式サイトにアクセス
Visual Studio Code公式サイト（https://code.visualstudio.com/）にアクセスし、[Download for Windows]アコーディオンを展開し、[Other downloads]をクリックする。

※ [Stable]は安定版、[Insiders]は開発途中版を意味する。
インストーラーのダウンロード
[System Installer]の[64 bit]をクリックし、任意の場所にダウンロードする。

※「VSCodeSetup-x64-1.63.2.exe」というファイル名でダウンロードされる。
※ 全ユーザーアカウントがVSCodeを利用できるSystem Installer版以外にも、特定のユーザーアカウントのみVSCodeを利用できるUser Installer版と自動アップデートができない落としきりの.zip版がある。

Visual Studio Codeのインストール

以下、Visual Studio Codeのインストール手順について記載する。ダウンロードしたインストーラー「VSCodeSetup-x64-1.63.2.exe」を起動し、下記手順でインストールする。

使用許諾契約書の同意
「同意する(A)」、「次へ(N)」をクリックする。
インストール先の設定
標準設定「C:\Program Files\Microsoft VS Code」のまま「次へ(N)」をクリックする。

※ インストール先は任意。
プログラムグループの指定
スタートメニューにショートカットを作成する。標準設定「Visual Studio Code」のまま「次へ(N)」をクリックする。

※ ショートカットの作成有無は任意。
追加タスクの選択
起動オプションの設定を行う。標準設定では有効化されていない上部3つの追加タスクも利便性上有効にし、「次へ(N)」をクリックする。

※ 各設定の有効/無効は任意。
インストール準備完了
設定内容を確認し、間違いなければ「インストール(I)」をクリックする。
セットアップウィザードの完了
標準設定の「Visual Studio Code を実行する」を無効化し、「完了(F)」をクリックする。

※ 有効/無効は任意。

以上で、Visual Studio Code のインストールが完了。

Visual Studio Codeの初期設定

以下、Visual Studio Codeの初期設定について記載する。

Visual Studio Codeの日本語化設定
下記手順で日本語化設定を行う。
- 多言語対応の追加設定画面を表示
  Visual Studio Code を起動し、メニューの[View]から[Command Palette]を選択後（または、[Shift + Ctrl + P]）、[Configure Display Language] → [Install Additional Language]と続けて選択する。
- 多言語対応の追加設定画面
- 日本語化パッケージをインストール
  サイドメニューから[Japanese Language Pack for Visual Studio Code]の[Install]をクリックする。
- Visual Studio Codeの再起動
  インストールが完了すると右下に [Restart Now]が表示される。
  [Restart Now]をクリックし、Visual Studio Codeを再起動する。
- 日本語化されているかの確認
  下記キャプチャーのように日本語化されていれば、正常に日本語化設定ができている。
Visual Studio Codeターミナルの実行ポリシー設定
Windowsでは、Visual Studio Codeの内部コマンドにPowershellが使われており初期状態では、Powershellのポリシー変更を行わないとターミナルからのコマンド実行ができない。
そのため、ターミナルからPowershellコマンドが実行できるよう下記手順で settings.jsonに実行ポリシーの変更設定を行う。
- settings.json の表示
  Visual Studio Code を起動し、メニューの[表示]から[コマンドパレット]を選択後（または、[Shift + Ctrl + P]）、settingsでフィルターをかけ、Preferences: Open Settings(JSON)を選択する。
  
  settings.jsonが表示される。
- 実行ポリシーの変更設定
  実行ポリシーの初期設定では、全てのスクリプト実行を制限するRestrictedとなっているため、ローカルスクリプトと非ローカル上の署名のあるスクリプトのみ実行可能とするRemoteSignedをsettings.jsonに設定する。
  
  ※ 下記3行をカンマ（ , ）で繋げて追記する。
```
"terminal.integrated.env.windows": {
   "PSExecutionPolicyPreference": "RemoteSigned"
}
```

Node.jsのダウンロード

以下、Node.jsのダウンロード手順について記載する。

Node.jsのダウンロード
Node.js公式サイト（https://nodejs.org/ja/）から [16.13.1 LTS 推進版] をクリックする。
LTS版（Long Term Support）は長期間保守実績があるバージョンで、安定版として推奨されている。

※ Node.js公式サイトのダウンロードボタンは、アクセスしたOSに最適なインストーラーが設定されるため、別端末の環境構築する場合に注意。

Node.js のインストール

以下、Node.jsのインストール手順について記載する。

※ 注意：Macの場合は、「Node.js のインストール (Mac)」を参照。
ダウンロードしたインストーラーnode-v16.13.1-x64.msiを起動し、下記手順でインストールする。

Node.jsのインストール
- セットアップウィザードの開始：「Next」をクリックする。
- エンドユーザーライセンスの同意：「I accept the terms in the License Agreement」を有効化し、「Next」をクリックする。
- インストール先の設定：標準設定「C:\Program Files\nodejs\」のまま「Next」をクリックする。
  ※ インストール先は任意。
- インストール内容の設定：標準構成のまま「Next」をクリックする。
  ※「Node.jsの実行環境」、「npmパッケージマネージャ」、「オンライン説明文章へのショートカット」のインストールと「環境変数PATHへの登録」が設定される。
- ネイティブモジュールツールのインストール設定：これまでの設定内容に間違いなければ、「Install」をクリックする。
  
  ※ 一部のnpmモジュールは、インストール時にC/C++からコンパイルする必要があるため、対象のモジュールをインストールしたい場合に有効化する。
- インストールの開始：これまでの設定内容に間違いなければ、「Install」をクリックする。
- インストールの完了：「Finish」をクリックする。

Node.js のインストール (Mac)
Macは、パッケージ管理ツールHomeBrewからNode.jsをインストールすることを推奨する。

HomeBrewのインストール

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

上記でインストールで下記の Warning がでる場合
Next stepsを実施する。

Warning: /opt/homebrew/bin is not in your PATH.
Instructions on how to configure your shell for Homebrew
can be found in the 'Next steps' section below.

Next steps

$ echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/XXXXX/.zprofile    # XXXXXは、ユーザー名
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/XXXXX/.zprofile   # XXXXXは、ユーザー名

HomeBrewのパス設定

$ touch .zprofile   # 環境変数パスの設定ファイル作成(ファイルが存在しない場合のみ実施)
$ vim .zprofile    # binのパス設定を追記(インストール先は各環境に合わせる)
  export PATH="/opt/homebrew/bin:$PATH"

Node.jsをインストール

$ brew install node@18    # バージョン指定は任意

Node.jsのパス設定

$ touch .zprofile    # 環境変数パスの設定ファイル作成(ファイルが存在しない場合のみ実施)
$ vim .zprofile    # binのパス設定を追記(インストール先は各環境に合わせる)
  export PATH="/opt/homebrew/opt/node@18/bin:$PATH"

Angular CLI / TypeScriptのインストール

Node.jsに付属しているNodeのパッケージ管理ツールであるnpm（Node Package Manager）を用いて、Angular CLIとTypeScriptのインストールを行う。

Angular CLIのインストール
コマンドプロンプト（※）から、下記インストールコマンドを実行する。
```
$ npm install -g @angular/cli
```
※ コマンドプロンプトの起動
Windowsキー + R で「ファイル名を指定して実行」を起動し、コマンド「cmd」を入力し、「OK」をクリックする。

下記のように「脆弱性が $0$ 件」と表示されれば正常。
- バージョン確認コマンドプロンプトから下記バージョン確認コマンドを実行する。
```
$ ng version
```
  下記のようにAngular CLIのバージョン内訳が確認できる。
TypeScriptのインストール
コマンドプロンプト（＊1）から下記インストールコマンドを実行する。
```
$ npm install -g typescript
```
下記のように「脆弱性が0件」と表示されれば正常。
- バージョン確認
  コマンドプロンプト（＊1）から下記バージョン確認コマンドを実行する。
```
$ tsc -v
```
  下記のようにtypescriptのバージョンが表示される。
npmコマンドの補足
上記で実行したコマンドの補足説明を記載する。
- npm install
  npm installは、npmをインストールしたフォルダ直下（※）にあるpackage.jsonに記載されたパッケージをまとめてインストールするコマンド。 ※ npmのフォルダ確認コマンド
```
$ npm ls -g npm
```
- -g オプション
  -g オプションは、コマンドを実行したフォルダ階層に関わらずインストールするパッケージを使えるようにする設定で、-gオプションがない場合、カレントフォルダ（上記コマンドプロンプトを起動した時点のフォルダ）にインストールされ、パッケージのスコープがカレントフォルダ内のみとなる。
  
  なお、実際の開発時は、同一の開発マシン内でバージョン別に動作確認する場合を想定し、あえて-gオプションなしでインストールする場合もある。
- npm ls
  npm lsは、インストール場所とバージョン確認を表示するコマンド。
  - 例 : 下記、これまでにインストールしたモジュールのインストール場所とバージョン確認のコマンド。
```
$ npm ls -g npm
$ npm ls -g @angular/cli
$ npm ls -g typescript
```
  - npm uninstall npm uninstallは、その名の通り、npm installでインストールしたモジュールをアンインストールするコマンド。
  - 例 : 以下、これまでにインストールしたモジュールのアンインストールコマンド。
```
$ npm uninstall -g @angular/cli
$ npm uninstall -g typescript
```