翔泳社の公式通販SEshopは全国送料無料!
ヘルプ 法人のお客様へ 新規会員登録 ログイン
SEshop

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

柴田 和祈 (著) , 森茂 洋(著) , 野崎 洋平(著) , 千葉 大輔(著)

商品番号
183660
販売状態
発売中
納品形態
宅配便にてお届け
発売日
2024年07月08日
出荷開始日
2024年07月05日
ISBN
9784798183664
判型
B5
ページ数
312
キーワード
HTML  デザイン  CSS  Web制作

3,278円(税込)(本体2,980円+税10%)
送料無料

298pt (10%)
ポイントの使い方はこちら

在庫あり

初回購入から使えるポイント500円分プレゼント

電子書籍はこちら 紙書籍とPDF版のセット商品はこちら

※1点の税込金額となります。 複数の商品をご購入いただいた場合のお支払金額は、 単品の税込金額の合計額とは異なる場合がございますので、予めご了承ください。

  • ポスト

フレームワーク初心者でも迷わない!
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の基本的な使い方を知りたい人

01
02

コーポレートサイトの各ページの制作を通じて、次のような内容を学ぶことができます。

01

トップページ

トップページにて、Next.js/Reactにおけるコンポーネントの作り方や、見た目の制御方法を学びます。

02

メンバーページ

メンバーページでは、表示するメンバー情報をmicroCMSで管理します。Next.jsからmicroCMSに格納されている情報を取得することで、API通信について学びます。

03

ニュースページ

ニュースの詳細ページでは、アクセスするURLによって動的に表示内容を切り替えるためのダイナミックルーティングについて学びます。 ニュースの一覧ページでは、カテゴリー分け、ページネーション、画面プレビュー、検索機能を実装していきます。その際に、microCMSのAPIをより高度に活用する方法を学びます。

04

お問い合わせページ

お問い合わせページでは、ユーザーからのお問い合わせをHubSpotというサービスを用いて管理します。お問い合わせフォームからデータをHubSpotに送信する処理では、Next.jsのServer Actionsという機能を活用します。

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 ルーティングについて学ぼう
4-1-2 Next.jsでルーティングをしよう
4-2 ページ遷移をさせてみよう
4-2-1 リンクを追加しよう
4-2-2 Next.jsの機能でリンク遷移をしよう
4-2-3 Not Foundページを作ろう
4-2-4 導線を整えよう
4-3 メンバーページを作ってみよう
4-3-1 メンバー一覧を表示しよう
4-3-2 レイアウトを整えよう
4-3-3 コンポーネントを共通化しよう
4-3-4 コンポーネントを作成するポイント
4-4 ハンバーガーメニューを作ってみよう
4-4-1 Menuコンポーネントを作ろう
4-4-2 Webサイトに動きをつけよう
4-4-3 useStateでWebサイトに動きをつけよう
4-4-4 Next.jsの内部的な仕組みについて知ろう

chapter5 ヘッドレスCMSでコンテンツ管理してみよう
5-1 microCMSとは
5-2 microCMSをセットアップしよう
5-2-1 アカウントを登録しよう
5-2-2 サービスを作ろう
5-2-3 APIを作ろう
5-2-4 コンテンツを作ろう
5-2-5 APIを呼び出せるようにしよう
5-3 メンバーページにmicroCMSを組み込んでみよう
5-3-1 事前準備をしよう
5-3-2 ソースコードを書き換えよう
5-3-3 コンテンツ数の取得上限を調整しよう
5-4 トップページのニュースにmicroCMS を組み込んでみよう
5-4-1 コンテンツを用意しよう
5-4-2 データ取得の準備をしよう
5-4-3 ソースコードを書き換えよう

chapter6 ニュースページを作ってみよう~基礎的なコンテンツの扱い方~
6-1 ニュースの一覧ページを作ってみよう
6-1-1 ニュースページのレイアウトを作ろう
6-1-2 microCMSからニュースコンテンツを取得・表示しよう
6-2 ニュースの詳細ページを作ってみよう
6-2-1 Next.jsでダイナミックルーティングを実装しよう
6-2-2 Not Foundページに移動させよう

chapter7 ニュースページを作ってみよう~応用的なコンテンツの扱い方~
7-1 カテゴリー分けしてみよう
7-1-1 カテゴリーリンクを作ろう
7-1-2 カテゴリーページを作ろう
7-1-3 不正な値が入力されたときの処理
7-1-4 どのカテゴリーの一覧ページかわかるようにしよう
7-2 ページネーション機能をつけてみよう
7-2-1 ページ番号ごとのページを作ろう
7-2-2 不正な値が入力されたときの処理
7-2-3 ページリンクのコンポーネントを作ろう
7-2-4 現在のページ番号がわかるようにしよう
7-2-5 カテゴリーページにページネーション機能を実装しよう
7-3 プレビュー機能をつけてみよう
7-3-1 microCMSの画面プレビュー機能の流れ
7-3-2 microCMS側の設定をしよう
7-3-3 プレビューページを作ろう
7-3-4 画面プレビューの動作を確認しよう
7-4 検索機能をつけてみよう
7-4-1 検索フィールドのコンポーネントを作ろう
7-4-2 検索機能を実装しよう
7-4-3 検索結果ページを作ろう
7-4-4 検索体験を改善しよう
7-4-5 useSearchParamsを使用したときの注意点

chapter8 キャッシュを活用してサイトのパフォーマンスを高めよう
8-1 Vercelにデプロイしよう
8-1-1 Vercelにアカウント登録しよう
8-1-2 プロジェクトを作ろう
8-2 キャッシュについて学ぼう
8-2-1 キャッシュとは
8-2-2 キャッシュの種類
8-3 さまざまなレンダリング方式について学ぼう
8-3-1 SSR(Server Side Rendering)
8-3-2 SSG(Static Site Generation)
8-3-3 CSR(Client Side Rendering)
8-3-4 ISR(Incremental Static Regeneration)
8-4 Next.jsにおけるキャッシュの制御を学ぼう
8-4-1 Webhookを活用してSSG形式のページを更新しよう
8-4-2 SSRを用いてニュースを即時更新しよう
8-4-3 ISRを用いてキャッシュの最適化をしよう
8-5 HTTPリクエスト単位のキャッシュを設定してみよう
8-5-1 画面プレビューのURLを変更しよう
8-5-2 データ単位のキャッシュの仕組み
8-5-3 その他のページの設定をしよう
8-6 Basic認証を設定してみよう
8-6-1 Middlewareとは
8-6-2 Middlewareの設定方法
8-6-3 Basic認証とは
8-6-4 Next.jsでBasic認証を設定しよう

chapter9 お問い合わせページを作ってみよう
9-1 お問い合わせページを作ってみよう
9-1-1 HubSpotについて知ろう
9-1-2 Next.jsとServer Actions
9-1-3 お問い合わせフォームにおけるデータの流れ
9-1-4 お問い合わせフォームを作ろう
9-1-5 バリデーションと投稿機能を追加しよう
9-2 HubSpotと連携しよう
9-2-1 HubSpotを準備しよう
9-2-2 HubSpotアカウントをセットアップしよう
9-2-3 フォームを作ろう
9-2-4 HubSpotへデータを送ってみよう

chapter10 もっと便利に! 現場で役立つ実践テクニック
10-1 メタデータを設定しよう
10-1-1 layout.tsxやpage.tsxに設定を記述しよう
10-1-2 特定のファイルをappディレクトリに配置しよう
10-2 サイトマップを用意しよう
10-2-1 サイトマップとは?
10-3 アナリティクスの設定をしよう
10-3-1 サードパーティスクリプトの読み込み
10-3-2 Google Analyticsでの使用方法
10-3-3 Google Tag Managerでの使用方法
10-4 Core Web Vitalsの対策をしよう
10-4-1 Core Web Vitalsの三大指標
10-4-2 Lighthouseを使用して計測しよう
10-4-3 優先的に読み込む画像を設定しよう
10-4-4 レスポンシブ画像を実装しよう

各種問い合わせは以下のリンクからご連絡ください

関連商品

おすすめ特集

ロングセラーコンピュータ書

ITエンジニアにぜひ読んでいただきたい、翔泳社のロングセラーコンピュータ書を厳選

ITインフラ関連本特集

ネットワーク/サーバー/セキュリティを学ぶなら読んでおきたいおすすめの書籍

生成AI特集

テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介

Web制作関連本特集

HTML/CSS、JavaScript、UI/UX、デザインまで。Web制作・フロントエンド開発に役立つ本

マーケティングおすすめ本

マーケティングの勉強におすすめの本。基本から実務に役立つ戦略設計まで

介護職におすすめの本

介護職を目指す人の試験対策書、現場スタッフのための実務書など、介護職に役立つ本

特集をもっと見る