Ｎｅｘｔ．ｊｓ＋ヘッドレスＣＭＳではじめる！かんたんモダンＷｅｂサイト制作入門　高速で、安全で、運用しやすいサイトのつくりかた

柴田和祈／〔ほか〕著

発売日：2024年7月

ページ数: ２９３ｐ
ISBN: 978-4-7981-8366-4
著者情報: 柴田　和祈（シバタ　カズキ）
株式会社ｍｉｃｒｏＣＭＳ取締役ＣＸＯ。慶應義塾大学を卒業後、ヤフー株式会社にデザイナー入社。広告事業に約５年半従事し、フロントエンドエンジニアとしても経験を積む。２０１７年に株式会社ｍｉｃｒｏＣＭＳを共同創業し、現在は組織作りや事業戦略作りがメイン

森茂　洋（モリシゲ　ヒロシ）
株式会社ｍｉｃｒｏＣＭＳフロントエンドテックリード。制作会社、開発会社などＷｅｂ関連の業界で１５年ほど開発経験を積み、２０２２年１０月よりｍｉｃｒｏＣＭＳに参画。Ｗｅｂ黎明期からＷｏｒｄｐｒｅｓｓやＭｏｖａｂｌｅＴｙｐｅ、そしてヘッドレスＣＭＳに至るまで各種ＣＭＳを利用した多くの案件にも携わる

野崎　洋平（ノザキ　ヨウヘイ）
株式会社ｍｉｃｒｏＣＭＳエンジニア。元高校教員。教員時代にほぼ独学でプログラミングを学びエンジニアに転職、ｍｉｃｒｏＣＭＳに開発初期から参画した。その後ｍｉｃｒｏＣＭＳではリッチエディタなど様々な機能開発に携わる

千葉　大輔（チバ　ダイスケ）
株式会社ｍｉｃｒｏＣＭＳプロダクトエンジニア。新卒でＷｅｂ制作会社に入社し約３年ほどヘッドレスＣＭＳを用いた開発や開発環境の構築・運用などに携わる。その後、ｍｉｃｒｏＣＭＳに転職。Ｎｅｘｔ．ｊｓの画像最適化に関するＯＳＳも開発しており、現在は週間２，０００ダウンロードを超えるものとなっている

¥3,278 税込

14 nanacoポイント

ポイントについて

14 セブンマイル

マイルについて

セブン-イレブン受取り(送料無料)

発送目安

発売日（発売日以降は当日）～2日で発送

宅配（送料¥550税込）

発送目安

発売日（発売日以降は当日）～2日で発送

交通状況・天候の影響や注文が集中した場合等、お届けにお時間をいただく場合がございます。

発送目安について

商品説明

Ｗｅｂ制作者のレベルを一段高める、ＷｏｒｄＰｒｅｓｓに並ぶ新しい選択肢！本書は、人気のＷｅｂフレームワーク「Ｎｅｘｔ．ｊｓ」と、国産ヘッドレスＣＭＳ「ｍｉｃｒｏＣＭＳ」を用いた、モダンなＷｅｂサイトの制作手法をやさしく解説した入門書です。本書は架空のコーポレートサイトを題材に、表示画面をＮｅｘｔ．ｊｓで実装し、中身のコンテンツをｍｉｃｒｏＣＭＳで管理する一連のプロセスを、ハンズオン形式で体験学習できます。ｍｉｃｒｏＣＭＳの開発者陣自らが解説するため、制作現場で生かせる実践的なＴＩＰＳが満載です。

フレームワーク初心者でも迷わない！
Web制作者のレベルを一段高める、
WordPressに並ぶ新しい選択肢を身につけよう！

本書は、人気のWebフレームワーク「Next.js」と、国産ヘッドレスCMS「microCMS」を用いた、モダンなWebサイトの制作手法をやさしく解説した入門書です。

「記事コンテンツが管理しづらい」「見た目をメンテナンスしづらい」「パフォーマンスやセキュリティがいまいち」……これらの悩みを解消するWebサイト制作の新しいアプローチとして、現在注目を集めているのが「Webフレームワーク＋ヘッドレスCMS」の組み合わせです。ヘッドレスCMSは、Webサイト上のコンテンツの「提供」と「表示」を分離できる次世代型のCMSで、コンテンツの表示画面さえ用意すれば、Webサイトの運用や管理、カスタマイズがしやすくなるメリットがあります。

本書は架空のコーポレートサイトを題材に、表示画面をNext.jsで実装し、中身のコンテンツをmicroCMSで管理する一連のプロセスを、ハンズオン形式で体験学習できます。microCMSの開発者陣自らが解説するため、制作現場で生かせる実践的なTIPSが満載です。

【本書で学習できること】
・コンポーネントベースのトップページと下層ページの作成
・記事コンテンツのカテゴリ分け
・ページネーション機能、検索機能、プレビュー機能の作成
・キャッシュを活用したパフォーマンスの最適化
・BASIC認証によるセキュリティの向上
・Vercelによるサイトのデプロイと公開

ステップ・バイ・ステップの手順解説で、つまずきやすいポイントを丁寧にフォローしているため、Webフレームワークに触れた経験の少ない人でも迷わずに読み進められます。新しいサイト制作のアプローチを身につけたいWeb制作者はもちろん、ステップアップとしてWebフレームワークに触れてみたい人にもおすすめの1冊です。

■対象読者
・企業や商店のWebサイトを作っているWeb制作者
・HTML/CSSやWordPressの知識はあるが、Webフレームワークに触れたことがない人
・Next.jsの基本的な使い方を知りたい人

chapter1 Webサイト制作とコンテンツ管理の歴史を知ろう
1-1 Webサイト制作とコンテンツ管理のはじまり
1-2 WordPressの登場
1-2-1 さまざまなCMS
1-2-2 Webサイトが表示される仕組み
1-2-3 WordPressの仕組み
1-3 ヘッドレスCMSの登場
1-3-1 ヘッドレスCMSとは
1-3-2 ヘッドレスCMSの仕組み

chapter2 開発環境をセットアップしよう
2-1 開発環境の概要
2-2 Node.js環境をセットアップしよう
2-3 エディタをインストールしよう
2-3-1 Visual Studio Code（VSCode）とは
2-3-2 VSCodeをインストールしよう
2-4 Next.jsを使ってみよう
2-4-1 フロントエンドのフレームワーク
2-4-2 Next.jsのプロジェクトを立ち上げよう
2-5 Gitをインストールしよう
2-5-1 Gitとは
2-5-2 Gitのインストール
2-5-3 Gitを使ってみよう
2-5-4 GitHubを使ってみよう

chapter3 トップページを作ってみよう
3-1 ページを書き換えてみよう
3-1-1 Next.jsのディレクトリ構成を知ろう
3-1-2 JSXでマークアップする方法を知ろう
3-1-3 文章を書き換えよう
3-1-4 モダンなCSS記法（CSSmodules）で装飾をしよう
3-2 画像を扱ってみよう
3-2-1 画像ファイルの扱い方
3-2-2 next/imageで画像を最適化しよう
3-3 トップニュースのセクションを作ってみよう
3-3-1 データを表示させよう
3-3-2 コンポーネントを作ろう
3-4 ヘッダー・フッターを作ってみよう
3-4-1 ヘッダーコンポーネントを作ろう
3-4-2 フッターコンポーネントを作ろう

chapter4 下層ページを作ってみよう
4-1 ページを追加してみよう
4-1-1 ルーティングにつ　ほか

商品詳細

出版社名: 翔泳社
サイズ: ２６ｃｍ
対象年齢: 一般
フォーマット: 単行本

注意事項

本の帯に関して: 帯つきでの出荷はお約束しておりません。
商品ページに、帯のみに付与される特典物等の表記がある場合でも、確実に帯つきでの出荷はお約束しておりません。
また、帯は商品の一部ではなく「広告扱い」のため、帯の有無・破損による交換や返品は承っておりません。
版・表紙について: 版・表紙（カバー）のご指定は承っておりません。ご注文いただくタイミングによっては、お届けする商品の版や表紙が商品ページ上のものとは異なる場合がございます。
また、初版にのみにお付けしている特典（初回特典、初回仕様特典）がある商品は、商品ページに特典の表記がされている場合でも、無くなり次第終了となります。