概要

「2023年、新たに学びたいJavaScriptフロントエンドフレームワークはなんだろう？」
と考えると、多くの人はReactが候補に上がるのではないかなと思います。

この本ではReactを学びたい人向け、もっというと、 Web制作の仕事をしていて、Reactを勉強したい人向け のReact入門本です🔰

ハンズオン形式で、一冊を通してHeadlessCMSブログ（Next.js + microCMS）を制作する内容です。

（Web制作の仕事はHTML, CSS, jQueryを使用した静的なWebサイト制作やWordPressなどを想定）

対象となる読者

「HTML, CSS, JavaScriptの基本的なことはだいたいわかる」 という人がちょうど良さそうに感じました。

逆に今現在仕事でReactを書いている人がNext.jsを勉強するために使うには物足りないと思います。

この本の方針(?)

JavaScriptを学ぶ
Reactを学ぶ
Next.jsを学ぶ

という順序で学習するのが 本来の（自然な）学習のロードマップ だと前置きした上で、「Next.jsから勉強したらいいんじゃないか？」 と説明されています。

Next.jsからReactの勉強を開始する良さ について下記の3つが挙げられていました。

Reactの環境構築が簡単
サイト構築が簡単（ルーティングなど）
SSGやSSRを手軽に試すことができる

「この本の方針」についての所感

この本の方針について、率直にいいなと思いました。

私は前職でWeb制作会社に勤務しながら、以下のような本来?の自然?な学習のロードマップで学習をしました🚶

JavaScriptの基本文法を学ぶ
React
- コンポーネント設計
- StateやProps
- 主要なHooksの使い方
- ReactでのCSS
- create-react-appでアプリを作成
グローバル状態管理ツール（Reduxとか）
FirebaseやVercelにデプロイ

ざっくり上げるだけでも Next.jsを勉強するまでに色んなステップを踏む必要があった 感じがします。

Web制作の現場にいて今後ヘッドレスCMSで実装をする予定がある人にとってのつまずきそうなこと（環境構築, State, Props, Hooks, Reduxなど）をあまり使用せずに、コンポーネント設計やCSSの閉じたスコープ、ルーティングなどのメリットを享受できるNext.jsから学習に入るのは、理にかなっている印象を受けました。

（結局は上記の「つまずきそうなこと」は学ぶ必要がありますが…！）

この本で学べること

コンポーネント設計
CSS Modules
記事取得API
Next.js
- ルーティング、動的ルーティング
- Next.js特有のコンポーネントの役割（Image, Link, Layout, etc）
- getStaticProps, getStaticPaths
React
- DOM, JSX, classはclassName使うなど、本書を進める上での基礎知識
- Hooks（useState, useRef, useEffect）
microCMSで記事やAPIを作成する
etc

私がこの本を読んだ2022年時点ではAppRouterについては触れられていませんでしたが、ダウンロードデータで対応がされたとのことです。

「Next.js 13 対応ガイド」を更新しました。［2023年7月11日］
✅ Next.js 13で本書を進める方法
✅ App Routerへ移行する方法
をまとめていますので、ダウンロードデータでご確認ください。

書籍WEBサイト（https://ebisu.com/next-react-website/）より

この本で学べないこと

Reactの基本的な部分（状態管理、コンポーネント設計、Hooks、ルーティング）
グローバルな状態管理ツール（Redux, etc）
TypeScript
CSS
デプロイ、テスト
etc

Next.js + microCMSでブログを作成しながら学ぶのがテーマのため、多くのことをすっ飛ばしています。

そのため上記は 「学べないこと」 ではなく 「学ばないこと」 であって、それがこの本の良さなのかなと思いました。

感想

Web制作会社で働きながら「モダンなJSフレームワーク使って仕事したいな〜」と思っていた時期があった自分にとってはとても刺さる内容でした。

説明が丁寧にされているので、 初めてReact触る人でもすんなり進めることができそう＆ハンズオンで作成するブログがいい感じで楽しさを感じられそう なので、これからReactを勉強したいWeb制作会社のコーダーの人などにおすすめしたい書籍です。

以下、書籍Webサイトです。