Angularのインストールとプロジェクト作成

#はじめに

これからWebアプリケーションを作成する業務に携わることになり、
SPA系の技術に触れたことがなかったため下調べの上Angularを導入してみることにしました。
導入に関しては[@seteen](https://qiita.com/seteen)様の[Angular入門](https://qiita.com/seteen/items/87b6caf746a65b0397ee)を参考にさせていただきました。

## 導入にあたって調べた単語
##### Node.js
サーバーサイドでJavaScriptを使えるようにするモノ(環境)
※[Node.js を5分で大雑把に理解する](https://qiita.com/hshimo/items/1ecb7ed1b567aacbe559)
##### nodist
Node.jsのバージョン管理ができる。コマンドでNode.jsのバージョン変更・更新等が可能
##### npm
Node.jsのパッケージマネージャー。
nodistでバージョンを指定し、npmでバージョンに紐付いたパッケージを引っ張ってくる
処理としてはコマンドでpackage.jsonの設定を作成しているらしい
※[npmでnode.jsのpackageを管理する](https://qiita.com/sinmetal/items/395edf1d195382cfd8bc)
##### yarn
npmより後で出てきたパッケージマネージャー。
Facebook等の開発者がnpmの不満なところを改善して使いやすくした物らしい(詳細な言及はしません)
※[yarn 日本語概要](https://yarnpkg.com/ja/)
##### Angular
Google開発のWeb開発用フレームワーク。React・vueなどと違いUIだけでなくフルスタックなことと、
前述の2個とは異なりTypeScriptの習得が必須になることから学習コストが高い。
※[JavaScript: フレームワーク React/Vue/Angularについて](https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5#angular)

# Angularの導入・インストール
## nodistを導入し、Node.jsの最新化
[参考：[Node.js] Node.js の導入(Windows編)](https://qiita.com/ksh-fthr/items/fc8b015a066a36a40dc2)

#####1.nodistのGitHubからインストールファイルを取得しPCにインストール(場所は任意でOK)
　https://github.com/marcelklehr/nodist

#####2.nodistが導入できているか確認($nodist -v)
　インストールできるnodeのバージョンを確認($nodist dist)
![1_nodistのバージョンを見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/c0708bcd-b44a-ef69-7392-69e8309cb19a.png)
#####3.Node.jsの最新バージョンをインストールする($nodist + v00.0.0)
![2_nodistの最新バージョンを入れる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/cba78a64-4f2c-9665-595d-7836c8d5f9dd.png)

## Angular CLIの導入
#####4.AngularCLIをyarn経由で導入($yarn global add @angular/cli)
###### エラーでインストールできず
![5_CLIを入れるが再度入らない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/dccdcd34-bbaa-f669-b165-977188533d49.png)



###### Node.jsのバージョンがインストール時に変更されていなかった
nodist installを実行した後、バージョン変更をしていなかったことが原因？
![6_nodistのバージョンが変更できてなかった - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/081350ce-ee86-b897-46a2-1f49c4ea71bd.png)
#####5.nodistを使いAngular対象のNode.jsに変更した上でAngularCLIを導入する
**$nodist v00.0.0**の記法だとインストールされていないバージョンをインストールするか、
インストール済の場合バージョン名を表示するだけのようなので、**$nodist 00.0.0**の形式で記述して
Node.jsのバージョンを指定したバージョンに変更する。
(ここだとNode.jsのバージョンがAngularCLIの対象外だったため、インストールが実施されていなかった)

※[Nodist を使って、Node.js のバージョン管理を行う方法【 Nodist 導入編 】](https://qiita.com/Futo23/items/0825aa96088c5ff0906b#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%8F%A9%E3%81%8D%E6%96%B9%E3%81%8C%E9%96%93%E9%81%95%E3%81%A3%E3%81%A6%E3%81%84%E3%81%9F-%E6%B1%97)
 　
 
#####6.AngularCLIのバージョンを確認し、インストールできているか確認($ng version)
![8_Angularのディレクトリ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/ff6350c5-ca0b-a1e8-e3df-10c23671e30e.png)


## Angularのプロジェクト作成
ここまで実行できていれば下記コマンドで自動プロジェクト作成、自動ビルドの上ブラウザが開きます。
#####7.AngularCLIコマンドでプロジェクトを作成($ng new [プロジェクト名])
#####8.作成したプロジェクトのディレクトリに移動し、プロジェクトの起動($ng serve —-open)

![9_できた - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500716/235c9248-67c5-44d9-3714-424ec74691ff.png)

できた！

#終わりに
・単語が結構曖昧だったため、まとめたことで関連記事が読み進めやすくなった。
　疑問点が出たらすぐ調べたほうが後で頭の中で情報がつながるのですぐ調べるのは大事ですね！

・管理するパッケージが多いので作りながら差異についてはなれていく必要があると思いました。
　実用する場合LTSやTSの対応等も考える必要が出てくるので、ある程度作成できたら
　導入コストの低いReact/vueとも比較して行けたらと思います。