【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集


2022/03/23

弊社では技術開発活動の中で活用しているナレッジを日々様々なリソースから得て、継続的に勉強を重ねています。

ソフトウェア産業の分野では、常に新しい情報を得るために多方面にアンテナを張って、貪欲に知識をビジネスに取り入れるという姿勢が必要になります。

この記事では、ブログの個人的に気になった&試してみたいAngularの良質で旬な学習素材をまとめています。

Angularは半年でメジャーバージョンが1つ繰り上がるハイペースな開発・メンテナンスが継続的に行われるため、特に書籍の鮮度(出版年日、改訂年日)の良く確認する必要があります。

気になる学習教材があれば、リンク先のサイトで是非ともチェックしてみてください。

Angular関連記事ダイジェスト

現在のこのサイトで鋭意執筆中のAngular記事ラインナップです。

何かAngular関連で気になるテーマがあれば、お問い合わせフォームよりご意見・リクエストください。

関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理を行わせてみる

2022/05/11
ID#:162
Rxjs Angular タイマー 定期実行

【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理を行わせてみる

Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。Rxjsで定期実行するためのrepeatオペレーターの使い方を紹介します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular活用講座】Rxjsで一定時間間隔でストリーム実行するためのサービスを作る

2022/05/10
ID#:161
Rxjs Angular タイマー 定期実行

【Angular活用講座】Rxjsで一定時間間隔でストリーム実行するためのサービスを作る

Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。Rxjsで定期実行するためのtimerオペレーターの使い方を紹介します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)

2022/04/27
ID#:148
Angular Input要素 checkbox操作

AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)

不定期でたまにある気付きナレッジを紹介しているAngular基礎講座のコーナーです。今回はcheckboxタイプのInput要素をAngularから上手くハンドリングする使い方を解説します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方

2022/04/26
ID#:147
Angular Titleサービス

AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方

不定期で思いついたときに紹介しているAngular基礎講座のコーナーです。今回はHTMLのページタイトルを柔軟に書き換えできる組込みのTitleサービスの使い方のポイントを解説します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方

2022/04/25
ID#:146
Angular Rxjs window:resize

【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方

Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。今回はwindow:resizeイベントをrxjsのメンバークラス・メソッドだけで上手くハンドリングする方法を紹介します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する

2022/03/22
ID#:145
Angular Node Express.js Proxy設定

【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する

前の記事ではAnguarの開発段階でローカルサーバーを立ち上げる際のプロキシルートの設定方法を解説しました。今回はAngularアプリをビルド後にExpressからローカルサーバーを立てる際のプロキシ設定について解説します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する

2022/03/21
ID#:144
Angular CORS Proxy設定

Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する

今回はAngularアプリのローカル環境での開発に便利なCORSを簡単に実現できる、独自のプロキシルートの設定方法を解説します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

Angular Universalアプリのサーバー側で独自フォント(TTF/WOFF/WOFF2)が読み込めなくて困ったときの対処法

2022/03/07
ID#:143
AngularUniversal Express フォント Css/Scss

Angular Universalアプリのサーバー側で独自フォント(TTF/WOFF/WOFF2)が読み込めなくて困ったときの対処法

Angular Universal/Express.jsでサーバーサイドアプリの構築する場合、assets内に置いたローカルにおいた独自のフォントを適用しようとしたときにエラーで躓いたときの対策法を紹介します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する

2021/06/30
ID#:136
AWS Cognito Serverless Angular

【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する

前回は手動でCognito及びAPI Gatewayの設定しながら基本的な手順を説明しましたが、その内容はなかなか煩雑で毎回同じような手順を覚えていられません。今回はServerless FrameworkでCognitoオーソライザ付きのAPI関数を呼び出すまでを自動化する方法を検証します。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する

2021/06/24
ID#:135
Angular AWS Cognito ユーザー認証

【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する

サイトの規模が大きくなってくるとAuth0のようなユーザー認証管理サービスの利用料がエンタープライズ版への移行が望ましく、それなりの維持費用が発生してくるようになります。そこで今回は有料のサードパーティ製サービスの利用を諦めて、独自のユーザー認証システムを一念発起してCognitoへマイグレーションする際に行うべき作業をまとめてみます。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集

2022/03/23
ID#:130
Angular 学習教材

【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集

今回はここ最近の動向を踏まえで、Angularを学ぶ上で有用な学習用の教材をまとめていきます。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ

2021/06/02
ID#:129
Angular ngx-highlight.js マイグレーション

【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ

ふと思いつきでメンテナンスし時な古いAngularプロジェクトで使っていたngx-highlightjsのバージョンを久々に引き上げると色々とエラーがライブラリ側から発生します。今回は現状におけるhighlightjs@10以降およびngx-highlightjs@4.1.0以降への引き上げ方法を考察してみます。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular12対応】Angular12でWebpack5をサクッと使ってみよう

2021/08/09
ID#:121
Angular12 Webpack5

【Angular12対応】Angular12でWebpack5をサクッと使ってみよう

Webpack5がAngular12で始めてサポートされましたが、普通にAngularを使っている分にはwebpackのバージョンが4から5に変わったことが目に見えて実感できるほどのことはありません。ということでwebpack5単体で遊べるようなAngularプロジェクトの作成方法を解説してみます。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築

2021/08/07
ID#:119
Angular Universal ウェブサイト作成

【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築

Angular Universalの登場から既に6年以上も立ち、Angularデベロッパーの弛まない努力の甲斐もあって、通常のAngularアプリケーション開発もシンプルかつ洗練されたものになって来ています。今回は最近のAngular12で試した際のSSRアプリケーションのもっとも簡単な開発方法について解説しました。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

[angular] ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法

2020/11/28
ID#:62
Angular openssl mkcert

[angular] ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法

AngularでSPA(シングルページアプリケーション)のローカル開発時にmkcertを用いた常時SSL化をする方法をまとめました。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる

2020/11/23
ID#:57
Angular renderer2

【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる

AngularのRenderer2 APIを使って、レンダリング後のHTMLに出力される無駄なDOM要素を操作して最適化を図ります。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

Angular UniversalでSSR/Prerenderするときに躓いたら確認したい4つの方針

2020/06/01
ID#:21
Angular universal

Angular UniversalでSSR/Prerenderするときに躓いたら確認したい4つの方針

Angular Universalを利用する際に静的ページのプリレンダリング中に起こるおおよそのエラーは、サーバー(Nodejs)側とブラウザ(クライアント)側の仕組みの違いをあまり理解しないで通常のAngularアプリケーションをビルドする感覚で起こっているといえます。逆に言うとクライアント側とサーバー側をより正しく理解することでAngular Universalをより良く活用できるはずです。今回はSSR/プリレンダリングする時に吐き出されるエラーの傾向と、解決のためのおおまかな指針に関してまとめます。

クリックするとリンク先へ飛びます
関連記事
合同会社タコスキングダム|蛸壺の技術ブログ

[Angular] KarmaでDirectiveのユニットテストをおこなう方法

2019/07/09
ID#:16
Angular Karma

[Angular] KarmaでDirectiveのユニットテストをおこなう方法

Angular/Karmaで単体テストを構築する際に、ComponentやServiceなどのメジャーどころはウェブ検索すると豊富に参考サイトが引っかかるのですが、Directiveは比較的少なめのようです。今回はDirectiveの単体テスト(の簡易版)を作成します。

クリックするとリンク先へ飛びます


Angularを学べる書籍を探す

Angularアプリケーションプログラミング Kindle版

合同会社タコスキングダム|蛸壺の技術ブログ

Kindle版だと2019年6月改訂(Angular v4-7相当)です。

大型本で書籍購入してしまうと、内容改定前の2017年頃の内容になっていますので改訂日には注意してみてください。

内容のほうは色々と古くなっているとは言え、基本的なデータバインディング、コンポーネントの取扱い、DIの考え方といったAngularならではの知識やノウハウを理解パートは今もそのまま利用できます。

Angular超入門

合同会社タコスキングダム|蛸壺の技術ブログ

こちらも2019年6月改訂ですが、内容はAngular v7相当です。

Angularの基礎を中心に、サービス、通信(HTTPモジュール)、ルーティングやナビゲーションなどが中心に解説されている入門書です。

まぁいずれにせよ、内容の鮮度の移ろいが激しいのがAngularを学ぶ上のでボトルネックになっていることには変わりありません。

冒頭でも述べたようにAngularの細かい仕様変更が半年に1回行われているので、国内の技術系ライターの方が追従されていない状態です。

それ以外の比較的新しい書籍となると、執筆速度の早い海外の方の洋書を探すほかないのが現状のようです。


Angularを学べる学習サービスを探す

上記に取り上げた2つの書籍で、全くAngularが学べないかというとそうでもないのでしょうけど...

結局はAngular.jsからAngular2+になりディレクティブやファクトリーといったデザインパターンも現行のAngular13では殆ど見なくなりました。

代わりに遅延読み込みコンポーネント・モジュールなど比較的新しい用法を紹介するサイトも増えてきたように感じます。

Angular.jsから現在のv13やそれ以降のバージョンに至るまでのAngularの変遷を根底から紐解きたいエンジニアの方では無いのなら、最新のAngularのアクティブな文法から学ばれたほうが効率よく学習できると思います。

ということで、最新の“活きた”Angularを学びたいのなら、Udemyの講座を最初から検討したほうが良いでしょう。

Angularプログラミングに精通された講師の方からノウハウが聞けるのも魅力となっています。

以下はAngularプログラミング入門向けの講座をパラパラと挙げてみます。

『【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション(SPA)開発』

合同会社タコスキングダム|蛸壺の技術ブログ

『【Angular13】で学ぶフルスタックフレームワーク:製造+Unitテスト・E2Eテストを実践する入門版』

合同会社タコスキングダム|蛸壺の技術ブログ

『【2時間半で学べる】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】』

合同会社タコスキングダム|蛸壺の技術ブログ

『【AngularとNode.jsで始める】JavaScript系 WEBアプリケーション開発コンプリートガイド①』

合同会社タコスキングダム|蛸壺の技術ブログ

他にも多数のAngular関連の講座が存在していますので、ご自身の希望させるレベルの講座をじっくり探してみてください。


まとめ

今回はAngularで効果的な学習方法をいくつか検討してみました。

AngularはフルスタックなJavascriptフレームワークですので、覚えることが他のフレームワークよりも多く、学習コストがかなり高くなりますが、その分、扱い方が慣れれば他のフレームワークなどでは出来ないような非常に高度なアプリケーションが作成可能です。

是非ともコツコツと勉強を進めて、Angularプログラミングの世界を楽しんでみてください。