第2回：Angularの環境構築

[目次：Webアプリ開発ロードマップ](https://qiita.com/radiance1104/private/7c5b04ce4cf8ec7bd708)

# 第2回：Angularの環境構築
今回からAngularアプリを作っていきます。
まず、Angularの元となるNode.jsをインストールします。

## Node.jsをインストールする

### 紹介
Node.jsはChromeエンジンを利用したJavascriptランタイムです。
通常、JavaScriptはブラウザ内に読み込まれて動作しますが、Node.jsを利用することでコマンドラインからJavaScriptプログラムを動かすことができます。
また、Node.jsはnpm (Node Package Manager)を具備しており、GitHubからOSSなモジュールを取得し、利用することができます。

### 注意事項
Node.jsは[Node.js公式サイト](https://nodejs.org/ja/)からインストールしたいところですが、一度インストールしてしまうとアンインストールが面倒な代物です。
開発プロジェクトによって利用するNode.jsのバージョン指定がありますので、簡単にバージョンを切り替えられるようにインストールしましょう。
Node.jsのバージョン管理を行えるNodebrew(mac)やNodist(win)など他にもあるようですが、ここではNodebrewを使ってインストールしていきます。

### インストール
1) 下記のコマンドを実行し、nodebrewをインストールしてください。
brewコマンドが使えないmacユーザは[Homebrew公式サイト](https://brew.sh/index_ja)からインストールしてください。

  ```
  $ brew install nodebrew
  ```

2) コマンドラインが使えるように、環境変数PATHを通します。
~/.zprofileに下記の一文を書き足します。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

3) 下記のコマンドでnodebrewのインストールが正常に行われたか確認します。

```
$ nodebrew -v
nodebrew 1.0.1
```

4) 次にnodebrewを使ってNode.jsをインストールしていきます。
下記のコマンドで利用できるNode.jsのバージョン一覧を表示します。

```
$ nodebrew ls-remote
```

5) バージョンを指定してNode.jsをインストールします。今回はv14.9.0を利用します。

```
$ nodebrew install-binary v14.9.0
Fetching: https://nodejs.org/dist/v14.9.0/node-v14.9.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully
```

6) Node.jsがインストールされたことを確認します。
下記のコマンドでPCにインストールされているNode.jsのバージョンを確認できます。

```
$ nodebrew list
v14.9.0

current: v14.9.0
```

currentのところに表示されるのが現在利用しているNode.jsのバージョンです。


7) 複数インストールされたバージョンのうち、利用するバージョンを切り替えるには下記のコマンドを実行します。

```
$ nodebrew use v14.9.0
```

8) Node.jsが正常にインストールされたか確認する。

```
$ node -v
v14.9.0
$ npm -v
6.14.8
```

## Angularをインストールする

### 紹介

AngularはNode.jsを利用して作られたWebアプリフレームワークです。
また、Angular用のソースコードを一般的なhtml/css/jsにビルドする機能や、動作確認用にサービングする機能を持っています。

### インストール
Angularのパッケージである@angular/cliをインストールします。
cliはCommand Line Interfaceの意味です。

1) まず下記のコマンドで公開されているバージョンを確認します。

```
$ npm info @angular/cli versions
```

2) 下記のコマンドでインストールします。今回は10.0.8をインストールします。
-gオプションはglobalの意味合いがあります。通常、npmでインストールされるモジュールは、ローカルで作業しているパッケージの中にインストールされますが、
-gでインストールすることでシステム内にインストールことになり、パッケージの内外から利用できるようになります。
cliは基本的に-gでインストールすると考えていてください。

```
$ npm install -g @angular/cli@10.0.8
```

3) 下記のコマンドで@angular/cliが正常にインストールされたかを確認します。
aNGularのNGコマンドです。

```
$ ng version
```

## Angularプロジェクトを作成する

下記のコマンドでAngularのプロジェクトを作成します。
frontという名前のプロジェクトが作成されます。

```
$ ng new front
? Would you like to add Angular routing? (y/N) -> y
? 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                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 
```

* 1つ目の問い：Angularのルーティングを生成するか。  
  後で自作することもできますが、作ってもらいます「y」を選択
* 2つ目の問い：cssのフォーマットに何を利用するか。  
  scssを選択。css以外はcssを高度にしたもので、そのままではブラウザで読み込むことができないため、ビルドを通す必要があります。

しばらく待っているとプロジェクトの作成が完了します。
下記のファイルが生成されます。

| ファイル・フォルダ | 説明 |
| ---| --- |
| README.md | MarkDown形式で書かれたパッケージの説明ファイル、第三者に対して使い方などを記載します。 |
| angular.json | Angularの設定ファイル |
| e2e | あまり気にしなくていいです |
| karma.conf.js | 自動試験用の設定ファイル |
| node_modules/ | npmでインストールされたモジュールがここに入ります |
| package-lock.json | node_modulesを再現するための設定 |
| package.json | Node.jsのパッケージ設定 |
| src | これからAngularプロジェクトで作成するソースコード一式 |
| tsconfig.app.json | TypeScriptの設定ファイル |
| tsconfig.base.json | TypeScriptの設定ファイル |
| tsconfig.json | TypeScriptの設定ファイル |
| tsconfig.spec.json | TypeScriptの設定ファイル |
| tslint.json | TypeScriptのLint設定ファイル。静的コードチェックのためのもの |

### node_modules/
このフォルダはnpmによってインストールされたモジュールがインストールされます。
このフォルダを削除しても、`$ npm install`をパッケージ内で実行することで、再度node_modulesは作られますので、gitに登録するときはこのフォルダは除外します。

### package.json, package-lock.json
pakage.jsonのdependenciesやdevDependenciesにパッケージに必要なモジュールがバージョン指定で記載されています。ただし、"^6.0.0"のような指定で、バージョン6以上など、範囲指定がされているため、利用していたモジュールを完全に再現するためにはpackage-lock.jsonが必要になります。

## Angularでサービングする

1) Angularが必要としているモジュールをインストールする

```
$ cd front
$ npm install
```

2) サービングする

```
$ ng serve
```

3) ブラウザでアクセスしてみる

ブラウザから http://localhost:4200 にアクセスしてみましょう
下記のように空のWebアプリが表示されれば成功です。

![localhost_4200_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/390ee896-6782-b3e7-f539-23d6386d28e3.png)


ちなみに下記のコマンドを実行することで、ビルドが行われ、distフォルダにビルド結果が出力されます。

```
$ ng build
```

今回はここまでです。次回はログインページを作っていきます。
今回開発したソースコードは[GitHub](https://github.com/radiance1104/web-learning-loadmap/tree/create-angular-project)に入っています。