普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。
今回は、Angularを学習するに際してオススメする書籍、教材について記事にしていきたいと思います。
私は普段Angualrをメインに仕事をしていますが、ReactやVue.jsと比べて、Angularは日本語で書かれている文献が少なく、また概念も独特である為、エンジニアなりたてのころはかなり苦労した記憶があります。
Angularに関するKnowledgeも溜まってきましたので、これから学習を進めていく人向けに、どの点に注目して進めていけばいいかをまとめていきたいと思います。
※ これから記載するものは、自身で読んでみたり学習を進めたりしてみて良かったもの掲載しています。
Angularの学習コストは高いのか？
正直、Angularの学習コストは高いと思います。
RxJS、DIによる依存性の注入、状態管理を提供するNgRXなどなど...割と独自の概念が使用されているので理解するまで結構時間がかかります。AngularはTypeScriptがベースとなっているので、まずはTypScriptを勉強しなければなりませし、そもそも日本語で書かれている文献が少ないためどうしても英語のサイトを読んでいく必要があります。（私は余り英語が得意ではありませんが、逆に英語の勉強になると思って割り切っています。）
慣れてくると便利なライブラリが豊富にあったり、型でガチガチに固めているので他言語に比べて開発がしやすかったりとメリットが見えてくるんですがそれまでは結構苦労するかと思います。
Angular Developerによるロードマップ
roadmap.shでAngularの全体像が図解で記載されています。このサイトに掲載されている内容を網羅できれば、Angularについてかなり理解できるようになったと言えるかと思います。（私はまだZoneやNgRX周りが怪しいです汗）
Angularのハマりがちなポイント
Angularのハマりやすいポイントを分かりやすく記載してくれているとても有益な記事です。
私も学習を進めていく上で何度も見返しました。
TypeScript
AngularはTypeScriptをベースにしているのでやはり、TypScriptのことはある程度知っておく必要があります。面倒ですが、ここは頑張って学習しましょう。
TypeScriptサバイバル
みんな大好きtypScriptサバイバルです。
ハンズオン TypScript
TypScriptを広範囲に解説してくれている書籍です。後半はReactやTypeORMの解説なので、前半~中盤のTypeScirpt内容を学習しておくと良いかと思います。
Angualrの書籍・Udemy
Angular超入門
Angular超入門はその名の通り、初めてAngularを触る人向けに、ファイルの構成からRxJSまで分かりやすく解説してくれる書籍です。私も実務に携わる前はこの書籍を一読しました。
応用的な内容はあまりありませんが、基礎をしっかり身につけるには良書かと思います。
Angularアプリケーションプログラミング
同じくAngularの入門書籍です。Angular超入門では掲載されていない内容もありますので、併用して理解を深めるのが良いと思います。
【Udemy】初めてのAngular入門 実践シングルページアプリケーション
動画で学習したいという方は、Udemyでも学べることができます。
「Angular入門 実践シングルページアプリケーション」はAngularの基礎、TypeScriptの構文、RxJSの使い方、シングルページアプリケーションの構築方法を一通り学ぶことができます。
特にハマりポイントであるRxJSについて、オブザーバーの流れをアプリ開発を通じて図解で解説してくれるのでオススメです。
Udemyは必ずタイムセールの時に購入することをオススメします。
大体90%くらい割引になります。
DIによる依存性の注入
AngularのDI（依存性の注入）はあるオブジェクトが、別のオブジェクトに依存して動くようにするしくみのことを指します。サービスの作成してコンポーネントに注入する際によく使用します。
HttpIntercepter
HttpIntercepterはサーバーとのクエストやレスポンスの中身を検証して処理を実施する目的で使用されます。
実務ではよくサーバー通信でエラーが起きた際にエラーモーダルを表示させたり、ローディング処理を実装することがあるので、身につけておきたいですね。
海外の方がYoutubeでHttpIntercepterについて解説されているので、英語が得意という方は試聴してみても良いかと思います。
RxJS
RxJSはデータストリームを扱い非同期処理を行うAngularのライブラリです。データを非同期で扱う場合には必ずと言っていいほど使用します。
JavaScriptでは非同期処理を実施するためにPromiseがありますが、Promiseの進化版のようなイメージです。基本的にPromiseでできて、RxJSでできないことはなく、オブザーバーを再利用できたり、オペレータを使用してデータを加工することができます（概念を理解するのに時間がかかりますが、マスターすると相当便利）。
PromiseとRxJSの違いについては、下記記事に詳しく記載されています。
またまた根気のいる話ですが、RxJSを理解するためには、Promiseの動きを理解する必要があります。Promiseを学ぶ場合は、JavaScript Primerの非同期処理の欄が長過ぎず、短過ぎず良くまとまっているかなっと思います。
RxJSの触りとしては下記記事で理解していくことをオススメします。RxJSの基本概念やObservable、主要なオペレーターについて解説してくれています。
公式チュートリアル（Tore of Heros）
Angularの公式チュートリアルです。計6回に分けて実際に手を動かしながら、サービスからデータを取得、更新、削除ができるアプリを作成することができます。
Angular独特の言い回しや概念をもとに解説がされるので、正直初学者にとってはとても分かりづらいです。
ただ、サービスの実装やナビゲーション関連、HttpClient等は実務でも十分使用することが多いので、まずは書籍や動画で基礎を固めてから、一通りやってみていただきたいです。
タイトルで日本語ドキュメントと書いてあるにも関わらず、普通に英語で書かれている時があるので注意が必要です。
Angular After Tutorial
Angularの公式チュートリアル（Tore of Heros）を終えられた方向けで、学習の方向性を示してくれる神記事です。
アプリの作成
海外の人が書いたものですが、Angularで作成したアプリを解説してくれている記事をいくつか紹介します。Tore of Herosや書籍で学んだことを活かして取り組むことができます。
全て英語で書かれているので自信のある方は取り組んでみても良いと思います。
AngularのJWT認証
Angularを活用してJWT認証機能の実装を行うことができます。記事で書かれているAngularのバージョンは8ですが、最新バージョンでも問題ないかと思います。
NgRX-component-Storeを活用したアプリ開発
比較的マイナーですがNgRX-component-Storeというを、コンポーネントの状態管理を行うことができるライブラリを使用してアプリを開発できる記事です。
NgRXによる状態管理
NgRxはAngularアプリケーション用の状態管理ライブラリです。Componentで扱うStateをすべて一箇所のストアで一元管理を行うことができます。
以下のQiita記事で、NgRxの入門や実際にアプリを作成することができるのでオススメです。
本日はここまでとなります。
最後までお読み頂きありがとうございました。
