Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

【JavaScript】Angular, React, Vue.js とフロントエンドのおすすめ本まとめ(2021年夏)【フレームワーク】

JSフレームワークの本まとめ決定版!(2021年夏)

 まだJavaScriptがHTMLページのオマケ扱いでセキュリティ面からも忌み嫌われていた不遇の時代、2005年にGoogle Mapの衝撃が走りAjaxのワードが流行ったフロントエンド元年。その後徐々にJavaScript復権が始まりました。
 jQueryなどのフレームワーク未満のライブラリが流行ったのが第1世代。その後サーバーサイドのMVCアーキテクチャの思想をクライアントサイドに適用しようとしたり様々なフレームワークが試行錯誤し、そして結局は滅んでいったのが第2世代。
 その後表舞台に立ったJavaScriptフレームワークAngular, React, Vue.js。この3大フレームワークが第3世代と呼ばれており現在の主役となっています。なお第4世代と呼ばれるような革新的な乗るしかないビッグウェーブはまだキていないようです。
 この記事では、第3世代の3つのフレームワークに関する日本で手に入る本を改めてまとめてみました。

この記事は2018/4に書いた以下の記事の続編の最新版です。

iwasiman.hatenablog.com

 前回と違い、今回は時系列順に基本的に新しい本を先に紹介しています。
変化の大きいフロントエンド領域は技術同人誌でもよくテーマに好まれる領域であり、そちらでも面白い本が色々あるのですが、この記事では例外を除いて基本的に商業本を取り上げています。
また各本の先頭に完全に独断で「ターゲット:」を付記しています。以下のような感じですが、雰囲気ベースなので気にしすぎないでください。

  • 初級:その技術に完全に初めて触れる、プログラミング自体もまだ不慣れ
  • 中級:仕事レベルでその技術に触れる
  • 上級:仕事で深いレベル、応用的な領域までその技術に触れる

それではどうぞ、これからフロントエンド領域を学ぼうとしている方も参考になさってください!

f:id:iwasiman:20210806142935p:plain
Angular, React, Vue.js おすすめ本リスト 2021夏

React の本

 最初はFacebookの内部開発向けのライブラリから始まり、買収したInstagramのWeb画面再開発の頃の2013年に登場したReact。宣言的な使用、UIしか扱わない、仮想DOM、大規模開発になってくると実はこちらがベターだった単方向データフロー、TypeScriptとの親和性の高さ……などの特徴を武器に大きく伸び、先行のAngularJSを抜いて世界トップに躍り出ました。
 npm trends でダウンロード数を比較すると圧倒的で、インスタやNetflixTwitterなどなど世界レベルで成功したサービスは軒並みReactという感じになっています。このはてなブログやUdemyでも使われています。

第2世代のフレームワークの隆盛でMVCアーキテクチャをフロントにも無理に当てはめるのは良い設計でないと分かった後、十分に小さなコンポーネントの中ではロジックと見た目を無理に分けず機能で分割するのが良いというReactの基本思想の元で発達したJSXという技術も特徴のひとつ。HTMLをJSの中に書くスタイルです。
JSXキモい…ではなくJSXの敷居を高く感じた初学者層が後発のVue.jsに流れるような動きもありましたが、このJSXの学習コストを乗り越えた開発者はVSCodeの強力な補完の下で快適にコーディングすることができ、分割された多数のコンポーネントが連動する大規模開発、リファクタリングやよりよい設計の追求などのシーンではこのJSX記法が有効に働きます。JavaScript自体の新機能や関数型プログラミングの思想も取り込み、ある程度以上のスキルのある玄人JSer好みのフレームワークとして人気です。

 バージョン的には現在は2021/3/22のv17.0.2が最新、メジャーバージョンは2020/10のv17.0.0
また2019/2/6リリースのv16.8.0から新機能のReact Hooksが正式登場。Reactコンポーネントの書き方も従来のクラスコンポーネントでなく関数コンポーネント(Function Component)が正式推奨され、かつてはReact本体とほぼ一緒のような扱いだった主要な状態管理のライブラリReduxの重要性が今後は以前より薄れていくだろう、という大きい変化があります。このv16.8.0がひとつの転換期でしょう。

 トレンド的には世界トップを走り続けるReactですが、日本で手に入る商業本では意外に仕事レベルの本格的な本があまり続かず、後発のVue.jsの方が商業本については豊富に揃っているという状況が続いていました。2021年夏のオライリー本発売で盛り返すでしょうか……?

Reactの最新の本

モダンJavaScriptの基本から始める React実践の教科書

ターゲット:初級〜中級?
2021/9/16発売。UdemyでReactの人気講座『モダンJavaScriptの基礎から始める挫折しないためのReact入門』、『Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版』を出しているじゃけぇさんの本が出ます。書影も仮のようです。上の2講座も後者のステップアップコースはかなり幅広く取り扱っていたので、初心者向け以降の内容も取り扱った本になると思われます。もちろんReact Hooksに対応しています。

f:id:iwasiman:20210822212137p:plain

基礎から学ぶ React/React Hooks

基礎から学ぶ React/React Hooks

基礎から学ぶ React/React Hooks

Amazon

ターゲット:初級〜
2021/8/24発売。React習得で躓く原因はJavaScriptの理解不足ではないか...というところでJavaScriptの基礎にもフォーカスし、ReactとReact Hooksを学び、最後にTODOアプリを実装していく本。初心者層をターゲットにしながらも372ページ、かなり丁寧に解説した本のようです。

f:id:iwasiman:20210822212137p:plain

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

ターゲット:中級~上級?
2021/8/6発売。世界のテックカンファレンス常連の著者お二人によるReactの今を解説する本。長らく不足していた仕事レベルの本格React本が安心のオライリーからようやく登場しました。流通すると通称は「イノシシ本」とか呼ばれたりするのでしょうか。
原著の『Learning React: Modern Patterns for Developing React Apps』は2020/6発売、技術書としてはAmazonでも評価が高いです。もちろんReact Hooksなど最新のReact状況に対応しています。
Learning React: Modern Patterns for Developing React Apps

f:id:iwasiman:20210822212137p:plain

React.js&Next.js超入門 第2版

ターゲット:初級
2021/2発売。入門者をターゲットにした掌田 津耶乃さんのお馴染み超入門シリーズ。あまり細かい点には触れず、Reactの主要機能、Reactベースのサーバサイドも含めたフレームワークであるNext.js、そしてGoogle発のBaaSであるFirebaseへのアクセスまで体感する…という本になっています。基礎部分を丁寧に扱っているので、他の難しい本では挫折してしまったような方にもおすすめです。React v17対応、日本で手に入る本の中ではReact Hooksと関数コンポーネントに対応した商業本は上記オライリー本以外には本書だけという状況が2021/8まで続いていました。
一方、初心者向けにあえて端折ったり噛み砕いた表現に留めている部分もあるので、仕事レベルで扱う方にはやや物足りないでしょう。

なおタイトルに「第2版」が入らない初版は2019/3発売、こちらはクラスコンポーネントがベースの記述で既に古いです。表紙も水色系でタイトルロゴも似ているのでご注意ください。→React.js & Next.js超入門

f:id:iwasiman:20210822212137p:plain

りあクト! TypeScriptで始めるつらくないReact開発 第3.1版 シリーズ

oukayuka.booth.pm

ターゲット:メインは中級~上級
電子版は2021/4アップデート、React v17とTypeScript4.2対応。
本エントリは基本的に手に入りやすい商業本に限っているのですが、非常に評価の高い技術同人誌なのでご紹介します。
【Ⅰ. 言語・環境編】【Ⅱ. React基礎編】【Ⅲ. React応用編】の3冊がセット。
追補応用編として『りあクト! TypeScriptで極める現場のReact開発』『りあクト! Firebaseで始めるサーバーレスReact開発』の2冊もあります。

フリーランスとして活動中の大岡由佳さんによるReact愛が詰まったシリーズ。テックリードとしてフロントエンジニア育成を始めた先輩と、サーバーサイドのRuby on Rails開発ならわかる2年目後輩の女性エンジニア同士の対話形式でReactを深く学んでいきます。
Reactの思想や経緯、環境設定、機能、主要ライブラリの変遷、現れては消えていったReact内の技術トレンド、コンポーネント設計、今後の展望…などReact界隈のすべてが詰まっています。もちろん関数コンポーネントReact Hooksの話も大きく取り上げています。
フロントエンドエンジニアとしてチームの一員でReact開発に大きく関わる方、プロジェクトリーダーやテックリードとして技術選定に関わるレベルの方なら、このシリーズをがっつり読み込んでやっていけばすべて足りてしまうのでは?というぐらいの最強の本。3冊セットでも3600円、商業本1冊と比べてもコスパは十分です。最初から開発言語にTypeScriptを前提にしているReact本もこの本だけです。
初心者の読者ももちろん意識はしているのですが、途中からどんどん本格的になっていく仕事レベルの本なので、いちおう主な対象は中級~上級かと思います。
当ブログでの感想記事シリーズがあります。→iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

Reactのv16までの本

React v16.0.0 メジャーリリースが2017年9月となっています。

速習 React 速習シリーズ

ターゲット:初級~中級
2018/8発売。技術書では安心のWINGSプロジェクトの山田祥寛さんによる速習シリーズ。まだクラスコンポーネントで書かれていますが、Reactの特徴やJSX、各機能~ルーティングまで、主なところが150ページぐらいの短い本の中に簡潔に詰まっています。短い時間で概要を理解したい方、手軽に入門したい方にもおすすめです。
この速習シリーズは電子書籍版のみですが、React以外にも様々なフレームワーク・技術・言語の本が揃っています。タイトル通り速習したい場合に便利です。
当ブログでの感想記事があります。→ iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

React開発 現場の教科書

ターゲット:中級~上級
2018/3発売。300ページクラスのボリュームの本格的な仕事レベルの本。Web開発の動向、Atomic Designを用いた設計、WebpackJestなど周辺ツールとReact本体以外も含んだ、本格開発一式の本となっています。2018年の本なので、状態管理についてはまだReduxを全面的に使う構成になっています。著者の方はDMM.comの方。

f:id:iwasiman:20210822212137p:plain

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

ターゲット:中級~上級
2018/2発売。こちらも400ページクラスのがっつりした、上と同じく本格的な仕事レベルの本。第1章からもうReduxが登場しかなり大きい扱いになっています。React本体の後はRedux Middlewareや非同期処理の話、UIデザインやサーバーサイドレンダリングの話など応用的な話題も取り扱っています。ヤフーの方らによる執筆。
タイトルには「入門」とありますがかなり本格的な本なので、JavaScript自体に入門中ぐらいの方は他の本を当たったほうがよいでしょう。発売から時間が経った今、Amazonの書評を見ると誤植が多いとの報告が多いです。(技術書あるあるですが...)
当ブログでの感想記事があります。→ iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

Reactの古めの本 (~2017)

 定評あるオライリー本もあったりするのですが、2021年~現在、どれか1−2冊読むならやはり情報はより新しい方がよいでしょう……ということで、2017年以前の本はこちらに分類させていただきました。

作りながら学ぶReact入門

2017/9発売。

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック

2017/7発売。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

2017/3発売。安心のオライリー本ですが、React v15、JSコードもES5、バンドラーにはBrowserifyを使っていたり古さが目立ちます。

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

2016/11発売。

入門 React ―コンポーネントベースのWebフロントエンド開発

2015/4発売。表紙が動物でなくサムラーイであることも当時話題になったりしました。→ねとらぼの記事

f:id:iwasiman:20210822212137p:plain

Vue.js の本

 Googleのエンジニアで後述のAngularJSに関わっていたEvan You(尤雨溪)さんが退職後、より軽く自分の作りたかったものを……という想いから生まれたVue.js。
後発だけにこれまでの技術や思想の良いところを取り込み、最初はCDN経由の直接読み込みでのシンプルな使用も可能、本格的に使うならビルドシステム導入に単一ファイルコンポーネントにルーティングに……という段階的な導入が可能な、Progressive Web Frameworkの思想を掲げた柔軟な仕組みになっています。VueViewのフランス語綴りで発音は「ヴュー」(日本語だとほぼ「ビュー」)らしいです。

 AngularJSが2012年、React登場が翌年2013年。AngularJSを作り直したAngular v2が2016年。同じ頃にVue.js v1.0.0が2015/10Vue.js v2.0が2016/10にリリース。第3世代の3つ目の主要フレームワークとして注目を浴び始めました。
 検索トレンドとダウンロード数を総合的に見ると、後発ながらAngularと並ぶか追い越すまで上昇。しかし世界トップを独走するReactには依然届かない……という状況です。Evanさんが中国人なので中国系企業で多く使われたこと、日本でもベンチャー企業が多く採用して認知度が上がったりしたことで活発になり、アジア圏で特に人気があります。日本国内では、Reactよりも商業本がだいぶ多いというのが面白い状況です。

 初心者にとってReact習得の大きな鬼門と言われる、JavaScriptコードの中にHTMLを書くようなJS拡張書式であるJSXがわからない…という人にも、JavaScript部分とHTML部分が完全に分かれるHTMLテンプレート形式を採用したVue.jsは馴染みやすいようです。HTML/CSSなら分かるデザイナー寄りの立場からのWebぺージ的なちょっとした利用、比較的小規模にスタートするアプリでの手軽な導入などにもよく使われています。
 一方、継続的に成長し続けるサービスの本格SPA開発で、粒度の細かいコンポーネントで綺麗な設計を保ちながら複雑化する開発を続ける…というようなケースではReactのほうが向いているという意見が多いです。

 日本では2018年に最初の本が出た頃から認知度が上がり出して人気に。2019~2020年にかけて、プログラミング初心者層向けの本については若干粗製乱造感もあるものの、かなりの数の本が出版されました。
 そして2020/9にはVue.js 3.0がリリース。Reactに後れを取っていたTypeScript対応が強化され、注目の新機能Composition APIコンポーネント内のあちこちに散らばった所定の処理を純粋関数として外出し可能に。このへんもReactと若干似ているのが面白いところです。このv3.0に対応した本も既に7冊入手可能と、日本では学べる環境が整っています。

Vue.js v3.0以降の最新本

Vue.jsビギナーズガイド 3.0 対応

Vue.jsビギナーズガイド 3.x 対応

Vue.jsビギナーズガイド 3.x 対応

  • 作者:ushironoko
  • シーアンドアール研究所
Amazon

ターゲット:中級〜
2021/7発売。C&R研究所から好評発売中のNuxt.js本、Nuxt.jsビギナーズガイドと同じコンパクトなスタイルの200ページの本。作者は別の方ですね。
Vue 3対応、Composition APIにも1章を割き、開発手法やモダンな周辺ツールも解説した本となっています。タイトルに「ビギナーズ」とはありますが、Vue.js 2.*までは既にある程度分かる人、すなわちVue.js 3.0についてビギナーズである人向けの本のようです。

f:id:iwasiman:20210822212137p:plain

現場で使えるVue.js 3.X 実践ガイド

ターゲット:中級~
2021/7発売。UIデザイナーもフロントエンドエンジニアも協力し合いながら、Vue.jsをツールに使ってクリエイティブなモノを作っていこうという、ちょっと一風変わったコンセプトの本。PWA対応、Firebaseとの接続、DockerやJavaScriptの各種ライブラリと、Webサイト制作に関わる周辺技術も様々に登場します。
状態管理してルーティングしてコンポーネント設計をしっかりやって大規模開発へ…などの、フロントエンド開発の高度領域とはまた方向性がちょっと違うようです。Vue.jsの基本は分かっており、静的WebサイトデザインやWebディレクション方面に関わる方向けでしょうか。著者の株式会社MONSTER DIVEさんのサイトを見るにクリエイティブ方面な感じがビンビンにしますね。会社のブログに記事があります。

f:id:iwasiman:20210822212137p:plain

みんなのVue.js

ターゲット:上級
2021/2発売。2018/9発売の『Vue.js入門 基礎から実践アプリケーション開発まで』の続編的な位置づけで、同書の作者の一人野田 陽平さんらPLAID社の方々による1冊。
完全に現場でVue.jsを使用しているレベルの読者に絞り、状態管理パターンの話、UIコンポーネントCSS設計、テストやパフォーマンスなど、現場寄りの様々なアイデア、より良いプラクティスをディープに扱っています。
プロには嬉しい一冊です。読者層が絞られてしまうこういう本も出るあたり、Vue.js界隈の環境が整ってきていることが伺えます。逆に入門したい方は、本書のようなハードル高めの本を1冊目に間違って買わないようご注意ください。

f:id:iwasiman:20210822212137p:plain

Vue.js 3 超入門

ターゲット:初級
2021/2発売。初心者ターゲットの様々な言語やフレームワークの本を出している掌田 津耶乃さんの超入門シリーズでVue3が出ています。Vue.js 3の新機能も扱っていますが、全体的に表面的な基礎部分をまずはなぞって体感する感じの本です。似た本でVue2の『Vue.js&Nuxt.js超入門』もあります。
ネガティブなことをいうのもあれですが、この超入門シリーズは誤植が割と多いことでも知られています。あくまで初心者向けの本ですので、仕事レベルで使いたい方はもう少しがっつりした本格的な本が良いかもしれません。

f:id:iwasiman:20210822212137p:plain

プロフェッショナルWebプログラミング Vue.js

ターゲット:初級~中級~
2020/11発売。Vue 3対応ですが目玉のComposition APIの中身は割愛。ビルドシステムを導入しないCDN読み込みスタイルでのVue.jsの様々な機能の解説、UI寄りがメインのようです。Vuexやルーティングの話は出てきません。
他の書籍と違う点として、最後のPART3ではNuxt.js導入、静的ページを作ってNetlify上で動かすという、JAMstack(JavaScript, APIs, Markupを使って静的コンテンツを配信するスタイル)の構築がしっかり載っています。技術同人誌発の「技術の泉シリーズ」以外でこのテーマを扱った本は珍しいので貴重ではないでしょうか。

f:id:iwasiman:20210822212137p:plain

21Stepで体得 Vue.jsハンズオン

[asin:4865942297:detail]

ターゲット:中級~
2020/10発売。Vue 2からVue 3への移行もサポート、Vue CLI 4にも対応。なんと紙版で600ページの大ボリュームのハンズオン本。高度な領域まで実際に手を動かしながらサンプルアプリを作っていくことができます。応用的メタフレームワークNuxt.jsのことも最後に載っています。
サンプルコードはJavaScriptとTypeScript両方が載っており、両方載っている本は珍しいです。仕事レベルでがっつりVue3を学びたい方向けの本です。

f:id:iwasiman:20210822212137p:plain

速習 Vue.js 3 速習シリーズ

ターゲット:初級~中級
2020/9発売。2020/9のVue.js 3.0登場の後に最初に対応した本。電子書籍のみですが手軽に短時間で各種技術の情報が得られる山田 祥寛さんの速習シリーズです。
旧版『速習 Vue.js』からの改定版として、Vue.js 3の基本機能、コンポーネントやルーティング、Vue CLI、状態管理のVuexまで、200ページの本ながら要点がぎっしり詰まっています。Vue.jsはある程度知っていてVue3のことを知りたい方にお勧めです。v3で対応が強化されたTypeScript言語の話は流石に乗っていないですね。
『速習 React 速習シリーズ』も紹介しましたが、この速習シリーズは安くて短時間で把握できるのでエンジニアの方にはお勧めです。もっと初心者寄りの方には同じ作者さんでv2の本として『これからはじめるVue.js実践入門』が出ています。
当ブログにも感想記事があり、Vue2との変更点を再確認したりしました。→ iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

Vue.js v2時代の本

改訂2版 基礎から学ぶ Vue.js [2.x対応!]

改訂2版 基礎から学ぶVue.js [2.x対応! ]

改訂2版 基礎から学ぶVue.js [2.x対応! ]

  • 作者:mio
  • シーアンドアール研究所
Amazon

ターゲット:初級~中級
2020/9発売。Vue.jsの認知度が高まってきた2018/5に発売された『基礎から学ぶ Vue.js』の改訂2版、Vue.js 2.6向けに対応済み、コマンドラインツールのVue CLI 4にも対応。
可愛いにゃんこが目印、一部では「猫本」として親しまれてきた本の改定版。Vue.jsの基礎から始まりVuexVue RouterVue CLIを用いたプロジェクト作成と応用的な領域まで一通り揃っています。作者のmioさんはWebデザイナー寄りの方ということで、CSSを駆使したトランジションなど、UIの話にもかなり力を入れつつVue本体もしっかり解説しています。表紙のにゃんこは作中でも度々登場、図表も多く多色刷りで読みやすいです。仕事で使うレベルのデザイナー寄りの方、Webエンジニアの方両方にお勧めです。
タイトル部分の背景が緑なのが本書。にゃんこ部分の背景が緑なのが前の版です。ご注意ください。
当ブログにも旧版を2018年に読んだ時の感想記事があります。→iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

たった1日で基本が身に付く! Vue.js 超入門

ターゲット:初級
2020/6発売。タイトルに「超入門」とありますが掌田 津耶乃さんの超入門シリーズとはまた別です。Vue.jsの基本部分を解説し、最後は約束のToDoアプリ、画像ビューアーアプリを作っていく本。
まあ「1日で」身につく範囲の情報ですので、仕事レベルの情報を求める方はもっと詳しい本のほうがよいでしょうか。HTML、CSSJavaScript自体の解説は少なめのようです。

f:id:iwasiman:20210822212137p:plain

これからはじめる人のJavaScript/Vue.jsの教科書

ターゲット:初級
2020/4発売。JavaScript自体の入門、TypoeScriptの入門、その後にVue.jsの基本部分の入門と最後はVue CLIを使って状態管理のVuexも入れて本格的なアプリ開発、と多彩なテーマを1冊に詰め込んだ本。中身もカラーで見やすいです。テーマが広いせいか、個々の話題の解説は少なめのようです。
まあ本格的にやっていくならJavaScriptもTypeScriptもVue.jsもそれぞれ別の本なり個別の情報ソースからしっかり学んだ方が良いかと思いますが、まず1冊で全体を概観するには良いかもしれません。

f:id:iwasiman:20210822212137p:plain

Webデザインの現場で使えるVue.jsの教科書

[asin:4274225402:detail]

ターゲット:初級~(中級)
2020/4発売。表紙の鹿が目印の本。ノン・エンジニアなデザイナー寄りの立場から、Webデザインの上でVue.jsをどう使っていくかにフォーカスした本。Vue.jsの基本部分、様々なデザインでの利用、UIデザインレシピ集なども載っています。解説もわかりやすく割と高評価ですね。今まではHTML+CSS+jQueryでWeb画面を作っていた方なんかがチャレンジするのに向いているのではないでしょうか。
画面の見た目を作っていくWebデザインの視点からであれば「初級~中級」の本ですが、状態を保持してサーバー側と通信したり本格的なモノを作っていくアプリケーション開発の視点からすると「初級」な本になるのではと思います。

f:id:iwasiman:20210822212137p:plain

これからはじめるVue.js実践入門

ターゲット:初級~中級
2019/8発売。仕事レベルの技術書では定評があって安心な山田祥寛さんの本。表紙の河童が目印です。
他の言語やフレームワークでは中級ぐらいの本を出されていることが多いのですが、Vue.jsは手軽に使う層も多いことを意識してか本書では初級者寄りにシフトしているようです。471ページと本格派の本。Vue.jsの基本から後半はVue CLI、ルーティングやVuex、テストまで踏み込んでいます。JavaScript自体の入門的なところは含まれていません。
初級者層向けの本の中では評価が高いです。Vue.js初めてなんだけど今後もじっくりやっていきたい…なんて方にはこの本あたりをお勧めします。

f:id:iwasiman:20210822212137p:plain

いちばんやさしい Vue.js 入門教室

ターゲット:初級
2019/4発売。基本機能を解説して最後はVue CLI 3も入った本。中身も多色刷りで会話形式の部分も多く、完全に初心者をターゲットにした本となっています。

f:id:iwasiman:20210822212137p:plain

Vue.jsのツボとコツがゼッタイにわかる本

ターゲット:初級
2019/3発売。表紙のカエルが目印、他にPythonも出ているツボとコツがゼッタイにわかる本シリーズです。JavaScriptはある程度分かり、Vue.jsはこれからという層に向けてしっかりと基礎部分を解説しています。評価も高めですね。
JavaScriptコードはモダンES6以前の基本的なコード。単一ファイルコンポーネントは最後に出てくるだけでVuexやルーティングの話もなし、それ以前の基本的なところにフォーカスしています。

f:id:iwasiman:20210822212137p:plain

Vue.js&Nuxt.js超入門

[asin:B07X6F1C2P:detail]

ターゲット:初級
2019/2発売。初心者ターゲットの様々な言語やフレームワークの本を出している掌田 津耶乃さんの超入門シリーズの1冊。Vue2の基本機能、通信ライブラリのaxiosを使ったサーバーサイドとの通信、Vue.jsを中心に各種フレームワークも載せた応用的なメタフレームワークNuxt.jsによる構築も載ったお得な本。
『Vue.js 3 超入門』と似たような位置づけの本です。あくまで初心者向けの本ですので、仕事レベルで使いたい方はもう少しがっつりした本格的な本が良いでしょう。

f:id:iwasiman:20210822212137p:plain

動かして学ぶ!Vue.js開発入門

ターゲット:初級
2019/1発売、対象はv2.5。2018年に仕事レベルのVue本が揃った後に登場してきた完全に初心者向けの本。npmによるビルドシステムなど高度な話は除外し、Vue.jsの基本機能、各種ディレクティブやデータバインディングなどなど一番の根っこの部分をしっかり解説した本です。
中身もフルカラー、余白も多くイラストもあって初心者の挫折を防ぐ工夫が盛り込まれています。JavaScript自体のプログラミングも現在学習中、などの方はこういった本で基礎を固めるのもよいかと思います。

f:id:iwasiman:20210822212137p:plain

Vue.js入門 基礎から実践アプリケーション開発まで

ターゲット:中級~上級
2018/9発売。2018年にVue.jsの認知度が上がってきた頃、満を持して登場した本格本。Vue.js自体のコミッター川口和也さんや、早期にVue.jsを導入したことで知られるベンチャー企業PLAIDの野田 陽平さんら強力な執筆陣による一冊。Vue.jsの基本機能から応用機能、本格的に使う際は必須の単一ファイルコンポーネント、状態管理ライブラリのVuexの導入、そして後半は中規模/大規模アプリケーション向けの記述にもかなり力を入れた、まさにプロユース向けの1冊。様々なコラムやテクニック、設計に関わる話も収録されています。
タイトルに「入門」とはありますが入門なのは最初の数章だけなので、初心者の方はもっと易しい本から始めた方がよろしいでしょう。
当ブログでの感想記事があります。→

iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

Vue.jsの古い本

『改訂2版 基礎から学ぶ Vue.js [2.x対応!]』の初版の『基礎から学ぶVue.js』、『速習 Vue.js 3 速習シリーズ』の前の『速習Vue.js』、そして記念すべき日本で最初に出たVue本である『Hello!! Vue.js』があります。さすがにもう古いですね。

f:id:iwasiman:20210822212137p:plain

Angular の本

 Googleからフルスタックなフレームワークとして第3世代の中で最も早く2012年に登場したAngular。言語はTypeScript使用、ロジック部分とビュー部分を完全に分けたHTMLテンプレート形式の構成、DI(Dependency Injection)の考え方などなど、最初から大規模本格開発を意識した、学習コストがやや高い重量級フレームワークとなっています。半年に1回の高速なバージョンアップで独自進化を続け、日本でもコミュニティが活動を続けています。
 変化の速い領域の宿命か、世界的なダウンロード数レベルでは後発のReactに追い抜かれ、さらにその後のVue.jsもAngularと並ぶか超すぐらいまで伸びており、今後がどうなるのか気になるところです。

 なお初登場が2009年で2012年6月にv1.0が名称『AngularJS』としてリリースされましたが、その後アーキテクチャレベルで全面的に書き直され、後方互換性なしの劇的な変身を遂げたほとんど別物の『Angular』としてv2が2016/9にリリースされ、現在まで続いています。名前が似ているので検索する際にご注意ください。

 半年に1回のメジャーバージョンアップという速いリリースサイクルを持っており、最新のv12.0.0が2021/3。v11.0.0が2020/11。v10.0.0が2020/6となっています。
 出版まで時間のかかる商業本ではさすがにこのリリースサイクルについていけないのか、日本で手に入る本はv4~v5あたりのものが多いです。2019年6月の超入門本以降、新刊が出ていない寂しい状態となっています。

Angularの手に入る本

Angular超入門

ターゲット:初級
2019/6発売。プログラミング入門者層にはおなじみの掌田津耶乃さんの超入門シリーズ。Angularの入門部分を押さえ、様々な機能の概要に触れていく本になっています。対応バージョンは明記されていませんが、バージョンに左右されない基本部分が中心と思われます。

f:id:iwasiman:20210822212137p:plain

AngularによるモダンWeb開発 基礎編 第2版

ターゲット:中級~
2019/2発売。2017年1月の『Angular2によるモダンWeb開発』の改訂版ということで、AngularによるPWA(Progressive Web Application)の開発が中心の本。2020/2リリースのAngular v9へのアップデート情報もホームページのeBookで提供されています。

f:id:iwasiman:20210822212137p:plain

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

[asin:B07BXY3V2L:detail]

ターゲット:初級~
2018/4発売。表紙から分かるように、比較的初心者をターゲットにしたやさしめの本です。

f:id:iwasiman:20210822212137p:plain

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク

ターゲット:中級~上級
2017/12発売。その筋の一線の執筆者陣を揃え、Angularの全体像からテストなど応用的な分野まで扱った本格的な本。v5に対応しています。2つ下の『Angularアプリケーションプログラミング』と並んで評価の高い本です。

f:id:iwasiman:20210822212137p:plain

AngularによるモダンWeb開発 実践編 実際の開発で必要な知識を凝縮

ターゲット:中級~上級
2017/11発売。2017/1の『Angular2 によるモダンWeb 開発』の続編、実践的な内容を扱った本。この時点でAngular v5が登場していましたが、出版タイミングが悪かったのか本の内容はAngular4.3対応に留まっています。

f:id:iwasiman:20210822212137p:plain

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

ターゲット:中級~上級
2017/8発売。2019/6に紙の本の3版に電子書籍版も対応。Angular v4, 一部v5に対応。
技術書としては有名なWingsプロジェクトの山田 祥寛さんによる安心の1冊で、概念から応用まで一通りしっかり学べる本となっています。Angularの本の中では最も評価が高いです。
当ブログにも感想記事があります。→iwasiman.hatenablog.com

f:id:iwasiman:20210822212137p:plain

Angularの古い本

こちらはもう買うべきではない本。

『Angular2によるモダンWeb開発』が2017/1発売。v2対応なので本書の改定版が『AngularによるモダンWeb開発 実践編 実際の開発で必要な知識を凝縮』として出ています。

『AngularJS アプリケーションプログラミング 』が2015/8発売、山田 祥寛さんによる本。日本でフロントエンドが注目され始めた頃の本ですね。
本自体の評価は当時も高かったのですが、v1のAngularJSの本です。『Angularアプリケーションプログラミング』と名前が似ているので間違って買わないようにご注意ください。表紙の右半分に大きくAが書いてあるのが古いほうの本書、Angularのロゴが中央にあるのが新しいほうのv4の本です。

ほか、オライリー本の『AngularJSアプリケーション開発ガイド』『AngularJSライブラリ 活用レシピ 厳選 108』 『AngularJSリファレンス』という本も2014-2015年には出ていました。

f:id:iwasiman:20210822212137p:plain

フロントエンド全般の本

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装

ターゲット:中級~上級
2021/1発売。フロントエンド界隈の歴史から始まり、様々なツールとそれらを使う理由、フロントエンドエンジニアに求められるスキル群、技術の選び方や仕事の進め方…など、客観的に見たフロントエンド領域全般との向き合い方を述べた本。仕事で使うレベルの方向けです。
こうした、領域全体を俯瞰した本というのは実は少ないので貴重かと思います。

他、似たような?全般を扱った本としては『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が2018年、『フロントエンドエンジニアのための現在とこれからの必須知識』が2016年、『フロントエンドエンジニア養成読本[HTML ,CSSJavaScriptの基本から現場で役立つ技術まで満載!]』が2014年。う~んこのへんはもう古めになってしまうでしょうか。

f:id:iwasiman:20210822212137p:plain

まとめ:フロントエンドの本も増えてきたよ

 この流れでJavaScript言語、TypeScript言語、周辺技術の本...などもまとめようかと一瞬思ったのですが、量が多いので力尽きました(笑) 自分が2018年4月頃に学びがてらにまとめた頃に比べると、商業本で読める本もだいぶ増えて賑やかになってきました。特にVue.js陣営が後発ながら本をだいぶ強力に揃えてきています。
 フロントエンド界隈は変化が速いから本を買ってもしょうがない……といった意見も一部にはありますが、体系的、包括的な知識を本で得ることによる学びは大きいと思います。
また近年では更新速度が商業本~Webの間の中間領域に位置するモノとして、YouTubeのような動画で学ぶ、Udemyのような学習プラットフォームで学ぶ、あるいは技術同人誌で最新情報を得るという方法もあります。
ITエンジニアの本業の傍ら、技術書典や技書博で本を出しているという方もけっこういらっしゃいますね。

techbookfest.org gishohaku.dev

 これはフロントエンドに限らず他の技術領域でも同じですが、こうした複数の情報ソースから多少被ってもよいから多角的に学び、自分なりに噛み砕いて理解を深めていく…というのが学びの早道かなと思っています。
 それでは、これから学ぶ方の助けになりますように...! Twitterなどなどでのリアクションは大歓迎でございます。

f:id:iwasiman:20210806142935p:plain
Angular, React, Vue.js おすすめ本リスト 2021夏