Angularを学ぶなら公式チュートリアルがおすすめ！！

今までAngular1.3の経験しかなかったが現在の案件がAngular7を使っているため、一から勉強しようと思い、公式チュートリアルをやってみたら結構理解が深まったのでご紹介。

Angularで少し調べるとQiitaやブログ記事が出てくるが一通り読んでみてよく分からなかった。

読むだけでなく手を動かし考えるのが一番の近道だと経験上わかっているのでAngularの公式チュートリアルはまさに手を動かしながら覚えるベストな方法だ。

チュートリアルを見てもらえれば分かるがNode.js、Angular CLI、nmpをインストールして環境構築、その後のアプリ作成まで丁寧に記載されているので比較的スムーズに読み進めながら、実際にコードを書いて理解を深めることができるでしょう。

また、チュートリアルでは記載されてませんが、エディタはVisual Studio Codeを使うのがオススメです。（もし他にお気に入りのエディタ、IDEがあれば自分のお気に入りを使ってもらって問題ないです）

Visual Studio Codeはコードを書くときに補完してくれたり、ターミナルも備えてるのでチュートリアルに出てくるコマンドもVisual Studio Code上で叩けるので非常に便利です。

このチュートリアルですが結構ボリュームがあるので最初の方は結構丁寧に記載されてますが後半の「4.サービス」あたりから徐々に難しくなっていき、チュートリアル通りにやってるつもりが、動かなくなることが何度かありました。

（私の勘違いでなければチュートリアルで稀に説明漏れがあるんじゃないか？）

でも各チュートリアルの最後にはその章で説明した全てのコードを参照することができ、さらにデモ(live example)の参照、ソースのダウンロードができるので分からなくなったり、動かない場合はコードを参照して次に進めます。

個人的なおすすめですが、一度で全て理解しようとするよりは、一旦最後までやり切って、もう一度、チュートリアルを読み直すか、自分でコーディングするのが理解の早道だと思います。

ということで、自分でコーディングしてみました。

最初なのでシンプルなページです。

【ログイン画面】

モックにログインユーザーを設定していて、そのユーザー、パスワードと一致する場合のみログインできます。

【リスト画面】

モックに設定してあるリストデータをカンマ区切りで表示しています。

「back to login page」リンク押下でログイン画面に戻ります。

チュートリアルをやる事で基礎からしっかり学べた印象です。

この２つの画面もそんなに時間がかからずコーディングする事ができました。

※Gitにもあげておきます。

Angular未経験者が適当にネットの記事を参考に勉強しようと思うなら間違いなく公式チュートリアルをやる事をおすすめします。