3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【書評】作って学ぶ Next.js/React Webサイト構築

Last updated at Posted at 2023-08-01

概要

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

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

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

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

対象となる読者

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

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

この本の方針(?)

  1. JavaScriptを学ぶ
  2. Reactを学ぶ
  3. 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サイトです。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?