Ryusou Blog

※この記事を書いているのは9月末ですが、7月頃に出版した本の話をします。遅くなってしまい関係者の方すいません。

（突然ですが、自分語り）私とNext.jsとの出会いはおよそ数年前、Next.jsのv9が出た頃だと記憶しています。プログラミング初心者だった私はNext.jsのgetInitialPropsでmicroCMSのAPIを叩き、ブログを作ってプログラミングを学んでいました。

この数年でNext.jsのバージョンは14.xになり、さまざまな進化をとげました。 getStaticPropsでJamstackブログを作り、getServerSidePropsを使ってWebアプリケーションで簡単にSSRができるようになりました。ISR (Incremental Static Regeneration)といった差分ビルドのような仕組みも実装されていきました。Webサイト制作文脈だと、大規模なサイト・よりリッチで高品質なサイトが作られるようになっていきました。そしてApp RouterというアプリケーションのUXを更に高める機能が実装されました。

私はmicroCMSのエンジニアとして勤務をしていますが、こうして見てみるとmicroCMSのようなヘッドレスCMSの成長はこのようなフロントエンドのエコシステムの成長の上に成り立っていると感じます。

一方で、私が数年前にしていたプログラミングの勉強は今は可能なのか？ということを考えるようになりました。「素朴なNext.jsでシンプルなAPIを叩いてWebサイトを作る」そんな学習体験が今ではやりにくくなってしまっているのではないかと。

そんな中Next.jsのApp RouterでWebサイトを作るという初心者向けの書籍を共著で出版しました。

Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた

現在のNext.jsでのフロントエンドを学ぶ際には色々なことを学ぶ必要があります。App Router、React、React Server Component、TypeScript、CSS、コンポーネント、アクセシビリティ、レンダリング方法（SSG、SSR、ISR）.....etc。あげるとキリがありません。

この共著のお話をいただいた時、私はこれらのことを一旦すっ飛ばしてWebサイトを作るという経験をしてほしい。そんな本を書きたいと思いました。私が担当した3・4章はまさにそのような構成になっています。

前置きが長くなりましたが、この記事では、私がこの通称リス本を書いた時にこだわったポイントを紹介したいと思います。（3.4章以外の話はしないので全容が気になる方は書籍ページの目次などで確認ください。）

プログラミングはまずは動かす

Next.jsでApp Routerの初心者本を書くとなった時、「説明すること多すぎ....！？」と率直に思いました。

私の3.4章ではTypeScriptやReactのJSXの説明から行っていますが、とにかく説明を減らしました。とにかく実装→見た目が完成するスパンを短くするという工夫です。なので初心者の方でも「こうすればページがこのように表示されるのか」という体験が何度もできるようになっていると思います。

また編集の方のアドバイスで、本編のチュートリアルには影響がない補足情報はすべて「コラム」に切り出すことを意識しました。初心者の方でこの本に取り組む方は「コラム」は斜め読みしてください。そんな補足情報はあとで理解できれば良いのです。動かすことが大切です。

ただ説明を雑にしたわけでもありません。特に初出の用語はほぼすべて解説を加えるように心がけました。でも用語の理解よりも動かすことが大切です。でも納得して動かせるような構成になっていると思います。

また新たな学習をしたくなる

今回本をはじめて出版して感じたことは、ページ数足りないなということです。そしてページ数が増えてもわかりやすく良い本になるわけではないということです。初心者向けにわかりやすく説明したいとなると全部の事を説明をしたくなりますが、それは不可能です。なので私は読み終わった後に他の勉強がしたいなという気持ちになれる本を目指しました。

入門者向けの本ではありますが、TypeScriptやReactのドキュメントのリンクを多く貼りました。

また「コンポーネント」の話や「アクセシビリティ」など色んな話もしているので、なんでも良いので何か学びたくなるような内容があると嬉しいなと思います。

難しいことは後でよい

この書籍は冒頭でいったようにNext.jsのApp RouterでWebサイトを作るチュートリアルの本です。私が担当した3.4章ももちろんApp Routerで進んでいきます。ただはじめてApp Routerという用語が出てくるのは4章の最後（それも一瞬....！）だけです。

はっきりいってApp Routerは難しいです。正しく扱おうとすると、クライアントコンポーネント、サーバーコンポーネント、Node.jsのこと....などさまざまなことを知ることが必要です。ですがそんなのは後でよいのです。この3.4章ではApp Routerを意識せずにWebサイトを作れます。

私が担当した3.4章で自分でも好きなフレーズがあります。

「先頭のuse clientについては後ほど解説します。この段階ではJavaScriptを実行するためのおまじないだと思ってください」

「本書のようなサイトを作成する場合は完全に理解できなくても大丈夫です」

これらのフレーズは共著したメンバーからも良いと言われて嬉しかったです。私も好きなフレーズです。

でも最終的にはわりかしシンプルにわかりやすく解説してあると思うので安心してください。でもApp Routerのプロフェッショナルになりたいと思ったらこの本の次に他の書籍などで勉強してみてほしいです（私も実は完全に理解していない....！）。

本のリンクを再度。ぜひ買ってください！Webサイト制作をしたい方はもちろん、プログラミングに入門する人、プログラミング教育をする人に手をとってもらえたら嬉しいです。もし近くにプログラミング入門者の方がいればおすすめしてもらえると嬉しいです。

https://www.shoeisha.co.jp/book/detail/9784798183664

最後に、このような貴重な機会をいただいた翔泳社の方々、まったく進捗を出さない時期があったのに暖かくサポートいただいた編集の大嶋さん、そして共著したmicroCMSのメンバーの柴田さん、森茂さん、でぃーすけさんありがとうございました！

アマゾンのレビュー、Twitterのコメントたまに確認しちゃいます。コメントいただいた方ありがとうございます！

また機会があれば、本書いて見たいなと思います。