「Next.js+ヘッドレスCMSではじめる!かんたんモダンWebサイト制作入門」を執筆しました
![](https://images.microcms-assets.io/assets/cbc34950a7184041b460cbea34f5426e/0506669b7445498fafb2ddb3c68fcd10/nextjs-microcms-book-ogp.jpg)
microCMS社のメンバー4人で書籍の執筆を行いました!
Next.jsとmicroCMSを使ってモダンWeb制作を習得できる1冊となっています。
書籍内容
本書は架空のコーポレートサイトを題材に、表示画面をNext.jsで実装し、中身のコンテンツをmicroCMSで管理する一連のプロセスを、ハンズオン形式で体験学習できます。microCMSの開発者陣自らが解説するため、制作現場で生かせる実践的なTIPSが満載です。
本書で学習できること
- コンポーネントベースのトップページと下層ページの作成
- 記事コンテンツのカテゴリ分け
- ページネーション機能、検索機能、プレビュー機能の作成
- キャッシュを活用したパフォーマンスの最適化
- BASIC認証によるセキュリティの向上
- Vercelによるサイトのデプロイと公開
書籍執筆に取り組んだ背景
ざっと以下のようなことを考えていました。
- 書籍執筆はメンバーにとってもエンジニアとしての大きな経歴になる
- 開発者本人がmicroCMSを活用した書籍を出版するのは信頼性が高い
- 書籍という新しいチャネルで、ヘッドレスCMSによるWeb制作をより広めたい
期間、スケジュール
Slackを辿ってみたところ、なんと去年の5月から内容の検討を始めていました。
全体感はこんな感じでした。
期間 | 内容 |
---|---|
2023/05 - 06 | 企画内容の検討 |
2023/07 | チュートリアル内容の策定 |
2023/08-2024/02 | 執筆 |
2024/02 | 外部レビュー開始 |
2024/03 | ブラッシュアップ、脱稿 |
2024/04 | 初校校正 |
2024/05 | 再校校正 |
2024/06 | 三校校正、入稿 |
2024/07 | 刊行 |
去年の秋あたりは若干ダレてしまっていましたが、年末くらいから徐々に本気を出せたかなと思います。
結果的に当初の計画から大きくズレることなく刊行までいけました。(拍手👏)
合宿
去年の秋あたりのやる気のなさを払拭するために4人で箱根に合宿に行ったりもしました。
![](https://images.microcms-assets.io/assets/cbc34950a7184041b460cbea34f5426e/d633de21bad745ba97e439dd35b4472e/IMG_7568.jpg)
ちなみに宿泊した「ホテルおかだ」は温泉も食事も豪華で最高でした。
結局、たぶん計4-5時間くらいしか執筆できていませんでしたが、まぁヨシッ。
大変だった点
振り返ってみると、かれこれ1年以上やっていたわけですが、大変だった点を挙げていきます。
ソースコードの一貫性の維持
4人で章ごとに担当を分けて作業をしていました。
また、書籍としてはコーポレートサイトを一から作っていくチュートリアル形式となっているため、すべての章の内容が繋がっています。
そのため、どこか一箇所でもソースコードを変更すると、そこ以降のソースコード掲載箇所をすべて修正する必要があります。
ソースコードに間違いがないか、何度も何度も最初から書籍通りにチュートリアルをこなして確かめる必要がありました。
これが一番しんどかった・・・
とにかく分かりやすい解説
普段当たり前のように使っている単語を、ひとつひとつ丁寧に解説しました。
リクエスト、レスポンス、フロントエンド、バックエンド、API、スキーマ、クエリ、JSON、オブジェクト、バリデーションなど。
そうか、そもそもリクエストやレスポンスってこの業界でしか分からないか・・・というような気付きがありました。
この単語は一般的か?というのを全て疑ってかかることで、結果として分かりやすい書籍になったと思います。
推しポイント
ここからは本書のおすすめポイントを紹介していきます。
幅広い知識が得られる
本書はコーポレートを一から作成していくチュートリアル形式ですが、その中で学ぶべき内容を段階的に習得していけるようになっています。
コンポーネントの作成やCSS Modulesの扱い方、Next.jsのルーティング、microCMSのAPI、キャッシュの扱い方、Basic認証の設定、フォームの扱い方など。
普段はWordPressを使ってWeb制作を行なっていて、Next.jsやAstroを使った制作はやったことがないという方にとって、満足できる内容になっていると思います。
分かりやすく、丁寧な解説
「大変だった点」の中でも書きましたが、用語まわりは初出のタイミングでしっかり解説するよう心掛けました。
また、難しい概念のところは例え話を導入したり。
![](https://images.microcms-assets.io/assets/cbc34950a7184041b460cbea34f5426e/bb70ea0a8d264132ae062b5d41fa8f4c/nextjs-microcms-book-cache.png)
![](https://images.microcms-assets.io/assets/cbc34950a7184041b460cbea34f5426e/121262080520440e9a6d59bcbb841694/nextjs-microcms-book-webhook.png)
microCMSの開発者本人が執筆している
本家なので当然、microCMSのことを知り尽くしています。
こうするのが正解!というのをお伝えできます。
謝辞
今回の執筆は翔泳社の大嶋さんにX(旧Twitter)のDMでお声がけいただいたのがきっかけでした。
大嶋さんには非常にお世話になりました。ありがとうございました!
そして書籍の事前レビューをしてくださった、谷口さん、島袋さん、濵田さん、西田さん、石原さん、福島さん、水上さん。改めて感謝申し上げます。
おわりに
本当は日本中のWeb制作会社を渡り歩いて、一冊一冊置いていきたい思いです。
新人教育などにも使えると思いますので、オフィスに一冊いかがでしょうか。
興味を持っていただいた方がおりましたら是非読んでみてください。
レビューもお待ちしております!
![](https://images.microcms-assets.io/assets/cbc34950a7184041b460cbea34f5426e/038bab4c2804401d8748567ddbed9b9c/shibe97_mechanic.png)