フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

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

スポンサーリンク

スポンサーリンク

f:id:ksakae1216:20190211222932p:plain

Angular Tutorial チュートリアル

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

 

 

Angular公式チュートリアル

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

 

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

 

angular.jp

 

チュートリアルの内容

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

 

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

 

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

 

もし途中で分からなくなった場合

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

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

 

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

 

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

 

勉強後にログイン画面、リスト表示画面を作成

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

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

 

【ログイン画面】

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

f:id:ksakae1216:20190211220435p:plain

【リスト画面】

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

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

f:id:ksakae1216:20190211220604p:plain

 

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

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

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

github.com

 

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