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

React の学習で最初につまずくのは、React そのものよりも、その土台になっている JavaScript の書き方であることが少なくありません。『モダン JavaScript の基本から始める React 実践の教科書』 (じゃけぇ 著、SB クリエイティブ、2021 年 9 月刊、A5 判) は、書名どおりモダン JavaScript の基本から入り、React の基本、React と CSS、再レンダリングの仕組みと最適化、グローバルな State 管理、React と TypeScript、カスタムフックまでを 1 冊で扱う入門書です。版元は React をイチから学びたい方に向けた 1 冊と位置づけ、著者が 2 年以上勉強会を主催し初学者と話す中で分かった、多くの人が感じる React の挫折ポイントを解決する構成だと紹介しています。著者のじゃけぇ (岡田拓巳) は、版元公式の著者紹介 (刊行時点) によれば株式会社 Reach Script の代表取締役で、SIer、フリーランスのフロントエンドエンジニアを経て同社を設立し、動画教材販売プラットフォーム Udemy で React のコースを 2 つ出して最高評価を獲得する等ベストセラー講師となっているとあります。

全 9 章と付録の構成、JavaScript 基礎から React へ

構成は全 9 章と付録です。Chapter 1「React を始める前に知っておきたいモダン JavaScript の基礎」では、DOM と仮想 DOM、パッケージマネージャー (npm/yarn)、ECMAScript、モジュールバンドラー、トランスパイラ、SPA と従来の Web システムの違いという、React の周辺にある概念を先に整理します。Chapter 2「モダン JavaScript の機能に触れる」は const、let での変数宣言、テンプレート文字列、アロー関数、分割代入、デフォルト値、スプレッド構文、オブジェクトの省略記法、map、filter を、Chapter 3 は JavaScript での DOM 操作を扱い、ここまでが React に入る前の土台です。Chapter 4「React の基本」で React 開発の始め方、JSX 記法、コンポーネントの使い方、イベントやスタイルの扱い方、Props、State (useState)、再レンダリングと副作用 (useEffect)、export の種類を学び、Chapter 5 以降は React と CSS、再レンダリングの仕組みと最適化、グローバルな State 管理、React と TypeScript、カスタムフックへ進み、付録の React × TypeScript 実践演習で締めます。

React の前に JavaScript でつまずく理由と、この本の学ぶ順序

React のコードは JavaScript そのものですが、アロー関数、分割代入、スプレッド構文、map による配列の変換といったモダンな書き方が前提になっていて、目の前の記述が React 独自の概念なのか JavaScript の文法なのかを切り分けられないまま写経すると、エラーの原因が追えなくなります。また React は SPA を作るための UI ライブラリで、ブラウザの DOM を直接書き換える従来の作法とは異なり、仮想 DOM を介して差分だけを画面に反映する仕組みで動くため、素の JavaScript で DOM を操作する体験を一度しておくと、React が何を肩代わりしているかが実感として分かります。本書は React の解説を Chapter 4 に置き、その前の 3 章で文法の切り分けと DOM 操作の体験を済ませる順序を取っていて、npm や yarn、バンドラーやトランスパイラといった開発環境の道具も、React に入る前の Chapter 1 で先に扱う流れになっています。

CSS の選択肢、再レンダリング最適化、TypeScript まで踏み込む後半

Chapter 5「React と CSS」は Inline Styles、CSS Modules、Styled JSX、styled components、Emotion、Tailwind CSS と、React でスタイルを当てる 6 つの方法を並べて扱い、Chapter 6「再レンダリングの仕組みと最適化」では再レンダリングが起きる条件を押さえたうえで memo、useCallback、useMemo による最適化を学びます。Chapter 7「グローバルな State 管理」はグローバルな State 管理が必要な理由から Context での State 管理、その他のグローバル state を扱う方法へ進み、Chapter 8「React と TypeScript」は TypeScript の基本、API で取得するデータへの型定義、Props やコンポーネントの型定義、省略可能な型の定義、オプショナルチェイニング、ライブラリの型定義を扱います。Chapter 9 のカスタムフックと付録の React × TypeScript 実践演習まで進めば、React で実務に入るときに必要になる TypeScript と、自分で フック を切り出す手順までを一続きに学べます。版元は現場のシチュエーションベースのストーリーで技術解説をしていると紹介しており、版元のサポートページには 2022 年 11 月付で記事名に【V18 対応】を掲げた補足記事のほか、正誤情報とサンプルファイルのダウンロードが掲載されています。

React をイチから学ぶ人の前提知識と、向かない使い方

前提知識は多くを求めません。HTML と CSS の基本を知っていて、JavaScript を少しでも書いた経験があれば読み始められる水準で、Chapter 1 と 2 でモダン JavaScript の周辺概念と文法を改めて扱うため、古い書き方しか知らない人や、フレームワークのチュートリアルを写して動かした経験しかない人でも土台から積み直せます。一方で、Next.js のようなフレームワーク、サーバー側の実装、テストの書き方を扱う章は目次にありません。TypeScript の解説も React と組み合わせて使う範囲が中心なので、既に React を業務で書いていて設計論や大規模化の指針を求める人には物足りません。

元が取れるのは、React のチュートリアルを試したものの、useState や useEffect の挙動、JSX の書き方、そもそもの JavaScript 文法のどこで詰まっているのか分からずに止まってしまった人、そして独学で React を身につけて実務のフロントエンド開発に入りたい人です。JavaScript の土台から TypeScript とカスタムフックまでを一続きに追える構成なので、読み終える頃には、コンポーネントと State を考えながら小さな Web アプリを自力で組み立て、型の付いた React のコードを読み書きできる状態を目指せます。React を一度あきらめた経験がある人ほど、土台から積み直す本書の順序が効く 1 冊です。