【初心者〜上級者まで】Angularの学習におすすめの本4選

【初心者〜上級者まで】Angularの学習におすすめの本4選

基本的にはどの書籍も JavaScript の基礎があればクリアできるレベル。紹介する順番について少し悩みましたが、数も少ないので読んだ順にご紹介させて頂きます。

Angular超入門

【Book Info】 本体：3,400円, 発売：2019/06/18, B5変・468ページ, モノクロ,　Link

技術書なのに笑ってしまった本書籍。独特の話口調で 400ページオーバーの内容も低ストレスで読み進めることができます。

内容は Anguler の開発環境から Angular CLI を使ったプロジェクトの作成方法、コンポーネントの作法にモジュールの作成方法、それから Material デザインの採用方法や Firebase との接続に Google Cloud Function を使ってブックレビューのアプリまでを紹介。かなり面白そうな段階まで紹介されていますが、実行できるかどうかは、あなた次第かもしれません。

テクニカルな面については細かく説明してくれているのですが、サンプルコードは１つのテキストファイルに本書籍で紹介するプログラムが全て書かれています。そのため一旦分からなくなったり、エラーを出しだすと後のプログラムも思うようにいかない状況... 私は 4章付近からエラーを出し始め、30分ほど頑張りましたが、結局最終ゴールのアプリは実行できない結果に（時間的に...）。 サンプルコードを指定された場所にコピペするだけのはずですが、なかなか思うようにいかないものです。

Error体験したポイント: p142, p199

Angular は TypeScript を使用しており、慣れていない方も多いと思いますが、とりあえずはサンプルをコピペしながら進めていきますので、 TypeScript のことを全く知らなくても Angular を展開していけますし、文末には TypeScript について少し紹介されています。 400ページ以上のボリューム、2,3日お時間ある方は、じっくり試してみる価値ありそうですね。

書籍内の Node.js Verison: 10.15.2, Angular Version:7.3.4

Version 7.3.4 の Angular インストール方法：
npm install -g @angular/cli@7.3.4
ng version

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

【Book Info】 本体：3,700円, 発売：2017/08/4, B5変・512ページ, モノクロ, Link

技術書で定評のある山田祥寛氏が、 2017年にリリースした本著。3年前だったらまだ大丈夫かな、と思い購入しましたが、当時（書籍内）の Node.js のバージョンに合わせて動かそうと思うと ❌。

【本書籍のバージョン】
Node.js  6.10.3
Angular  4.1.3

原因は、3年前の Node.js はサポートが切れており、 Angular に関連する Node.js のパッケージもインストールできない状況。パーツが揃わない Angular 4.1.3 は当然動かせない結果に。 そこで Node.js のバージョンを 10系に設定して改めてサンプルコードを実行してみると、 Angular のバージョンは 3年前の 4系ですが、エラーなく作動しました。ただし、現行の Angular の実行コマンド ng serveとは違う npm install & npm start でアプリケーションを実行。

【私が実行したバージョン】
Node.js 10.15.3
Angular 4系（古い 2017年もの）

書内で紹介されている内容としては、 Angular の基本的な操作方法が主で、ToDoリストのようなアプリケーションを作成するレッスンはありませんでした。

Angular の基本的なコンセプトや基本的な機能、コンポーネントなどについては学習することができますがやはりバージョン相違の不安が付きまといますので、購入を検討されている方はその辺りも加味してご決断下さい。

【Angular や Node.js のバージョンについて】
バージョンについて調べてみると、 Angular 自体は半年に一回バージョン更新されるのが通常で、ベース部分の Node.js は1年に一回程度。そして Node.js のサポートは、Android や Ubuntu などの OS 系に比べると短く、リリースから 3年でサポート終了。つまり Angular をはじめ JavaScript 系のフレームワークには更新が必須ということ。

Angular 以外の React や　Vue.js などの参考書も読みましたが、基本バージョンのサポートにはあまり触れていなかったように思います。そして Node.js のバージョンについても。
jQuery は確かに、複雑な処理を伴うフロントエンドには向かない面もありますが、「サポート」については一枚上手かもしれません。

Angular Version info, node.js version info

Angular Webアプリ開発スタートブック

【Book Info】 本体：3,700円, 発売：2018/04/07, B5変・280ページ, モノクロ,　Link

先ほどの著書「Angular アプリケーションプログラミング」で Node.js のバージョン等で苦労しましたので、まずは本で紹介されているバージョン情報から。

書籍内で使用している Node.js 、 Angular のバージョンは現在サポートされていません。 Node.js を現行版に変更して利用する必要があります。

こちらはエンジニアの大澤氏が書かれた本で、「網羅的に Angular を使いこなそう」というのではなく、一つの Web アプリを開発しながら Angular を解説。目標物は「レシピ検索アプリ」で、Angular を使った入力フォームや入力値の出力、入力内容の検知、JSONデータ、ルート設定など一通りのことを記載。（検索対象は、自分で用意する JSONデータ） ページ数も 280ページと他の Angular 本に比べると少なめで、頑張ればやり遂げられるボリュームと思いました。

サンプルプログラムについては、本に書かれているプログラムをテキストファイルで管理していますので、学習者は自分でベースとなる　Angular プロジェクトを立ち上げ、用意する必要があります。その時本と同じバージョンでは ng new が ❌ なので、Node.js のバージョンを 10.15 など Angular を動かせる Node.js の環境にする必要があります。

git clone https://github.com/angular/quickstart.git
cd quickstart
npm install
npm start

ng new myapp
cd myapp
ng serve
-->  localhost:4200

一旦ベースの Angular プロジェクトを起動したら、あとは本になぞって進めていけば Angular アプリを楽しめることと思います。 手っ取り早くアプリの様子を確認したい場合は、書籍内の「リスト 5-3-3」と書かれた部分に注目して進めていけばOK。「リスト」の部分にプログラムが書かれていますので、それを各ファイルにコピペしていけば Angular を動かすことができます。

半分ぐらい進めた結果、計算機能（5章）

上図の code: https://github.com/oshimamasara/Angular-culc-tashizan

本の解説には、テキストエディタのスクリーンショットとプログラム、それから出力結果と解説が書かれていますので、他の参考書に比べると「どこに何をどう書けばいいか」という部分が比較的わかりやすかったですね。

Ionicで作る モバイルアプリ制作入門[Angular版]

【Book Info】 本体：3,120円（税別）, 発売：2019/12/02, A5変・303ページ, モノクロ,　Link

【書籍内使用バージョン】
・Node.js　12系
・Angular　8.1.3
・ionic　5.4.4

Ionic? と思いながらも、とにかく Angular に関する本がなかったので購入した本著。結果、結構面白いです。

まず Ionic というフレームワークをはじめて知って、体験したのですが、要は Angular や React などを使って Android や iPhone アプリを開発できるキット。 Ionic 自体は Angular と同じ Node.js を使って動きますので、 Angular の開発環境があればストレスなく実行可能。しかもこの本は比較的新しい Node.js 、 Angular バージョンを使用しており、安心してサンプルを読み、実行することができました。 本自体は榊原氏によるものですが、サンプルコードは GitHub に上がっており、Ionic ユーザーグループを初め、有志が管理、これも安心ですね。

実際に本を読みながら自分でプログラムを作成していくのもよし、 git clone して手っ取り早く Ionic や Angular の様子を確認するもよし。 実際に ToDo アプリを git clone してみましたが、「おぉ〜」と感動！

git clone で Ionic ベースで Angular を稼働した様子、左が iPhone プレビュー、右が Android プレビュー

ToDoアプリ以外にも、WordPress API を使ったフィード系アプリやカメラアプリ、それからチャットアプリ。そしてアプリ開発で欠かせないのがマネタライズですが、広告も AdMob を使って表示。アプリ開発の要件が Ionic でカバーできるなら、「これはネイティブじゃなくてもいいんじゃない？」と直感的に思ってしまいました。

Ionic でできること一覧ページ

私自身、1年前に Android のアプリを開発し、公開していますが、メンテナンスまで手が届きません。その結果、 Google から 「API 合わないし、BANね」みたいなメールが届き、せっかく頑張ってリリースしたアプリも消える始末。こうしたことも Ionic と Angular で開発しておけば、比較的普段使うプログラミング言語でメンテナンスできますので、対応可能、と思いました。

Angular の基礎に関する情報は極めて少ない本著ですが、JavaScript から Angular、 Angular から Android、 iPhone へと自分の可能性を拡張してくれることでしょう。

まとめ

Amazon.co.jp で Angular 本を探しても「少ないなぁ」と思っていましたが、買って実行しようと思うとバージョンに関するエラーの連打。

「Angular って需要あるのに学習環境は厳し目だな」と痛感。逆に言えば「学習しにくい --> できる人が少ない？ --> 高単価！」 と仕事面では恩恵を受けることができるかもしれません。今は Angular 以外に React や Vue.js もありますが、 「Angular はプロジェクトの管理・開発がプログラミング初心者でも馴染みやすい」と思いました。 しかし、 Angular には JavaScript の知識が欠かせませんし、 TypeScript という言語の知識も必要。

「HTMLだけでいっぱいいっぱい・・・・・・・・なのにそんなにできないよー」という方、独学で勉強されていますか？ こうしている間にも Web をはじめ、様々なところで ITテクノロジーは進化しています。この流れに乗るにはやはり「スピードアップ」しかないのではないでしょうか？

「スピードアップ」... どれだけプログラミングスクールが自分の学習・プログラミングスキルをブートアップしてくれるか、一度 無料体験 を検討してみませんか？ 公式ページ から空き状況チェックできますので、ご興味のある方はどうぞご利用ください。