目次

まえがき

対象読者
本書の扱っている内容
検証環境について
サンプルコード・正誤表
お問い合わせ
免責事項

第1章 React開発入門

1.1 Reactとは
1.2 本章で開発するもの
1.3 環境構築
1.4 テンプレートの確認と編集
1.5 マークアップ
1.6 ビルド
1.7 デプロイ
1.8 React製サイトの問題点
1.9 解決へのアプローチ

第2章 Gatsby入門

2.1 Gatsbyとは
2.2 本章で開発するもの
2.3 環境構築
2.4 ディレクトリ構成の説明
2.5 はじめてのページ編集
2.6 Gatsbyのルーティング
2.7 データを扱う
2.8 プラグインによるデータの追加
2.9 ファイルシステムを使ったデータ利用
2.10 メタタグへの対応
2.11 ビルドとデプロイ
2.12 各ページの実装
2.13 表示条件とフォーマットの調整

第3章 Headless CMSを用いたウェブサイト制作

3.1 Headless CMSとは
3.2 本章で開発するもの
3.3 事前準備
3.4 データの設計と準備
3.5 サンプルコード
3.6 microCMSコンテンツの読み込み
3.7 トップページの実装
3.8 記事詳細ページの実装
3.9 カテゴリ詳細ページの実装
3.10 デプロイ
3.11 (発展)プレビュー画面の作成
3.12 (発展)ページネーションの実装

第4章 ステップアップ

4.1 公式情報の活用方法
4.2 Gatsby Cloudについて
4.3 (発展) TypeScript対応
4.4 ソースデータの追加
4.5 プラグインの作成
4.6 Next.jsについて

あとがき

謝辞

まえがき

 Reactの登場によって、フロントエンドの作り方は大きく変化しました。

 その変化から長い時間が経ち、主にクライアントでのアプリケーション構築に使われていたReactは、ウェブサイト開発にまで使われることが増えてきました。その要因は、SSR(サーバーサイドレンダリング)の登場やプリレンダリング手法の確立、開発体験の向上によるものです。また、昔は作って終わりだったウェブサイトも、分析や改善が当たり前になり、修正・運用のしやすさも求められるようになりました。そのため、従来はWordPressが採用されていたサイトであっても、フロントエンドはReactといった技術で構築する場面が増えています。

 そうした場面で使われるのが、本書で扱うGatsbyです。Reactでウェブサイトを構築する際に、必要なものを用意してくれるフレームワークです。

 しかし、Gatsbyに限らず、Reactでウェブサイトを構築する際にネックとなるのが、Reactの知識です。これは、本来はアプリケーションを書くための技術です。そのため、多くのチュートリアルにはウェブサイト構築には本来必要ない、アプリケーションの状態管理やフォーム周りのインタラクションなども含まれています。こういったチュートリアルで、Reactに苦手意識を持ってしまった方もいるのではないでしょうか?

 アプリケーションのためのReactではなく、ウェブサイトを構成する技術としてのReact。Reactでサイトを公開するフレームワークのGatsbyに、シンプルに入門できる手段があればいいのに。

 現実としてマークアップ寄りの仕事が増えている中で、そういった道が少ないという課題感から本書は生まれました。この本を通してReactへの親近感を持ち、Gatsbyでのサイト制作が素晴らしいものだと伝えられれば幸いです。

2021年3月

竹本 雄貴

対象読者

 本書では、次のような方を対象読者として執筆しています。

 ・Git/GitHubを使ったことがある人。

 ・HTML/CSS/JavaScriptを触ったことがある人。

 ・Reactに入門したい人。 

 Gitを扱ったことがない方は、湊川あいさんの「わかばちゃんと学ぶ Git使い方入門」を読むと、親しみやすくてよいと思います。

 また、JavaScriptに不安を感じる方は、「JavaScriptの入門書1」の第一部(基本文法)を読みながら進めるといいでしょう。近年のJavaScriptがわからないという方にも、ピッタリな内容です。本書にはそれほど難しいコードが出てくるわけではないので、今からJavaScriptを学ぶ方でも問題ありません。

本書の扱っている内容

 上記を前提に、次のような内容を取り上げます。

 ・個人サイト制作を通したReactへの入門

 ・個人サイト制作を通したGatsbyへの入門

 ・Headless CMS利用したブログの制作

 本書では、第1章ではReactの基礎的な部分を押さえながら、ポートフォリオサイトをつくっていきます。

 第2章ではGatsbyの導入を行いつつ、1章で作ったサイトを再現します。

 第3章では記事データをHeadless CMS(ビューを提供しないCMS)に保存し、そのデータをもとにGatsby製のブログを立ち上げていきます。

 第4章は、中級者向けにGatsbyをより使いこなすためのテクニックとして、公式情報の活用方法やプラグインの作成方法などを紹介します。

検証環境について

 本書では、次の環境で動作確認を行っています。Windows 10を利用する方は、WSL2(Windows Subsystem for Linux)で開発することを前提としています。

 ・Node.js v14.15

 ・Create React App v4.0

 ・Gatsby v3.0

サンプルコード・正誤表

 本書のサンプルコード・正誤表は、GitHubにホスティングしています。

 https://github.com/mottox2/react-gatsby-book

お問い合わせ

 本書の内容に関しては検証・確認・校正等を行っていますが、誤字や脱字、不正確な点や意図の伝わりにくい表現等が目につくことがあるかもしれません。そういった場合はご連絡をいただけると嬉しいです。

 問い合わせはhttps://twitter.com/mottox2またはy.mottox2@gmail.comまでお願いします。

免責事項

 ・本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

 ・会社名、商品名については、一般に各社の登録商標です。TM表記等については記載しておりません。また、特定の会社、製品、案件について、不当に貶める意図はありません。

1. https://jsprimer.net/

第1章 React開発入門

 本書で取り扱うGatsby(ギャツビーまたはギャッツビー)は、React(リアクト)をベースにしたサイト生成フレームワークです。したがって、ある程度Reactについて知っておく必要があります。

 「Reactは難しい」「SPAをやったことはない」という方もいるかもしれませんが、Gatsbyを使う上で必要な知識は、管理画面や複雑な画面を作るときほど多くないので、安心してください。むしろ、覚えることが少ないので、GatsbyはReact入門の際にピッタリです。

 本章ではReactの概要について説明したあと、題材としてブログを取り上げ、ReactでマークアップしながらReactの書き方に慣れていきます。すでにReactに慣れている方は、読み飛ばして2章から読み進めても大丈夫です。

1.1 Reactとは

 Reactは、Facebookが開発しているUIを構築するためのライブラリです。

 UIを構築する際にコンポーネントという概念を持っており、内部の状態と親コンポーネントから渡される値が決まれば、コンポーネントの描写が可能です。そういったコンポーネントを組み合わせることで、アプリケーションを構築します。

 内部の状態が変更されたときに、効率的にDOMを書き換えてくれる点が画期的で、SPA(Single Page Application)の開発が盛んになりました。

 本章では実際にサイトを作りながらReactの学習を行いますが、より詳しく知りたい方は公式サイトをご覧ください。チュートリアルを含めて日本語化されており、本書とあわせて学習を進めていくとよいでしょう。

React

https://ja.reactjs.org/

 Reactでの開発が盛んになっていくにつれて、開発手法の変化もありました。

 コンポーネント単位で実装を行っていく手法、CSS ModulesやCSS in JSによるスコープ付きのCSSの登場、ファイルを更新すると短い時間でブラウザに反映するFast refreshなど、多くの変化がありました。

 React単体では、本章の最後で言及するような理由から、ウェブサイト開発に利用するには課題がありました。ですが、GatsbyやNext.jsといったフレームワークによって、普通のウェブサイトにも使われるようになりました。

1.2 本章で開発するもの

 本書では、Gatsbyを使ったウェブサイト制作を取り扱っています。最終的にはGatsbyで作られたブログを作ることになりますが、本章ではReactに慣れ親しむという目的で、ポートフォリオサイト1を想定したウェブサイトの1ページのマークアップを行います。

図1.1: 本章のゴール

 マークアップの流れの中でコンポーネントの概念、コンポーネントの分け方、スタイルの当て方、ライブラリの導入方法等を説明します。

 本章での成果物は、サンプルコードの01-reactに設置しています。実際に挙動を確認したい場合は、ローカルに持ってきてから、次のコマンドを実行してください。

git clone https://github.com/mottox2/react-gatsby-book.git

cd react-gatsby-book

cd 01-react

npm install

npm run start

  

Visual Studio Codeの利用がオススメ

 ソフトウェアエンジニアの方であれば、エディタに関してこだわりがあると思います。ただ、Reactを書くにあたっては、Microsoftの『Visual Studio Code』(以下VSCode)かJetbrainsの『WebStorm』を使うと、簡単に始められます。ただし、Webstormに関しては有料なので、すでにJetbrains社のライセンスを持っている等の事情がなければ、VSCodeの利用がオススメです。

 これらのエディタでは、最初からReactのコードハイライトや補完に対応しているので、セットアップに時間を取られません。開発者によるプラグインが多く提供されているので、便利に開発を進めることができます。

1.3 環境構築

 本章では、Reactの開発元であるFacebookが提供しているcreate-react-appというツールを使って、Reactの開発を行っていきます。2

 create-react-appは、ゼロからやると大変な開発環境のセットアップや、本番環境用の最適化まで含めた環境を構築するためのツールです。Reactでシングルページアプリケーションを作る際に、もっとも使われます。

 まえがきに記載したNode.jsの環境が整っていることを前提に、話を進めます。プロジェクトフォルダを置くディレクトリに移動していることを確認してから、次のコマンドを実行してください。

npx create-react-app my-app --template @mottox2/starter

 しばらく待つと、my-appというディレクトリができます。このディレクトリをVSCodeで開きましょう。以降の操作は、VSCode内のターミナルで操作するのがオススメです。

 ターミナルで下記のコマンドを実行し、開発環境を立ち上げましょう。3

npm run start

 正しい操作ができていると、次のような文字がターミナルに表示されます。

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.11.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

 ブラウザでhttp://localhost:3000を開いてみましょう。次のような画面が表示されるはずです。

図1.2: 初期状態

 Reactの開発を行う準備は整いました。次は生成されたファイルを眺めてみましょう。

まっさらな状態からプロジェクトを始めたい方は

 今回は学習用途なので、create-react-appが標準で生成するファイルから、いくつか減らしたものを使っています。それらのものを含めたテンプレートで、Reactアプリケーションを開発したい場合は、次のコマンドを実行してください。

npx create-react-app my-app

# TypeScriptを使いたい場合

npx create-react-app my-app --template typescript

1.4 テンプレートの確認と編集

 作成されたファイルを説明します。

作成されたファイル

node_modules/
public/
  index.html
src/
  App.js
  App.module.css
  index.css
  index.js
package.json
package-lock.json
README.md

 README.mdは、人間向きに書かれたプロジェクトの情報を記述するファイルです。ReactやNode.jsに限らず、多くのプロジェクトに存在していて、インストール方法やドキュメント的なことが書かれます。今回は個人の開発用途なので、利用しません。

 次に、Node.jsで使われるファイル群です。package.jsonは、プロジェクトの情報や利用するライブラリの情報が書かれたファイルです。利用するライブラリの依存関係をpackage-lock.jsonで管理しています。これらのライブラリは、node_modulesディレクトリの中に保存されています。

 public/index.htmlは、アプリケーションの表示に使うHTMLです。

 大切なのはsrcディレクトリです。ひとつひとつ確認していきましょう。

 src/App.jsは、いわゆるReactコンポーネントを記述したファイルです。App関数の返り値はHTMLのような記法になっており、この記法をJSXと呼びます。Reactでは、JSXを返す関数を組み合わせて、ビューを構築します。

 JSXの記法に関しては、後ほど解説します。

src/App.js

import * as styles from "./App.module.css";
const App = () => {
  return (
    <div className={styles.container}>
      <p className={styles.message}>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
};
export default App;

 src/index.jsは、プログラムの入り口となるファイルです。

 Reactのコンポーネントを定義するだけでは、ページへの表示は行えません。ReactとDOMの世界を結びつけてくれるのが、react-domというライブラリです。react-domの提供するrenderメソッドには、第1引数にReactコンポーネント、第2引数にHTML上のDOM要素を指定します。この場合はrootというidを持った要素に対して、さきほどのAppコンポーネントを描写する指定を行っています。このメソッドが、HTML上の要素とReactコンポーネントを結びつけてくれます。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

 index.cssは普通のCSSファイルですが、App.module.cssはAppコンポーネントで利用するスタイルを含んだCSSファイルです。後述するCSS Modulesという仕組みで利用します。

 Reactの開発の流れとしては、Appコンポーネントの修正や、コンポーネントの追加を行っていきます。src/index.jsをいじる機会は、比較的少なくなります。

1.4.1 コンポーネントの書き方

 src/App.jsを修正しながら、Reactの書き方に慣れていきましょう。

 まずはApp.jsにある文章を別のものに変更しましょう。変更後保存すると、ブラウザに変更が反映されます。

import * as styles from './App.module.css'

const App = () => {
  return (
    <div className={styles.container}>
      <p className={styles.message}>
        Hello Gatsby
      </p>
    </div>
  );
};

 変更が反映されることを確認したら、いくつかのコードを例に、コンポーネントの記法を確認していきましょう。紙面の都合上、importやexport部分を省略し、App関数のみ記載します。

 Reactのコンポーネントは、あくまでJavaScriptです。JSXの中では、中括弧で囲った箇所はJSとして評価されます。

 JSXのタグでは属性(imgタグのsrc属性やinputタグのtype属性などの)の指定も可能ですが、classはJavaScriptの予約語のため、classNameと記述する必要があります。

const App = () => {
  const message = "Hello React" // App関数自体はJavaScriptなので普段の記法が使えます。
  return (
    <div className={styles.container}>
      <p className={styles.message}>
        {message}
      </p>
    </div>
  );
};

 JSX内でfalseやnull, undefinedを入れても、表示には影響がありません。また、条件文も利用できるので、次のような記法も使われます。

const App = () => {
  const isHide = false
  return (
    <div className={styles.container}>
      {/* この行はコメントで、レンダリング結果には影響しません。 */}
      {/* undefinedやnull, falseは表示に影響はありません。 */}
      {undefined}
      {isHide ? <p>isHideがtrueのとき表示されます</p> : <p>isHideがfalseのときに表示されます。</p>}
      {isHide && <p>isHideがtrueのときのみ表示されます。</p>}
    </div>
  );
};

 JSで表示をいじれるとなると、配列からタグを生成したい場合もあるでしょう。JSX内で配列を扱う際には、Arrayのmapを使った記法がよく使われます。ただし注意点として、配列で返すJSXのタグには、配列内でユニークなkey属性を付与する必要があります。4

const App = () => {
  const fruits = ["Apple", "Orange", "Grape"]
  return (
    <div className={styles.container}>
      {
        fruits.map(fruit => {
          return <p key={fruit}>{fruit}</p>
        })
      }
    </div>
  );
};

JSXの正体は?

 JSXは、見た目がHTMLのようなJSの拡張記法です。babelというツールで変換を行っており、次のJSXはJSに変換されます。

 HTMLタグのように見えていたものの実態は単に関数で、単にJSでViewを構築するための簡易記法であることがわかります。babelの設定はcreate-react-appにもGatsbyにも含まれており、開発者が意識せずとも利用できるようになっています。

// JSX
<div>
  <p className='main'>Hello World</p>
</div>

// JavaScript(React16まで)
import React from 'react'

React.createElement('div', null, React.createElement('p', {
  className: 'main'
}, 'Hello World'));

// JavaScript(React17から)
import { jsx as _jsx } from 'react/jsx-runtime'

_jsx('div', { children: _jsx('p', {
    className: 'main',
    children: 'Hello World'
})})
試し読みはここまでです。
この続きは、製品版でお楽しみください。