Hello Angular project

どうも、プログラミングを始めて一年ちょいくらいの初心者エンジニアです
普段はscalaを主に書いていて、ちょこちょこAngularとかも書いてます

これからはその、ちょこちょこ書いてるAngularについて書いていきたいと思います。

それではまず、、

Angularって誰

読み方は「アンギュラー」になります。なんか中堅クラスのボスみたいな名前。
Web開発は近年すごいスピードで成長しているらしく(開発経験１年ちょいなのでそもそも過去を知らない)そのおかげかフロントエンドフレームワークのトレンドの移り変わりはものすごい。
そんな激アツな世界で群を抜いて３強に躍り出るのが

Angular　(アンギュラー)
React　　(リアクト)
Vue　　　(ビュー)

この三つは僕でも知ってるくらいなので感覚的にサッカー知らない人でも知ってるバイエルンミュンヘン、レアル・マドリード、バルセロナといったところか

まぁそんな訳のわからない話は置いておいて上の三つのことをもう少し知りたい人は
下の記事を読むといいです！
JavaScriptフレームワークを比較してみよう

それじゃぁ早速Angularプロジェクトの作成に入りましょう！

といいたいところなのですが!!!

Angular初心者の前にプログラミング初心者の皆さんのためにまずはそれらを取り巻く環境からいきましょう

※自分も全て理解しているわけではないのでもしおかしな点や、お前ここクソじゃね？みたいなとこあったらクソとか言わずに教えていただけると嬉しいです

Angularプロジェクトを始める前に

まずnodeのInstallが必要です
結構この辺はバージョンを管理するのが初心者の方には難しく、なんかワカンねぇけどエラーいってるー！！みたいなことがあると思います。
でもちゃんとエラーを見ると

$yarn install とか npm install　すると
エラーエラーエラーエラー
君のnodeなんだけど〇〇から〇〇のバージョン使ってくんね？

ってちゃんとわかりやすく怒ってくれてる。初めの頃ってエラー出ただけで、中学の時の英語の長文読解問題見たときくらい萎えますよね。。。
でもよく読めばちゃんと書いてあります。エラー文はしっかり読みましょう！！

とまぁそんなことよりわかったけどどうやってバージョン上げたり下げたりすんの！！

そんな人たちのために先人たちはnodeのバージョンを、Install、version up,down,を簡単に管理できる物を作ってくれてる。すごい。
nodeのバージョンを管理してくれるものは二つあって(他を知らないだけ)

nvm　　　　(Node Version Manager)
nodebrew　(意味は知らない)

二つの違いはイマイチわかないけど自分はnvmを使っているので今回はそれを使って入れてみましょう

nvm install

＄curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

できたら確認！

$nvm --version
〇〇

と出たら成功です！
では早速インストールするnodeのバージョンをみてみましょう！

$nvm ls-remote
.........
.......
.....
...
..
.

このコマンドは今現在インストールできるnodeのすべてのバージョンを一覧するコマンドです！
あと重要なこととしてnodeのバージョンは奇数が最新機能追加、偶数が安定してるバージョンを意味しているので基本的には偶数のバージョンを入れるようにしましょう！

それとnvm ls-remoteで出てくるバージョンのなかで各偶数の一番最後のバージョンにはLTSと書かれていると思いますがLong Term Suport（サポート期間が普通のものより長い）を意味しているのでもしエラーで

〇〇から〇〇のバージョンにしてと言われたらその範囲のLTSのnodeを入れるようにしましょう！

よし！じゃぁ早速nodeをインストールしてみましょう！

$nvm ls-remote
.............
...........
.........
v10.16.0   (Latest LTS: Dubnium)
v11.0.0
v11.1.0
v11.2
..
v12.3.1

最新版はv12.3.1のようですね！(2019年６月)
ではLTSが書かれてる最新バージョンのv10.16.0を入れてみましょう！

$nvm install v10.16.0
~~~~~~色々頑張ってる~~~~~~~

できたら確認！

$nvm ls
->     v10.16.0

今インストールしたv10.16.0が表示されていたら大丈夫です！
試しにもう一つ最新版のv12.3.1をインストールしてみましょう！

$nvm install v12.3.1

確認。

$nvm ls 
       v10.16.0
->      v12.3.1

こうなってくれていれば完璧です！
この矢印は今使っているnodeのバージョンを表しているので

$node -v         ← nodeのバージョンを見るコマンド
v12.3.1

になるはずです
じゃぁバージョンの切り替えをしてみましょう！

$nvm use v10.16.0
Now using node v10.16.0 (npm v6.9.0)
$node -v
v10.16.0

(npm v6.9.0)と書いてありますが
npmっていうのは(Node Package Manager)の略で簡単に言うとNode.jsのいろんな機能のパッケージを管理してくる最強の人
npm入門
↑　の記事でわかりやすい部分上がったので一部抜粋

npmはフロントエンドで使用するパッケージのバージョン管理を行うのに用いられます。
npmでは、npmでインストールしたパッケージのバージョン情報をpackage.jsonに格納します。
このpackage.jsonからパッケージを一括でインストールすることが出来るため、package.jsonを一元管理することによりフロントエンドで使用するパッケージのバージョン管理を一元化することが出来ます。

まぁ要するにフロントエンドプロジェクトの一番上の階層にあるpackage.jsonってファイルでプロジェクトに使うライブラリとかのバージョンを一括管理してくれるってことだと思います

兎にも角にもこれで君もnodeのバージョン違いのエラーに苦しめられることはないでしょう！

最新のLTSバージョンはv10.16.0

長くなりましたがそのまま行きましょう！

プロジェクトの作成

今回の記事に関係するリンク
https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea
http://iwasiman.hatenablog.com/entry/2018/04/23/200000
https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3