はじめに
ゆえあって初めてのJSフレームワークがAngularだった私が、当時の自分が一番最初に欲しかったであろうアドバイスと情報をまとめました。基準は
- HTML,CSS:多分触れる
- JavaScript:よわよわ（ES6なにそれ？）
- TypeScript:はじめまして、おてやわらかに
この基礎もできてないレベルをベースにして、ここから最短でAngularと仲良くなるルートを提案した記事となります。
と、同時にAngularにおけるメリット・デメリット、フレームワーク全般に共通しそうな落とし穴などの注意点も残しておきます。
いきなりAngularという奇特な人間おらんやろと思いつつも、もし私と同じ人間がいた時にすこしでも早くAngularとお友達になっていただけたら嬉しいなと思って書きました。
学習当初に情報を漁って気づいたこと
JSフレームワークだと、Vue,React,Angularが三大フレームワークとして取り上げられ、比較されますが、そのなかでもAngularはよくハブられる印象。やっぱり利用者が少ないみたいだからね。
それでも情報を漁っていくのですが、案外見かけなかったなあというのが、これからAngularを学習する人視点に降りて書かれたメリット/デメリットを見かけなかったかなということ。
まだ触りたての自分ではありますが、Angularを使えるように学習してきた現時点で、「Angularを勉強してきたからこそじゃないかなー」というメリットを先に紹介いたします。
Angularを学ぶメリット/デメリット
メリット編
①使えるようになった時の“ひとくち”が大きい
これはデメリットにも共通するのですが、初めからTypeScriptを前提としているので嫌でもTypeScriptの経験値が稼げます。公式ページのチュートリアルもJavaScriptのES6の記法なので新しい記法もキャッチアップできます。
将来的な視点で、無理矢理にでもTypescriptに触れるのは有益でしょう。
②フロントエンドに絡む大体のことを知らずに経験できてしまう
細かいことは省きますが、Vueでwebpackを使って云々となった時に、「え、Angularは裏でこんなことをしとったんか！」と興奮しました。
フロント関係の学習時に後からわかるAngularの便利さが結構楽しかったりします。
（最初から分からせてくれやと思うけど、それは先に不便を知らないと感じられないから、まあ多少はね）
③一定水準の技術力保証書となる
らしい。
とある有料ライブラリ開発の技術者さんに「どうして（他と比べて利用者の少ない）Angularなんですか？」と訊いた時の回答が、「少ないというのは裏を返すと使える人間の技術力を担保できる言語でもあるので、大きな会社からの引き合いがあるんです」とのことでした。
ふむ、なるほど。こっち見んな！
まとめると、エンジニア的には①の技術習得メリットがめちゃ大きいと思います。
ただ道具的な視点だと、慣れたフレームワークが一番だと思うので優劣は割愛しますね。あと個人の目的も大事にしてくださいね。転職とか（ぼそっ
デメリット編
- 参考情報が少ない
- やっぱり初学者にとっては学習コストは高い
- AngularとAngularjsの情報が混在する
- バージョンの違いによる情報の信用度が初学者には分からない
- 転職にはちょっと、うん
情報漁りで感じたのはこれらですね。
特にバージョンの違いは、情報選び時にすごく困惑しました。しかもつい先日11に更新されたばかりなので１１の情報がねーよ！！ とならないように。個人的基準ですが、６以降は安定しており、大きなコード・仕様の変更はないと解釈しています。
あと転職には、VueやReactが多いですね。AngularなのかAngularJSなのかも怖いところだし。
他のフレームワークにおける学習の壁は低く感じていますが、やっぱり転職にはその会社のフレームワークの経験値（ないし最低限の知識）がいるよなあ、ってなるので勉強はつきません。
また実体験ですが、Angularを学習すればJavaScriptもTypeScriptも身につくぜーと思わない方がいいです。まじで。
メリットで言ってることと違うやんけ! と思われるかもですが、前述レベルの初学者ほどきっちり学習ステップを分けた方が成長は早いです。
急がば回れ。
ビバ、シングルタスク！ です。
フレームワーク学習時の落とし穴
これは結論から
フレームワークは使うもの。
使われるものではない。
ついつい、公式や参考書通りに書かなければと思いがちですが、極論を言えばHTML・CSS・JSのゴリゴリで同じものは作れます。
状況によっては無理にフレームワーク機能で作る必要はないはずです。
業務や開発における優先順位を見落とすことがないように。
僕は周りにフロント関係の人がいなかったのもあって、ここに気づくまで時間がかかりました。
AngularはUIのマテリアルライブラリが用意されているのも手伝って、学習時ほどついつい「これを使わなければ」みたいな考えになるかもしれませんが、この時点でフレームワークに使われてしまっているので使うのがベストかどうか、ちょっと冷静になって考えてみてください。
ここはハードコーディングでいい、逆に使ったら他の人がわかりにくいかも、という勘所は使って養うことだと思いますが、最終的な成果物の形とチームメンバーへの可読性を意識することが「業務で使うため」の近道ではないのかなと感じています。
参考情報とステップ
さあ、前置きが長くなってしまいましたがここからは、僕的JavaScriptを身につけて、とりあえずTypeScriptも使えるようになりつつ、RestAPIを使えるようになるまでの最適ステップ＆参考情報を提示していきます。
触りたての自分には、脳死でいいからこのルートでやった方が早いし、とにかくオイラを信じてくれと伝えたいリストにしたつもりです。
JSもある程度大丈夫でJSフレームワークも他を経験済み、という方はこのステップは遠回りなので参考にしない方がいいと思います。
1.はじめにざっくり機能を知る：Angularに触れる
Angular Webアプリ開発 スタートブック：書籍
【進め方】
とりあえず写経してみる
（写経無意味論もあるけど、あくまで前述レベルが対象なので）
たぶんTypeScriptの型指定が意味不明で、どこに値を格納しているのかも分からない状況かもしれないけど、"Angularってなんかこういうもの"を体験するのなら、このレベルがいいと思う。
この本は（サーバーからAPIを取得する）HTTPclientに関する記述が皆無なので、本当にスタートブック。この本でマスターは難しいが習いやすい。
２.ここで型指定を覚える：TypeScriptに触れる
超TypeScript入門 完全パック(2020)：udemy動画教材
【進め方】
こちらのセクション２、４、５でだいたいOKかと思います。
型については一気に理解が深まります。余裕があればinterfaceも押さえるとベター。
あとで挙げる別教材でもTypescriptの説明はあるので、完璧でなくても２、４、５を進めましょう。残りはその後、もうちょっとTypeScript理解を深めたいなーという時に進めていけば良いかと。
知識整理にはWEB+DB PRESS Vol.117
TypeScript編が特に型指定例はコンパクトにまとめられてて感動しました。
３.当たり前だがJS:JavaScriptを押さえる
The Complete JavaScript Course 2020: From Zero to Expert!：udemy動画教材
【進め方】
習熟度に応じて全部やる
※10月にバージョン更新して94.5時間になってますが、[legacy]は不要かも
僕は旧コース時にやりました。
EC6記法も教えてくれてJavaScriptの最良教材ではなかろうかと。
英語だけど字幕もあるしなんとかなる。
4.ここでようやく公式チュートリアル：Angularに潜る
Angular 日本語ドキュメンテーション:公式の日本語訳ページ
日本語ページができている、だと。。。
【進め方】
どんな機能があるのか、どこに書いてあるか覚えておく
チュートリアルは一通り写経してもいいかも
ここでも大体の理解でOK
コード例がES6記法なので、さきにTS・JSの理解は必須。TSとJSを覚えておかないと、自分が今何を覚えようとしているのか脳内で区別できなくなって、混乱して挫折を繰り返す羽目になるので、結局はきっちりステップを踏むのが大事だと学びました。
５.バックエンドと繋げよう：REST APIも身につける
[Angular 9 + Django REST Framework ]でWebフルスタック完全攻略：udemy動画教材
【進め方】
必要に応じて全部やる
Djangoも学習することになりますが、とても分かりやすく心配ご無用。
バックエンドと繋げた設計という実戦に近い学習なので、APIを取りに行って加工するなどAngularだけの枠から離れたところを押さえられる超良教材だと思います。
６.その他Angular書籍について
Angular超入門
公式ページの説明で分からない時はこちらを訪ねると分かりやすい説明があるので、理解の一助になる
Angularアプリケーションプログラミング
ライフサイクルなど、もう少し細かいことを知りたい時はこれ。
出版年月を見てバージョンの心配をしたが杞憂でした。
個人的中級以降に読むといい良参考書。
７.その他参考記事
詰まりやすい箇所の説明だったり、機能解説など、先人の知恵に感謝しつつ、有効活用させていただきましょう。
今日からはじめるAngular
Angular入門 未経験から1ヶ月でサービス作れるようにする
Angular初心者がハマりがちなポイントとその学習法
まとめ
繰り返しますが、いきなりAngularから始めるヤツなんておらんやろと思いつつも、いたら本当に学習迷子になりそうなフレームワークなので、過去の自分向けに書きました。
平行して学習するよりも、気持ちを固めて１つずつ潰して行くことが近道です。
中途半端に覚えて忘れることの繰り返しは実に無駄が多いので。。。
しかしまあ、慣れれば追加で覚えることも少なくて愛着のわくAngular。
気負わず、フレームワークに使われることなく、こっちから使ってやりましょう！！
それと未熟者ながらAngular Advent Calendar 2020にも参加させていただきます。
どうぞ、よろしくおねがいいたします。