『作って学ぶ Next.js/React Webサイト構築』とReactの必要性を感じるようになってきたことについて

Reactの必要性を多方面から感じるようになってきたWeb制作の現場

HTML & CSSに軸足を置きつつやってきましたが、そろそろ、HTML & CSS に加えて React の知識が求められるようになってきたのを感じます。

仕事などのコミュニケーションを効率よく進めるためにはもちろんですが、これから登場してくるCSSを理解するために必要になってくると、そろそろ見えないことにしておくのも厳しくなってきました。

たとえば、CSS Scope（CSSスコープ）はReactの世界であれば当然の機能ですから、その扱い方に関してはすでに多くの知見があります。

CSS Container Queries（コンテナクエリ）は不足していた要素を補いつつ策定が進んでいますが、素のHTML & CSS以上に「コンポーネント」という概念を持つReactとの相性が良いのは明らかです。

さらに、CSS Cascade Layer @layer（カスケードレイヤー）にいたっては、こんな感じで使われることを想定した機能です。

これらのCSSを素のHTML & CSS環境だけで理解しようとすると、その必要性がピンときません。正直なところ、解説のための具体的なサンプルを考えるのも頭がいたいです。

また、「２カラムレイアウト と これからのHTML&CSS」の中でも触れましたが、素のHTML & CSS（pure HTML & CSS）で直接書かれたページを見ることがどんどん少なくなってきている現状では、そうしたコードを読みこなすためにもReactの知識が必要です。

デザインツールのFigmaなどを見ても、Reactといった環境を意識した構成になっており、機能を理解する上でReactの知識があった方が効率が良くなっています。

そして、Web制作という環境でも存在感を増してきたNext.js。そろそろ無視できない存在になってきましたが、これもReactベースのフレームワークです。

Webデザインや、HTML & CSSのコーディングを行う上でも、Reactの知識が求められる状況になってきました。

Web制作者がわかりやすくReactを学習するには？

そこで、Reactの学習を始めるわけですが、Web制作でJavaScriptを扱ってきた人の方が苦戦するようで…。

理由を聞いてみると、

「Reactの必要性がピンと来ない」
「知っているJavaScriptと違う」
「JavaScriptの中でHTML&CSSを扱うReactのスタイルに馴染めない」
「『ユーザインターフェース構築のための JavaScript ライブラリ』なら『jQuery』でいいじゃないか」

と…。

（あ… 言いたいことはわかるけど、そうじゃない）

JavaScriptに馴染みがなかった自分はそれほど苦戦しなかったことを考えると、どうやら、HTML & CSS（DOM）を操作することを主な目的としたブラウザ上でのJavaScriptの経験が邪魔になるようです。そこで、

「ブラウザー以外の、もっと様々な形でJavaScriptを活用できる環境で経験を積んでみたらどうか？」
「何をするのがいいだろう？　できれば、Web制作と関係するもののほうがいいのだけど」

と、検討した結果がNext.jsだったりします。

Reactを学ぶためのJavaScriptの学習＆経験のために、ReactベースのフレームワークであるNext.jsを選ぶ。おかしな話をしている自覚はあります。しかし、

• Reactの環境が簡単に整う
• サイトが簡単に構築できる環境が整う
• SG（静的生成）やSSR（サーバーサイドレンダリング）を手軽に試せる
• APIを手軽に用意できる

といったNext.jsのメリットを考えると、学ぶ環境としても、経験を積む環境としても、そして実務のための環境としてもバランスが整っているこの環境を避ける必要もないのではないかと。

ならば、わざわざ回り道をせずにNext.jsを目指してしまって、結果として、JavaScriptやReactも理解できていればいいのでは？（Reactが楽しくなってきたあたりで、JavaScriptをガッツリと勉強し直したくなりますし…）

と、書き始めたのが今回の本『作って学ぶ Next.js/React Webサイト構築』です。

この本で学べること

『作って学ぶ Next.js/React Webサイト構築』では、HTML & CSSにJavaScriptも使ってきたものの、Reactにはちょっと手を出しきれなかった方が、Next.jsを使ってサイトを構築できるようになることを目指しています。

デザインを含めてブログを実際に作成しながら、Next.jsの基本的な機能が理解できることはもちろん、Reactの基本も実際のサイト構築を通して見えてくるように構成しています。

デザインをコントロールするCSSに関しては、Reactのスタイリングの方法と、そこで適用するCSSという2つの面から解説しています。

スタイリングの方法としては、Next.jsがビルトインでサポートしているCSS Modulesをベースに、styled-jsxも活用します。

適用するCSSは、ブラウザがベージを描画し直すことを前提としてきたこれまでのCSSとの違い、スコープを意識したCSSの扱い、JavaScriptの中でのCSSの扱い、React環境で使われているCSSのテクニックなどを、具体的に解説しています。

---

Next.jsが使えるところまでたどり着ければ、そこから先の選択肢は一気に広がります。この本をそこまでのガイドブックとして使っていただければ幸いです。