国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
Post on:2024年7月12日
sponsors
※本ページは、アフィリエイト広告を利用しています。
国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。
当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。
著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。
WordPressは使ったことがあるけどヘッドレスCMSは初めて、Next.jsの基本的な使い方から学びたい、そんな人に特にお勧めします。
本書は今週発売されたばかり、Kindle版も同時発売！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は10章構成で、Next.jsの使い方からmicroCMSによるコーポーレートサイトの実装まで、しっかり学べます。第1, 2章は基礎知識と開発環境のセットアップです。Node.jsのインストール、Next.jsのインストールなど本書通りに進めれば問題なく準備が完了します。
ヘッドレスCMSとは、WordPressのようにコンテンツを配信するコンテンツマネジメントシステム（CMS）で、WordPressとの違いはコンテンツ管理画面とページ生成ロジックが切り離されていることです。WordPressではWordPress自体のルールやPHPという縛りがありますが、ヘッドレスCMSでは見た目の部分は自由に選択できます。本書ではNext.jsを採用して実装します。
Next.jsなどのフレームワークで主流となっているモダンなCSS記法（CSSmodules）は、CSSを書ける人ならすぐにマスターできると思います。
架空のコーポーレートサイトにはトップページ、メンバー、ニュース、お問い合わせなどがあり、それらを実装しながらmicroCMSとNext.jsによるモダンWebサイトの制作について学びます。素材やコードなどは、サポートサイトからすべてダウンロードできます。
実装はヘッダやフッタはもちろん、ヒーローやハンバーガーメニューなどよく使用されているコンポーネントの実装方法がていねいに解説されています。ワンポイントとなるコラムも充実しており、なぜここをdivで囲むのかなど実装に役立つテクニックも学べます。
第3,4章でガワを実装したので、第5章はコンテンツを管理するヘッドレスCMSを実装します。
microCMSのアカウントの登録方法をはじめ、APIの使い方、実装したページにmicroCMSを組み込む方法までコードを見ながら実際の手順がていねいに詳しく解説されています。
第6,7章はmicroCMSによるコンテンツの扱い方。まずは、ニュースの一覧ページや詳細ページを例にして基本的な実装方法を学び、ページネーションがあるページや検索機能などを実装します。
ヘッドレスCMSの大きな利点の一つが、パフォーマンスの最適化を可能にするフレームワーク（Next.js）を使用できることです。パフォーマンスとして優れているだけでなく、より堅牢なサイトも効率的に構築できるようになります。
第9章ではお問い合わせページを実装します。このページはこれまでのデータを取得して表示するものとは異なり、ユーザーが入力したデータをNext.jsで送信する仕組みを学びます。
最後の第10章はサイトのパフォーマンスの最適化、サードパーティのスクリプトの利用方法、SEO施策など、実際のWebサイトに役立つテクニックが詳しく解説されています。
モダンWebサイト制作入門の目次
モダンWebサイト制作入門の目次
モダンWebサイト制作入門の目次
モダンWebサイト制作入門の目次
モダンWebサイト制作入門の目次
WordPressだと見た目のメンテナンスがやりづらい、WordPress固有のルールに縛られすぎる、コンテンツを管理しにくい、そういった問題を解決するためのアプローチして注目されているのが、ヘッドレスCMSです。コンテンツの管理と見た目を分離することができ、運用やカスタマイズも自分のやりたい方法でできます。
献本の御礼
最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
