本書で取り扱う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ページのマークアップを行います。

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

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

1.3　環境構築

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

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

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

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

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

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

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を開いてみましょう。次のような画面が表示されるはずです。

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

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属性を付与する必要があります。⁴

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

// 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'
})})