今年の3月ごろに、コーディングやフロントエンドの勉強をするための環境、いわゆるサンドボックス的なものを作りたいなと考えるようになりました。そこでWordpress的なものを使ってもよかったのですが、せっかくなのでJavaScriptフレームワークを用いたコンポーネントベースの静的サイトの構築を一からやりたいと思いました。あとはSNSにはちょっと書ききれない長い文章をしたためるためのブログを作りたかったというのもあります。
CMSとしては、このテックブログでも使用されているmicroCMSを、開発にあたってはフレームワークにはNext.jsを選択しました。Next.js + microCMSの開発は利用者も多く、
が決め手になりました。
そこで、初心者向けのNext.jsを用いたJAMstack開発を学ぶための教本を探した結果以下のテキストを購入しました。
https://book.dmm.com/product/4215082/k281aminb03316/?dmmref=shelf_Library&i3_ref=list&i3_ord=1
以下に販売サイトの商品紹介を引用します。
ステップバイステップでマスターする、Next.jsによる「これからの」Web制作
Reactベースのフレームワーク、Next.jsによるWeb構築の基本と実践を、ステップバイステップで学べる本。
本書は、これまでHTML&CSSを使ってきたものの、Reactにはちょっと手を出せなかった方を対象に、実際にブログを作成しながら、Next.jsを使ってサイトを構築できるようになることを目指しています。
Next.jsはReactの環境が簡単に整い、サイトも構築でき、静的生成やサーバーサイドレンダリングも試せます。学ぶ環境としても、経験を積む環境としても、そして実務のための環境としてもバランスよく整っているといえます。
Next.jsの基本的な機能が理解できることはもちろん、Reactの基本やReactでのCSSの扱いもしっかり解説しています。
基本的なHTML/CSSのコーディング経験や知識はあるものの、JavaScriptフレームワークを用いたコンポーネントベースの静的サイトの構築をしたことはない自分が、ReactとNext.jsを学びつつ実践できるという点がちょうどいいと感じました。
書籍:2022年7月30日初版第1刷発行・電子版ver1.00
OS:Windows11
エディター:VScode
本書と別冊に分かれていますが、開発に必要なエディターのプラグイン・拡張機能のインストールからNext.jsのプロジェクト作成などの基本的な環境構築について解説してくれていています。私のようにNext.jsをとりあえず始めてみたい、というレベルでも簡単にスタート地点に立てます。
基本的にはテキスト内のソースコードを模写し、自分で手を動かすことで構文などを身に着けながら各コードがどのような役割を担っているのか、どこをどう変えるとフロントにどのように変化するかを図も用いて解説してくれるため視覚的にもわかりやすいです。
書籍の内容どおりに進めつつ、ある程度の理解ができてきたタイミングでコンポーネントにカスタマイズを加え、勉強しつつ同時に独自のレイアウトのWEBサイトを完成させることができます。
商品紹介には【Reactにはちょっと手を出せなかった方を対象に】とありますが、実際には最初からある程度Reactの仕組みや構文に対して理解がある前提で書かれているような印象がありました。
また、近いうちに非推奨になる(といわれている)CSS modulesが用いられている点なども気になりました。必要に応じてcss-in-jsやTailwindCSSなどに切り替えていくなど臨機応変に対応していく能力が求められると思います。
この本に限らず、書籍による学習の弱みではありますが、
最終的な感想としては、ある程度自力で情報収集し問題解決に臨む力が求められると思いますが、環境構築からすぐに開発に取り組める点や本書のみで一つのNext.jsプロジェクトを完成させられる点などから、JavaScriptフレームワークを勉強する最初のとっかかりとしてはちょうどいいのではと感じました。