【感想】『モダンJavaScriptの基本から始める React実践の教科書』：フルカラーの #挫折しないReact本
挫折せずにReactに入門しよう
2021年9月に発売された最新のReactの本です。作者はUdemyのReact講座がベストセラーとなっているじゃけぇさん。「じゃけぇ本」と呼んでいる界隈もあるようです。内容もフルカラーで入門者に読みやすい本となっています。
僕は本書のターゲット層よりは先に進んでいる(はず)なのですが、とてもオトクなKindleポイント50%還元キャンペーン(実質半額！)をやっていたので復習も兼ねて読みました。
- 挫折せずにReactに入門しよう
- Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
- Chapter2 モダンJavaScript の機能に触れる
- Chapter3 JavaScript でのDOM 操作
- Chapter4 React の基本
- Chapter5 React とCSS
- Chapter6 再レンダリングの仕組みと最適化
- Chapter7 グローバルなState 管理
- Chapter8 React とTypeScript
- Chapter9 カスタムフック
- まとめ：初心者も挫折せず進められるReact入門書
Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
Reactで挫折するもっとも大きい原因は、その前段としてモダンJavaScriptを習得すべきなのだがそこが抜けている...ということで基礎を学ぶ章。
仮想DOM、パッケージマネージャーのnpmとyarn、正式名称はECMAScriptである話、モジュールバンドラーやトランスパイラ、SPAなど概要を解説してくれます。
最後に登場したのですがBabel、Webpackに続いて最近のビルドツールでは2020年発表の Vite (ヴィート)も紹介されています。作ったのがVue,jsの作者のEvan Youさんということで注目されているんですね。Webpackがファイナルアンサーなのかと思っていたらまた新しいのが出てきたのか...
なお各章の冒頭や節に挟まれたコラムでは、とある会社でReactに挑むメンバーが会話形式でしばらく話をする体裁となっています。
- 主田(ぬしだ)：入社3年目男性の主人公。第4事業部に異動して初のフロントエンド、初のReact開発に挑む。これまではVisual Basicしかやっていないという設定。
- 先岡(さきおか)：6年目の女性のフロントエンジニア。社内で勉強会も主催しているというデキる先輩設定。主田クンが“令和の日本に舞い降りた女神”と崇めている。
まったくの偶然の一致ですが、Reactで有名な技術同人誌『りあクト！』シリーズも女性のデキる先輩が後輩に語る体裁をとっていたので、こういうところはちょっと面白いです。
なお単にイラストの話ですが、主人公の主田クンもいかにも若手らしい黒のリクルートスーツ、先岡先輩もグレーのスーツと割とフォーマルな格好をしていますね。Reactを活用しているのだから、物語の舞台は全員私服でMacBookでドヤヤヤァ～と開発しているモダンでイケてるナウいWeb系企業なのでは(※勝手なイメージ)、と思ったのですがそうでもないようです。
「第4事業部」というネーミング、作中後半に出てくる昭和の人っぽいアレな課長といい、舞台は旧来型の日本企業なのかもしれません。メイン言語がVBだけというのも今時珍しいキャリアな気がします。主田クン実は平成の過去からやってきた時間遡行者なのでは...？
Chapter2 モダンJavaScript の機能に触れる
1日でマスターしますとアツい決意をした主田君と一緒にモダンJSを学んでいく章。
実際にはReactの機能ではなくReactでよく使うモダンJSの記法、アロー関数形式、分割代入やスプレッド構文などなどを学んでいきます。
三項演算子はプログラム言語や文化によって推奨だったり非推奨だったりしますが、本書ではReactではよく使うので推奨となっていますね。
論理演算子 && と || の本当の動きのところは完全に忘れていました。こういうところがJavaScriptは厄介ですね...
本全体がフルカラーなのでコード例もわかりやすく、このへんは入門者にも挫折せず進められるのではないでしょうか。先岡先輩の話のなかで、PrettierやESLintの話も少しだけ出てきます。
Chapter3 JavaScript でのDOM 操作
Reactそのものに入る前に、まずはJavaScriptでもDOMが操作できてHTMLの内容を書き換えられること、この仕組みをフレームワーク化して進化した形がReactなのだということを解説する章。
コラムにjQueryも登場しますが、まだまだ現役だが今後は徐々に使われなくなるよ、という立ち位置の解説になっています。最後はピュアなJSで簡単なメモアプリの実装例も出てきます。「バニラJS」とは何か説明してあるのもよいですね。
なおストーリーではここで新たな登場人物が加わります。
- 後藤：未経験入社の新卒男性。やる気と根性はある熱血元気キャラ。先輩になった主田君と一緒にReact習得に挑むことに。
なんだか主田君と衝突する展開になる予感...舞台の会社は未経験でも採るんですね。受託開発や人の派遣もやってる会社なのでしょうか。
Chapter4 React の基本
主人公の主田君はここまで１週間で学んだという設定で、いよいよReact本体の入門に入ります。実際にコードを書いて学ぶ上での読者へのおすすめはCodeSandboxとなっていました。
Create React Appを使う方法も一応解説してあるのですが、実際の開発では後者なのだからこちらを重点にしたほうが良かったのかなと思いました。
内容はおなじみJSX記法、コンポーネントの作り方、propsやStateなど。2021年の本なのでクラスコンポーネントはなし、すべて関数コンポーネントになっています。どうコードを追加していくかの例も色が変えてあって分かりやすいですね。
そしてコンポーネントに状態を持ったStateの使い方についても、最初からReact Hooksの機能useStateを使う前提で解説されています。Stateが変わった時だけ行うという例で、useEffectもここで出てきます。
コンポーネントのエクスポートの書き方で、export defaultと書かずに普通に書く方はnormal export と呼ぶのは初めて知りました。
Chapter5 React とCSS
暑苦しい後輩の後藤君と一緒に、Reactでよく使うCSSの適用方法をまとめた章。
Inline Styles: Reactコンポーネントの中に普通にJavaScriptオブジェクトで書く。基本。CSS Modules: node-sassをインストール、コンポーネントごとに別の.scssファイルに定義。通常のCSSと似た感覚で使える。Styled JSX: styled-jsxをインストール、コンポーネントのreturn句に{ ～}の中にCSSを書く。React＋バックエンドを含めたNext.jsで採用されている。styled components: styled-componentsをインストール、CSSを定義したSContainerのような別コンポーネントを定義して、JSXの中でそのコンポーネントで対象を囲う。Emotion: npmからインストール、Inline Styles/Styled JSX/styled componentsどの方法も使える。Tailwind CSS：近年人気のCSSフレームワーク。npmからインストール、create-react-appの場合は設定を上書きする必要があるのでCRACOというものもインストール、package.jsonの修正が必要。独自の設定ファイル必要。その後はJSXの中のタグのclassName=""に、Tailwind が定義したCSSクラス名を指定すればそのまま使えて便利。
Udemyの講座でやった時にこのへんも実際に使ったのですが、一覧でまとめてくれるとありがたいですね。いろいろあって結局どれがいいんじゃ～！となります。
巷では確かにTailwind CSSが良いという話を最近よく耳にします。推す方もいれば合わなかったという方もいて、どうなんでしょう...
Chapter6 再レンダリングの仕組みと最適化
ReactではStateの更新、propsの更新似合わせてコンポーネントが再レンダリングされる。その際に子供のコンポーネントもレンダリングされる。ここを改善して最適化していこう...という章。 React Hooksのmemoで関数コンポーネントを囲う、useCallbackで関数の処理を囲んで再生成を減らす、useMemoで変数を囲む...というやり方が説明されています。
ストーリーではここで適当なことばかり言う無茶振り課長が登場します。この人も令和の管理職っぽくないですね。舞台の会社設定の謎が深まります...
Chapter7 グローバルなState 管理
親のコンポーネントから子へ順順にpropsを渡していくいわゆるバケツリレー。これがどう辛いのかの実例を上げた後に解決方法に。これが数年前のReact本やWebの記事だったら状態管理ライブラリのReduxがドドーンと出てくるところですがさすが2021年の本、React HooksのuseContextを使って解決していきます。コード例も色分けがしてあって分かりやすいです。
- 最後にReduxアーキテクチャの解説。近年はダウンロード数も緩やかになっている。
- React公式の状態管理ライブラリのRecoil。2021/8でも試験的段階。(2022/6/1でもまだRecoil 0.7.3でした。) 小さいプロジェクトや個人開発ならアリ。あのZennでも導入。
- GraphQLのクライアント側の操作のライブラリ Apollo Client。これを状態管理に使う方法もある。
と最後に解説もあり。Reach Hooksの登場で完全決着するかというとそうでもなさそうですね。Recoilは果たして今後普及するのでしょうか...
ストーリーではここでパートナー会社にも開発を発注していて先岡先輩がおこになっているシーンが描かれているので、舞台の会社はそれなりに規模があることが分かります。コミュニケーションは電話なんですね。
Chapter8 React とTypeScript
もはやReact開発でもほぼ必須！ということでTypeScriptを解説していく章。各種言語仕様、tsconfig.jsonの書き方、Reactでの使い方などなど。型があると何が嬉しいかは、VSCodeの画面のスクショで下線のエラーが出たりドットで補完候補が出るのを見せて雰囲気をわかってもらうやり方となっています。最後にライブラリの型定義の話もあるのはありがたいですね。
女神の先岡先輩もTS推進派らしくTypeScriptのない開発なんてありえない！とテンション高くなっていますが、この章もそんなに詳しくは扱ってはおらず、.tsxにコードを書いていくのも本書の中でこの章だけです。まあそもそもモダンJavaScriptの段階で躓いてしまったりする人も含めた層が対象の本なので、TypeScriptについてはもっと詳しい別の本を参照、という流れでしょうか。
Chapter9 カスタムフック
最後はReact Hooksの応用のカスタムフックを自作し、APIと通信してデータを取得するロジック部分などをカスタムフックに外出ししていきます。明記されてはいませんが、ほぼリファクタリングでコードを改善していくようなものですね。徐々に変わっていくコードも削除部分と追加部分が色分けされていて分かりやすいです。
最後のコラムではフロントにReact、バックエンド全体をカバーするBaaSの構成としてFirebase、AWS Amplify、Supabaseのワードも登場します。
Supabaseは本書で初めて名を知ったのですが、2021年頃から急激に伸びている"Firebase Alternative"を謳うサービス、FirebaseのRDB版(PostgreSQL)のようなものだそうです。Firebaseを齧った時にやっぱり制限が多いな、これのRDB的なやつはないのか...と思ったのですがやっぱり出てきたんですね。いやはやどんどん変わっていきます。
supabase.com qiita.com dev.classmethod.jp
そして最後は付録として「React × TypeScript 実践演習」として演習課題。1画面のSPAで新規メモを追加、それぞれのメモを編集できるアプリを作り、カスタムフックを用いてロジックを独立させていきます。これはなかなか本格的です。
まとめ：初心者も挫折せず進められるReact入門書
全面フルカラー、サンプルコードもきれいに色分けされ、最初はモダンJSの基礎から...と入門者にも分かりやすい本でした。2021年の本らしく最初から関数コンポーネント、Hooksも載っています。自分も忘れていたところがあったのでよい復習になり、新たなキーワードも幾つか発見できてトレンド知識をアップデートすることができました。これから学ぶ方も、本書なら挫折せず進められるのではと思います。
反面、Reactではこう書くとこう動く...というのは網羅されているのですが仕組みとか背景の思想とか経緯とか、そういった深堀りはあまりされていないですね。そもそもHooksの副作用とはなんぞやという解説もあまりされていませんし、TypeScriptを使うのも8章と最後の演習だけです。作中の主人公くんが頼りにしている先岡先輩の台詞でもフロントエンド周りのキーワードはあれこれ出てくるのですが、大体ふわっとした話に留まっています。まあこのへんは読者層のターゲットを考えてということでしょうか。
なお、作中ストーリーの主人公の主田君は毎日オフィスで先岡先輩に会うたびに心の中で女神を讃えているようです。どうでもいいのですが、あんまし会社の女性の先輩に夢見るなよ！と思ってしまいました。(笑)
また本書は中盤からexample.comにフェッチを掛けてJSONで結果を取得するのですが、この users API、引数無しで登場人物たちの個人情報一覧がシュッと返ってくるストレートな仕様になっています。先岡先輩の年齢も一発で...あっこれはデリケートでセンシティブな情報ですね。そこの若手二人！ カスタムフックのuseFetchUsersに年齢マスクの機能を追加して実力アピールするのじゃ！(さらにどうでもいい感想w)
Twitterのハッシュタグ#挫折しないReact本で本書の感想などを見ることができます。
SB Creativeのページ。
サンプルファイルはGitHubからダウンロードできます。
本書の元になっているUdemyの講座。ベストセラーになっています。ぼくもUdemy Business経由でやりました。
https://www.udemy.com/course/modern_javascipt_react_beginner/:www.udemy.com
Webデザイン周りでおなじみのコリスの書評が注目されていました。
おまけ：Reactに入門できる本
世界レベルの普及率ではReactはVue.jsよりも勢いがある割に、日本の商業書籍ではReactの新しめの本が少ないという状況が続いていましたが、本書含めて2021年から本が揃ってきました。どれもクラスコンポーネントでなく関数コンポーネント、React Hooksが入った本になっています。
『基礎から学ぶ React/React Hooks』が本書と同時期、2021年8月発売。こちらもJavaScriptの基礎から解説してくれます。本書とターゲットは同様の入門者向けの本。
『Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス』が2021年8月発売、中級者以上向けの本格的なオライリー本。
『React.js＆Next.js超入門 第2版』が2021年2月発売、入門者をターゲットにした掌田 津耶乃さんのお馴染み超入門シリーズ。
それ以前ですと技術同人誌『りあクト！』シリーズが内容の濃さではもう圧倒的ですね。商業本でなくてよいならお勧めです。
それ以外にVue.js、Angularの本もまとめ直した記事があります。こちらも併せてぜひどうぞ！
