Angular環境構築 これだけでOK！

## はじめに
Angularの開発環境をはじめて構築する人に向けて書いています。
この記事を読むと，MacでのAngularの開発環境を構築できるようになります！！

## この記事を実施した環境
・macOS Catalina 10.15.7
・Homebrew 2.4.12
・Nodebrew 1.0.1
・Nodo.js 12.13.1
・npm package manager 6.14.8
・Angular CLI 10.0.6
・Angular 10.0.6

## ロードマップ

1. Homebrewのインストール
2. Nodebrewのインストール
3. Nodebrewを用いたNodo.jsのインストール
4. npmを用いたAngular CLIの導入
5. 新規プロジェクトの立ち上げ

## 1. Homebrewのインストール
※ Homebrewが既にインストールされている方は，[インストール済み](#インストール済みの場合)までスキップして下さい。
#### ・Homebrewとは
HomebrewはMacで広く使われているパッケージマネージャです。
ソフトウェアのインストールを単純化し一元管理してくれます。
今回はNodebrewをインストーるするために使用します。
http://brew.sh/index_ja.html

#### 手順
[Homwbrew HP](http://brew.sh/index_ja.html)のインストールコマンドを実行する。

```terminal:コマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
※ 2020年10月23日現在に記載されているインストールコマンドです。

Xcodeのcommand linet toolがインストールされてない場合は自動でインストールされます。

```terminal:コマンド
brew -v 
Homebrew 2.4.12  #バージョンが表示されれば，ひとまずインストール完了
```
インストール済みに続く…

#### インストール済みの場合

Homebrewの状態をチェックします。

```terminal:コマンド
brew doctor 　
Your system is ready to brew.  #このメッセージが出ればbrewは正常な状態です。
```

`brew doctor`で警告メッセージが出る場合は，関連するパッケージが古くなっているか，または何らかの問題があります。メッセージに従って警告を解消して下さい。

Homebrewを最新状態にしておきます。

```terminal:コマンド
brew update  #Homebrew自体のupdate
brew upgrade  #Homebrewに関連するパッケージを含むupdate
```

## 2. Nodebrewのインストール
#### ・Nodebrewとは
Node.jsのバージョン管理ツールです。
プロジェクトによりNode.jsのバージョンを管理したい時に便利です。
今回はNodebrew経由でNode.jsをインストーします。
https://github.com/hokaccha/nodebrew

```terminal:コマンド
brew install nodebrew
nodebrew -v  #このコマンドでバージョンが表示されればインストール完了
```

## 3. Nodebrewを用いたNodo.jsのインストール
#### ・Node.jsについて
Angularのプロジェクトを動かすにはNode.jsが必要です。
Node.jsをとても簡単に説明すると「サーバーサイドでjavascriptを使えるようにしたもの」です。Node.jsを利用するとリアルタイム通信やスケーラブルなネットワークプログラムを実現することができます。

#### インストール

Node.jsをインストールして行きましょう。
次のコマンドで，インストール可能なNode.jsのバージョンを確認することができます。

```terminal:コマンド
nodebrew ls-remote
```
インストールは次のいずれかのコマンドを実行して下さい。

```terminal:コマンド
nodebrew install-binary バージョン番号（例：v15.0.1）  #バージョンを指定する場合
```
```terminal:コマンド
nodebrew install-binary latest　　　　　　　　　　 #最新版を取得する場合
```
```terminal:コマンド
nodebrew install-binary stable                　#安定版を取得する場合
```
次にインストールされてたバージョンを確認します。


```terminal:コマンド
nodebrew ls

v12.13.1　#インストールされているバージョンがリストアップされる

current: none　#現在採用されているバージョンが表示される。インストール仕立ての場合はnone
```
#### 有効化
次にインストールしたバージョンを有効化します。
インストールされたNode.jsリストの中で使用するバージョンを次のコマンドで有効化して下さい。

```terminal:コマンド
nodebrew use v12.13.1

nodebrew ls　　#有効化されたか確認

v12.13.1　
current: v12.13.1　　#v12.13.1が設定された
```

####  パスを通す
次のコマンドで，nodeが使えるように環境パスを通します。（Catalina標準のzsh版）

```terminal:コマンド
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```

ターミナルを再起動して変更を反映させた後、nodeコマンドが使えるか確認

```terminal:コマンド
node -v  #バージョンが表示されればOK！
```

## 4. npmを用いたAngular CLIの導入
#### ・npm Node Package Manager とは？
Node.jsのパッケージ（予め用意された便利な機能をまとめたもの）をインストールしたり管理するためのツールです。Node.jsをインストールした段階で同時にインストールされています。

#### ・Angular CLI とは？
Angular CLIはAngularを構築するためのファイル群を自動生成してくれるツールです。
コマンド一つでAngularプロジェクトを構築してくれます。

このステップでは，Angular CLIパッケージをnpmを用いてインストールします。

```terminal:コマンド
npm install -g @angular/cli　#バージョンを指定したい場合は「cli@バージョン」と記述します。
```
途中でGoogleに使用状況の共有を許可するか聞かれます。許可する場合は`y`を入力して先に進んでください。

## 5. 新規プロジェクトの立ち上げ
いよいよ，Angularプロジェクトの立ち上げです。
プロジェクトを立てるディレクトリに移動し，次のコマンドを実行して下さい！

```terminal:コマンド
ng new my-app
? Would you like to add Angular routing? Yes　　#ルーティングファイルを作るか聞かれます
? Which stylesheet format would you like to use? SCSS　　#プロジェクトで使うCSS形式を選択
```

プロジェクトのディレクトリに移動して、サーバーを起動しましょう。

```terminal:コマンド
cd my-app
ng serve  #ファイルのコンパイルに少し時間がかかる
```

ブラウザで`localhost:4200`にアクセスしてページが表示されたらOKです！

##  まとめ
お疲れ様でした!
Angularの環境構築完了です。