【読んでみた】React Angular Vueをスムーズに修得するための最新フロントエンド技術入門
書籍
LWC メインで利用してるけど、他のフレームワークも久々に触らないと忘れそうな気がしたので読んでみました。
所感
最近のWebサイトの仕組みと、パターンの説明（無限スクロール、画面の復元、オフライン化等）から始まり、JavaScript/TypeScript/NodeJS の基礎、ブラウザAPIと、その演習が含まれます。
各フレームワークは基礎と導入方法までですね。
極力、エンジニアでない方でも読めなくないかなというような内容ではありますが、おそらくメインのターゲットは Java や C#/Python といった言語を習得して、MVC フレームワークでサイトを作った経験者向けではないかと思います。
既にそうした「MVCフレームワークでサイトを作った経験のある人」がより良いユーザ体験を作り込むために、フロント技術を学ぼう…そう思った時に最適なのかなと思います。
尚、この本のユニークな点は「学んだフロントエンド技術を実際の開発現場に持ち込むためのHowTo」が載っていること…。
要するに、チームを説得して技術を実践投入しちゃおうという内容が含まれます。
これはなかなか類を見ないかなと思いますね。
個人的な最大の見どころは、8章「お役立ち情報」。
- 技術要素の検索の仕方（ググり方）
- エラー発生時の調べ方（StackOverflowの探し方）
- コンポーネント分割の単位の決め方
- iOS だけ動かない場合の調べ方
- モバイルデバイス固有のリソース問題
- 重複登録の避け方
- 各フレームワークデバッグツール利用方法
正直これだけのために買っても良いんじゃないかって思いますね…。
（長年やってれば体感的に知ってる事だとは思いますが、これを知ってるかどうかで効率が全く違うので、知らないなら是非）
各章の内容
- フロントエンド技術の動向
スクロール中に次のコンテンツを読んで待たせないなどよくある機能がどの様にサーバとやり取りしてるのか？
フロントの役割と、サーバの役割を明確に説明しています。 - 次世代SPIのデモ
今となっては次世代でもなんでもない気はしますが、それは置いといて…
動作するデモを参考に、どういったことが出来るのか、どの様な応用があるのかを紹介します。- 無限スクロール（＋Google 検索がページ式の理由）
- 待ち時間のないデータ検索
- 画面状態の復元（別サイトから戻った時の状態復元、入力途中のデータの復元等）
- Web サイトのオフライン化
- JavaScript 開発環境
JavaScript/TypeScript に、node.js の基礎、npm の操作方法の基本等を説明する章。
言語の基礎が大分ウェイトを占めますが、プログラミング経験者なら node.js まで読み飛ばしも可能です。 - 最新 Web ブラウザの機能
Web ブラウザで利用可能な機能について説明する章。
最近の ECMAScript (JavaScript の仕様)をどこまで使えるのか？ブラウザ毎の対応状況の確認方法、JavaScript から呼び出せるAPIの調べ方（と使い方の調べ方）説明。
JavaScript ライブラリの種類（UIライブラリ:BootStrap,MaterialUI等、グラフィックライブラリ:ChartJS等、データストアライブラリ:indexedDB 等）の紹介。 - アプリケーションフレームワーク
アプリケーションフレームワークで使われる技術要素（仮想DOM、コンポーネント、状態管理ライブラリ、ルーター、ビルドツール）の説明、React/Angular/Vue の特徴説明。
各フレームラークのプロジェクト作成方法等。
（ただし、フレームワークはガンガンアップデートされるので、プロジェクト作成等は公式サイト見た方が良いと思う。因みに、ここは書籍の内容が浅くしかやらないので、興味本位でもう少し深掘りして調べた記事がこのブログにある） - ネットワーク経由のAPI(Web API)
SOAP/REST 等の説明の章。説明として、WordPress 公式の WebAPI 経由で更新するなどの操作、通信ライブラリ Axios の紹介があります。 - 導入のポイント
この書籍で紹介されている技術を、実際の開発で導入する手順。 - お役立ち情報
技術要素の検索の仕方（ググり方）、エラー発生時の調べ方（StackOverflowの探し方）、コンポーネント分割の単位の決め方、iOS だけ動かない場合の調べ方、モバイルデバイス固有のリソース問題、重複登録の避け方、各フレームワークデバッグツール利用方法等。
むしろこの章だけで一冊くれって内容ですね！
