VSCodeを用いたAngular7開発環境構築からアプリケーションの実行まで

# 概要

TesseractやRaspberry Piについての記事が途中なのですが、
急遽Angularを使用することになり、開発中に色々と不明点が多く出てきていました。
一旦開発が落ち着いたので備忘録兼ねてAngularの構築からアプリケーションの実行までを記事にまとめておきたいと思います。
開発中に詰まったことはまた別の記事として投稿したいと思います。

# 前提
AngularはTypeScriptベースのWebアプリケーションフレームワークです。
よく比較されているものとしては[React](https://ja.reactjs.org)と[Vue.js](https://jp.vuejs.org/index.html)が挙げられると思います。
今回はAngularで開発を行ったのでAngularしか取り上げませんが、他のフレームワークに興味がある場合は調べてみると良いかもしれません。
この記事ではAngularの開発を行うための前提条件および、開発ツールを一通り構築するための手順をまとめています。
なお、この記事では開発エディタにVisual Studio Code(以後VSCode)を指定していますが、他のエディタを使用したい方は適時読み替えを行ってください。

# インストール

この記事ではAngular CLIをインストールするのでnpmのインストールを行う必要があります。

## Node.jsのインストールまで

バージョン管理を行う必要がない場合はNode.jsをそのまま[ダウンロード](https://nodejs.org/en/download/)してインストールを行いますが、
アプリケーション開発を行う場合は基本的にバージョン管理を行うことが多いです。
なのでNode.jsだけでなく、バージョン管理ツールも一緒にインストールを行う形で記載します。

### 1. Macの場合

Macでのバージョン管理ツールはnodebrewを使用する場合が多いと思います。
nodebrewをインストールするためにはhomebrewが必要になるので、この二つのツールのインストールを実施します。

#### 1.1. homebrewのインストール

[homebrew公式サイト](https://brew.sh/index_ja.html)でインストール手順が説明されている

ターミナルを起動後、以下のコマンドを実行
**注記**
インストール手順および実行コマンドは変更される可能性があるのでできる限り公式サイトを確認してそちらの手順を実行すること

```shell:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

実行後、バージョン確認を行い正常にインストールされていることを確認する

```shell:
brew --version

# インストールされている場合下記が出力される
Homebrew 2.1.4
Homebrew/homebrew-core (git revision 35b8; last commit 2019-05-30)
````

#### 1.2. nodebrewのインストール

**1.2.1. インストール**
homebrewがインストールされたことを確認したら、nodebrewをインストールする

```shell:
brew install nodebrew
```

**1.2.2. nodebrewのPATHを設定する**

インストール直後の状態だとnodebrewへのパスが設定されていないため環境変数PATHに実行ファイルまでのパスを追加する
上記設定を行うことでターミナル上で`nodebrew xx`といったコマンドが実行できるようになる

```shell:
# home/.bash_profileが作成されていない場合、homeディレクトリに移動後に先にこちらのコマンドを実行する
touch ~/.bash_profile

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

完了後、.bash_profileを再読み込みする

```shell:
source ~/.bash_profile
```

完了したら正常にインストールされていることを確認する

```shell:
nodebrew --version
```

**1.2.3. Node.jsの最新バージョンもしくは指定したバージョンのインストールおよび切り替え**
以下のコマンドを実行して最新バージョンもしくは指定したバージョンのnode.jsをインストールする

```shell:
# 最新バージョンをインストールする場合
nodebrew install-binary latest

# バージョンを指定してインストールする場合
nodebrew install-binary 12.4.0

# 現在インストール可能なバージョンを表示する
nodebrew ls-remote

〜省略〜
v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0  v11.13.0  v11.14.0
v11.15.0  

v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0
```

**※`nodebrew install-binary latest`で失敗する場合、予めディレクトリを作成しておくこと**
[Node.jsのインストールに失敗する時の解決策（No such file or directory）](https://qiita.com/yn01/items/d1fa10dbe4850f7cd693)

```shell:
# ホームディレクトリで実行する
mkdir -p ~/.nodebrew/src
```

完了後、インストールされたバージョンを確認する

```shell:
nodebrew list

# 現在インストールされているバージョンの一覧と、currentに現在使用しているバージョンが表示される
v12.2.0
v12.4.0

current: v12.2.0
```

初回インストール時または、バージョンを切り替える場合は以下のコマンドを使用する

```shell:
nodebrew use  v12.4.0

# 正常に切り替えができているかを確認する
nodebrew list

# 切り替えができている場合currentが指定したものに切り替わっている
v12.2.0
v12.4.0

current: v12.4.0
```

**1.2.4. Node.jsのPATHを設定する**

上記のままだと`node`や`npm`コマンドがそのままでは実行できないのでパスを通す

```shell:
# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

完了後、.bash_profileを再読み込みする

```shell:
source ~/.bash_profile
```

完了したら正常にインストールされていることを確認する

```shell:
node --version

# パスが正常に通っている場合バージョンが表示される
v12.2.0

npm --version

# パスが正常に通っている場合バージョンが表示される
6.9.0
```

## 2. Windowsの場合

Windows10の場合はWSLが使用可能なのでMacと同様にhomebrew + nodebrewで構築が可能ですが、
WSLを使用しない場合やWindows10以外の場合は別のバージョン管理ツールが必要になります。
調べたところnodistが主流のようなので今回はこちらを元に記載します。

#### 2.1. nodistのインストール

**2.1.1. インストール**
[nodist公式サイト](https://github.com/nullivex/nodist/)

上記サイトにアクセスを行い、「Installation」項目内の`from the releases page`をクリック
![nodist_インストール手順_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/28a9be4e-0902-41a3-5f64-9ed7d8e897da.png)

「Releases」タグ内の最新バージョンの項目(今回はv0.9.1)内のexeファイルをクリックしてダウンロード
![nodist_インストール手順_02](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/28872a06-983d-459e-e5a8-b59ff4ebef5e.png)

インストール後、下記コマンドを実行して先程インストールしたnodistのバージョンが表示されることを確認する

```shell:
nodist -v
0.9.1
```

**2.1.2. Node.jsとnpmのバージョン切り替え**

下記コマンドで現在インストールが可能なNode.jsのバージョン一覧が確認できる

```shell:
nodist dist
```

指定したバージョンのNode.jsをインストール

```shell:
nodist + 12.2.0
```

インストールが完了後、Node.jsのバージョンを切り替える

```shell:
nodist 12.2.0
```

最新のNode.jsに合ったバージョンのnpmをインストールする
**追記**
nodistのバージョンが0.8.8の場合、下記コマンドが失敗するとのこと
最新のバージョンで実行すること

```shell:
nodist npm match
```

**2.1.3. バージョン確認**

下記コマンドをそれぞれ実行し、nodeとnpmのバージョンの確認及び、インストールが完了していることを確認する

```shell:Node.jsのバージョン確認
node --version
```

```shell:npmのバージョン確認
npm --version
```

```shell:nodistにインストールされているNode.jsと現在指定されているバージョンの確認
nodist ls
```

## VSCodeのインストール

Angularのコード修正を行うためにVSCodeをインストールします。

### 1. インストール

[VSCode公式サイト](https://code.visualstudio.com/)にアクセスして「Download for XX」をクリック
![VSCode_インストール_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/9a4ec7b7-86e2-b065-c4ac-1bf63a8aa469.png)

**1.1. Macの場合**
`VSCode-darwin-stable.zip`がダウンロードされるので解凍する
解凍後、`Visual Studio Code.app`作成されるので`アプリケーション`フォルダに格納後、実行する

**1.2. Windowsの場合**
`VSCodeUserSetup-x64-1.35.1.exe`がダウンロードされるので実行する

「次へ」をクリック
![install_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/79984b94-e964-5a00-fce4-9713295ff70a.png)

「同意する」にチェックを入れた後「次へ」をクリック
![install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c59efbe9-09d4-30d9-e0d3-bdbc1ee908ae.png)

インストール先を変更したい場合は変更後のパスを入力後に「次へ」をクリック
![install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/564d5f92-a7e8-465c-c6bc-e511dad066af.png)

プログラムグループを作成しない場合はあまり無いと思われるのでそのまま「次へ」をクリック
![install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/f5947bfe-3136-3c8c-75df-6cbc1fadbfc1.png)

追加したいアクションがある場合はそれぞれチェックをして「次へ」をクリック
※今回は「デスクトップ上にアイコンを作成する」にチェックを入れた
![install_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/a8897a5e-56fe-1e31-30c9-a203b90fe63d.png)

内容を確認して「インストール」をクリック
![install_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c2c37ce4-6f0f-3c6e-6c4e-2e991f4ab96c.png)

正常にインストールが完了した場合「完了」をクリックして終了する

### 2. 拡張機能の追加
VSCodeのインストールが完了後、Angularの開発を行いやすくするための拡張機能をインストールする

#### 2.1. 拡張機能の追加方法

拡張機能を追加する場合は左枠の中にある、下の図の垢枠で示しているアイコンをクリックした後に「拡張機能」下のテキスト欄で任意の拡張機能を検索する
![Extention_install_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/960f0264-06e0-fd4a-2c78-c0fd48b98f72.png)

#### 2.2. 必須の拡張機能

Angularで開発を行う上で使いやすい拡張機能が一式まとめてインストールできる拡張機能が出ている
**[Angular Essentials](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials)**
この拡張機能を入れれば下記の拡張機能が全てインストールされる
個別もしくは一部のみインストールを行いたい場合は各自インストールすること

* [Angular2 Inline](https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline)
* [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
* [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
* [Angular Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
* [Chrome Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
* [Editor Config](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
* [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
* [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [tslint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
* [Winter is Coming](https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming)

#### 2.3. 日本語化

日本語化を行いたい場合は以下の拡張機能をインストール

[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

#### 2.4. その他おすすめ

下記の記事でAngular以外でも便利になる拡張機能が説明されているので、必要であればインストールを行う
[VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

### 3. 設定変更

VSCodeで変更を行った方がよい設定があれば随時追記。

## Angular CLIのインストール

ここまでが完了したらAngular CLIのインストールを行います。
今回はver.7のインストールを行いますが、既に8がリリースされているので状況によっては8のインストールをお勧めします。
https://angular.jp/guide/releases

### 1. グローバルインストールとローカルインストールについて
複数開発を行っている場合、プロジェクトによってAngularのバージョンが異なる場合があると思います。
グローバルのAngularと異なるAngularのバージョンを入れたい時や、複数のバージョンをインストールしたい場合は
ローカルにインストールした方が良いでしょう。

### 2. グローバルにインストール(ローカルに入れない場合は必須)

#### 2.1. インストール
以下のコマンドでAngularをグローバルにインストールする

```shell:
npm install -g @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install -g @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data 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 http://angular.io/analytics. (y/N)
```

#### 2.2. バージョン確認

インストールが完了した場合、以下のコマンドでバージョンを確認する

```shell:
ng --version

# 正常にインストールされている場合以下が出力される
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.9
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.9
@angular-devkit/core         7.3.9
@angular-devkit/schematics   7.3.9
@schematics/angular          7.3.9
@schematics/update           0.13.9
rxjs                         6.3.3
typescript                   3.2.4
```

### 3. ローカルにインストール(任意)

試してみたところ、グローバルにインストールした場合でもローカルにインストールは可能みたいです。

#### 3.1. インストール

作成予定のプロジェクトに対するフォルダを作成後、そのフォルダに移動

```shell:
mkdir 【プロジェクト名】
cd 【プロジェクト名】
```

作成後、Angularをインストール(-gオプションは付けない)

```shell:
npm install @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data 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 http://angular.io/analytics. (y/N)
```

#### 3.2. バージョン確認

インストールが完了した場合、以下のコマンドでバージョンを確認する
※下記ではグローバルと異なるバージョンを入れるためにver.8をインストールした

```shell:
npx ng --version

# 正常にインストールされている場合以下が出力される

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.4
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.4
@angular-devkit/core         8.0.4
@angular-devkit/schematics   8.0.4
@angular/cli                 8.0.4
@schematics/angular          8.0.4
@schematics/update           0.800.4
rxjs                         6.4.0
```

## プロジェクトの作成及び実行確認

Angular CLIが正常にインストールされたことを確認するためにプロジェクトを作成して実行します。
プロジェクトは作成した直後に実行が可能な状態で生成されるので、一旦何も変更をせずに実行をしてみたいと思います。

### 1. プロジェクトの作成

以下のコマンドで新しいワークスペースを作成する

```shell:
# グローバルにインストールした場合
ng new 【出力パスを含めたプロジェクト名】

# 例
ng new C:/Angular/AngularProject

# ローカルにインストールした場合
# プロジェクト直下に移動していない場合は移動しておくこと
cd 【プロジェクト名】
npx ng new 【プロジェクト名】 --directory=./
```

**2019年10月23日追記**
Windowsでnodist経由でNode.jsをインストールしている場合、ローカルインストール時に`npx`のコマンドを実行時に`'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。`と出る場合は`npm install -g npx`を実行後に再度プロジェクトの作成を行ってください。

作成時にルーティング機能を追加する場合は`y`を入力する
追加した場合、ワークスペース内に`app-routing.module.ts`が追加されている

```shell:
Would you like to add Angular routing? (y/N) 
```

CSSを拡張したメタ言語で記載する場合はCSS以外を選択
今回はSCSSを選択する

```shell:
? Which stylesheet format would you like to use? (Use arrow keys)
  CSS 
❯ SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ] 
```

これらの設定は以下のオプションを設定することと同様となる

```shell:
# グローバルの場合
ng new 【出力パスを含めたプロジェクト名】 --routing=true --style=scss

# ローカルの場合
npx ng new 【プロジェクト名】 --directory=./ --routing=true --style=scss
```

コマンドの実行が終了後、正常にワークスペースが作成されていることを確認する

### 2. プロジェクトの実行

VSCodeを起動して先ほど作成したワークスペースを開く
例の場合、「フォルダを開く」を選択後に`C:/Angular/AngularProject`を選択して「開く」ボタンをクリックする

![Angularプロジェクトの起動_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/f5ebc61e-bbd6-51a7-fda8-182b91da7a71.png)

画面下部に「統合ターミナル」内の「ターミナル」タブをクリックして以下のコマンドを実行したあと、ブラウザで`http://localhost:4200`を開く

```shell
# グローバルの場合
ng serve

# ローカルの場合
npx ng serve

# 起動時に自動的に対象のアプリケーションをブラウザに開きたい場合はオプションをつける
ng serve --open
```

![terminal_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/d959eb63-f3c6-b924-39d3-d89af3bb7f26.png)

統合ターミナルが表示されていない場合はメニューの「表示」、「ターミナル」をクリックして表示する

![terminal_02](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/505b28df-8d58-2abb-7541-4d19570ee750.png)

正常に起動できた場合、ブラウザで以下の画面が表示される
<img width="600" alt="実行画面" border="1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/a4a1f8d0-bfde-e0fd-ec8a-291fbbd057c2.png">

# 自動整形

上の作業でAngular自体の環境構築は終了しました。
開発するだけなら上記設定だけで問題ないですが、複数人で開発を行う場合はコードスタイルに沿っているかが重要になります。
ですので開発時に自動的に構文チェックを行うようにします。
以下はプロジェクトを作成するごとに行う作業です。
プロジェクト毎に設定する理由として、他の言語で行う場合にそれぞれ反する設定が混じらないようにするためです。

## TSLintを設定する

メニューの「Code」(Windowsの場合は「ファイル」)をクリックして「基本設定」、「設定」をクリック
設定画面が表示されるので「ワークスペース」タブをクリック後、いずれかの項目の「settings.jsonで編集」をクリックする

![config_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/f0e3f2ce-77b3-8343-2c89-b3bc01608bd3.png)

settings.jsonを開いた後、以下のように書き換えることでTypeScriptに対してLintが行われるようになる

```json:settings.json
{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "tslint.configFile": "tslint.json",
  "[typescript]": {
    // ファイル保存時に自動フォーマットをしないようにする
    "editor.formatOnSave": false,
    // 貼り付けた内容に対して自動フォーマットをしないようにする
    "editor.formatOnPaste": false,
    // 入力後に行に対して自動フォーマットをしないようにする
    "editor.formatOnType": false,
    "editor.codeActionsOnSave": {
      // 保存時に対して行われるアクションにtslintを設定する
      "source.fixAll.tslint": true
    }
  }
}
```

TypeScriptに対してルールを設定したい場合、`[プロジェクト配下]/tslint.json`を修正する
※追加した方が良いルールがある場合随時追記する

# `npx`または`ng`コマンドの実行に失敗する(Windows10のみ)

`(npx) ng generate component 【コンポーネント名】`などのコマンドを実行した場合に「このシステムではスクリプトの実行が無効になっているため～」というエラーが発生する場合、[スクリプトの実行ポリシーに制限](https://docs.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-6)がかかっている。

制限がかかっているかの確認を行うにはPowerShellを起動後、以下のコードを実行する。

```powershell:
>Get-ExecutionPolicy
# スクリプト実行に制限あり
Restricted
```

スクリプト実行を許可する場合は**RemoteSigned**など、スクリプト実行が許可される実行ポリシーに変更する。
※**Bypass**はセキュリティリスクが向上するので避けること

実行ポリシーを変更する場合、管理者権限でPowerShellを起動後、以下のコードを実行する。

```powershell:
>Set-ExecutionPolicy RemoteSigned
# 実行後、ポリシーを再確認する。変更に成功している場合は指定したポリシーが表示される
>Get-ExecutionPolicy
RemoteSigned
```

# 最後に

アプリケーションの実行まで完了した場合、以降はAngular公式のチュートリアルを
順に実行するとAngularについての理解が深まると思います。
[Angularチュートリアル](https://angular.jp/tutorial)

# 参考
[Macにnode.jsをインストールする手順。](https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
[【Mac】node.jsインストール方法](https://qiita.com/yacchi1123/items/a85598bf7a35cb1307dc)
[.bash_profileと.bashrcのまとめ](https://qiita.com/takutoki/items/021b804b9957fe65e093)
[Node.jsのインストールに失敗する時の解決策（No such file or directory）](https://qiita.com/yn01/items/d1fa10dbe4850f7cd693)
[nodistでNode.jsをバージョン管理](https://qiita.com/satoyan419/items/56e0b5f35912b9374305)
[nodistでnpm6.2.0以降にアップデート出来なかった話](https://qiita.com/TalkWithWater/items/aa7b1becd8fc1344170d)
[MacにVSCode (Visual Studio Code)をインストールする方法](https://www.karelie.net/install-vscode-mac/)
[WindowsにVSCode (Visual Studio Code) をインストールする方法](https://www.karelie.net/install-vscode-windows/)
[[Mac] Angular開発環境構築](https://qiita.com/mii-chan/items/e0095da0a150e7b797c2)
[Angular をやるのに欠かせない VSCode Extension](https://qiita.com/tkiryu/items/98596eb40a83373af9bd)
[VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)
[[TypeScript] VSCodeでファイル保存時にtslint.jsonに沿った整形を行う](https://qiita.com/ksh-fthr/items/4092cba0574554ae88be)
[Angular6のプロジェクトを作ったらまずやっとくこと](https://qiita.com/k5n/items/dbda26cf6b899a11329d)
[グローバルにAngular CLIをインストールしないでng newする方法 ](https://php-java.com/archives/2849)
[npxでローカルパッケージを実行できるんです！](https://confrage.jp/npx%E3%81%A7%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%93%E3%81%A7%E3%81%99%EF%BC%81/)
[【Windows10】nodistでnodeをインストール](https://qiita.com/nt_tn/items/f3193cde496399b41e51)
[Powershellを楽に実行してもらうには](https://qiita.com/tomoko523/items/df8e384d32a377381ef9)