[Mac] Angular開発環境構築

私がMacでAngular開発を始めた時の環境構築手順をまとめました。

# 1. Node.jsのインストール
最初にNode.jsのインストールをします。Node.jsのバージョン切り替えを簡単に行えるようにするため、私は[nodebrew](https://github.com/hokaccha/nodebrew)を使ってインストールしています。

nodebrewを使ったインストール手順については、下記の記事をご参照ください。
[[Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順](https://qiita.com/mii-chan/items/f3291ae8bbbf788c8aa3)

nodebrewを使用しない場合は、[公式サイト](https://nodejs.org/en/)からダウンロードできます。

# 2. (お好みで)Yarnのインストール
私はYarnを使っています。お好みでインストールしてください。
下記のコマンドでインストールできます。

```bash
$ npm install -g yarn
```

インストール後下記のコマンドを実行して、バージョン情報が出力されれば正しくインストールされています。

```bash
$ yarn -v
```

# 3. Angular CLIのインストール
次に、Angular CLIをインストールします。Angular CLIを使えば、新規プロジェクト作成やComponent、Serviceの追加などがコマンドで簡単にできるので非常に便利です。

```bash
npm install -g @angular/cli
```

インストール後下記のコマンドを実行して、アスキーアートと各種バージョン情報が出力されればOKです。

```bash
$ ng -v
```

(＊ Yarnをお使いの方のみ実行) packageManagerをYarnに切り替えます

```bash
$ ng set --global packageManager=yarn
```

npmに戻したい場合は、`$ ng set --global packageManager=npm`でできます。

# 4. Visual Studio Codeのダウンロード
Visual Studio CodeはAngular向けの拡張機能が豊富なため、Angular開発と相性が良いです。[公式サイト](https://code.visualstudio.com/)で「**Download for Mac**  Stable Build」ボタンを押し、ダウンロードしたZipファイルを解凍してアプリケーションフォルダに入れます。(余談ですが、2017年9月にリリースされたversion 1.17から[アイコンが新しくなった](https://code.visualstudio.com/updates/v1_17#_new-visual-studio-code-logo)みたいですね。)

# 5. Visual Studio CodeにAngular Essentialsを入れる
Visual Studio Codeの拡張機能には、[Angular Essentials](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials)というAngular開発に便利な拡張機能一式をまとめてダウンロードしてくれるものがあるので、それをインストールしておくとAngularの開発がしやすくなります。

Visual Studio Codeを開いて、サイドメニューの一番下、拡張機能アイコンを押します。
![サイドメニューの一番下の拡張機能アイコンを押す](https://qiita-image-store.s3.amazonaws.com/0/172234/7486bef9-a305-4bcc-f188-f0f394905354.png)

左上に検索バーがあるので、「Angular Essentials」と入力してAngular Essentialsを検索します。
![検索バーに「Angular Essentials」と入力してAngular Essentialsを検索](https://qiita-image-store.s3.amazonaws.com/0/172234/7f877ac2-e6fb-1018-041e-68a124c0279f.png)

上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。

Angular Essentialsに含まれる拡張機能は以下の9つです。各拡張機能の詳細については、各リンク先のMarketplace上の情報をご参照ください。

[Angular v4 Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
[Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
[Editor Config](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
[tslint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
[Chrome Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
[Angular Inline](https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline)
[Angular Material Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

# 6. (お好みで) Visual Studio Codeに「Auto Import」を入れる
Angular Essentialsに加えて、個人的に非常に気に入っているのが[Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport#overview)という拡張機能です。これがあればWebStormのように、インポート文を自動で追加してくれます。これのおかげでより高速に開発ができるので、とても助かっています！

＊注意事項： 「Auto Import」は、**TypescriptとTSX**で動作する拡張機能です。

先程と同じくVisual Studio Codeを開いてサイドメニューの一番下、拡張機能アイコンを押し、左上の検索バーに「Auto Import」と入力して、Auto Importを検索します。
![検索バーに「Auto Import」と入力して、Auto Importを検索](https://qiita-image-store.s3.amazonaws.com/0/172234/9983e88f-0658-fee1-b1d6-349ea23d9c6b.png)

上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。

以上で環境構築は終了です。

ここまでできたら公式の[Angular - QuickStart](https://angular.io/guide/quickstart#create-proj)のStep2から順に進めて、簡単なAngularアプリケーションを実行してみましょう。

## おわりに
以上が、Angular開発環境構築時の流れです。私はこれで十分快適に開発できています。ぜひさくっとAngularの開発環境を構築して、Angular開発の第一歩を踏み出してみてください！