はじめに

このシリーズでは、英語ソースばかりで「Gatsby使ってみたいけど、よくわからない...」という方々のために、公式Docを翻訳（ところどころざっくり要約）していきます。

実際の公式ドキュメントはこちら

（この章では、前章で作成したGatsbyサイトがどのように機能するか理解し、最終的にsurgeというホスティングサービスを利用してデプロイまで完了することがゴールです）

〜〜以下、翻訳となります〜〜

1. Gatsbyサイトの構成を理解しましょう

前章では、Gatsby.jsの開発環境を構築し、「hello-world-starter」を利用して高速でサイトを作成しました。この章では、その作成されたサイトの中身に着目していきましょう。

Startersの使い方

前章では、下記のコマンドを使って「hello-world-starter」を利用したサイトを作成しました。

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

新しくGatsbyサイトを作成する時、あなたは次のようなコマンドを実行することで、既存のStarterを利用したサイトを作成することができます。

gatsby new [作成したいサイトの名前] [利用したいStarterのGithubのURL]

もしも後半のURLを省いた場合、Gatsbyは自動的にこのデフォルトスターターを利用してサイトを生成します。この章では、前回「hello-world-starter」を利用して作成したサイトを使っていきます。

作成されたファイルを見てみましょう

お使いのテキストエディタを開いて、前回作成されたhello-worldというディレクトリを覗いてみましょう！
このようになっているはずです。（VScodeを使用する場合）

Gatsbyサイトを構成するファイルを知ろう

まず、/srcディレクトリの中にある/pagesというディレクトリの中を確認しましょう。中にはindex.jsというファイルがあります。このsrc/pages/index.jsというファイルの中に、"Hello world!"という文字列をもつdiv要素を生成するためのコンポーネントが用意されています。

"Hello World"を編集してみましょう

それでは、"Hello world!"というテキストを"Hello Gatsby!"というテキストに書き換えてみましょう。

1 . index.js内の"Hello world"を"Hello Gatsby!"に書き換えて、保存します。
（下記のように、テキストエディタとブラウザのウィンドウを比較できるように並べるとわかりやすいです）

Gatsbyはこのホットプリローディングという技術であなたの開発を加速させます。あなたが開発用サーバを立ち上げている間、Gatsbyで作られたファイルは常に監視されており、ファイルが保存された時に即座にその変更がサイトに反映されるのです。ファイルを保存した後にわざわざページを更新する必要は、もうありません。

2 . 次は、あなたの加えた変更をより見やすいものにします。
src/pages/index.jsの中のコードを、以下のコードに書き換えて保存してみてください。文字の色が紫に変わって、文字の大きさも大きくなるはずです。

import React from "react"
export default () => (
  <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
)

（Gatsbyにおけるスタイル変更については、第2章で解説します）

3 . 次に、文字の大きさのみ元に戻して、h1のヘッダーとpタグでページを構成します。

import React from "react"
export default () => (
  <div style={{ color: `purple` }}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
  </div>
)

4 . そして最後に、以下のように書き換えて画像も加えてみましょう。（Unsplashからランダムに画像を取得します）

import React from "react"
export default () => (
  <div style={{ color: `purple` }}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

「え...なんでJavaScriptファイルの中にHTMLが？？」

もしあなたがReactやJSXを使い慣れている人であれば、ここは読み飛ばしてもらっても構いません。もしもReactのフレームワーク等を利用したことがないのであれば、このHTMLはJavaScriptファイルの中で一体何をしているんだろうと疑問に思うかもしれません。
これは、JSXと呼ばれる拡張版JavaScriptで、主にReactやVueで使われています。

以下のように、JSXで書かれたファイルは元のJavaScriptファイルとは大きく異なります。しかし、Gatsbyサイトはより書きやすくて読みやすいJSXのファイルを自動的にJavaScriptファイルに変換するツールを兼ね備えているので、安心してJSXを使うことができます。

JSX

import React from "react"
export default () => <div>Hello world!</div>

JavaScript

import React from "react"
export default () => React.createElement("div", null, "Hello world!")

（JSXについてもっと深く知りたい方は、こちらのReact公式ドキュメント（日本語）をどうぞ）

コンポーネントを理解しながらサイトを作ろう

つい先ほどまであなたが作成していたサイトは、１つのpageコンポーネントによって構成されています。
そのコンポーネントとは、一体なんでしょうか。

コンポーネントとは、UI(アプリ内のユーザーが実際に触れる部分、機能)ごとにHTMLやCSS、JavaScriptなどのコードをひとまとめにしたものです。

（GatsbyはReactで生成されているので、このドキュメントで「コンポーネント」が登場したら、それはReactコンポーネントの話をしていると思ってください）

わかりやすいように、サイト内にボタンを作成するのを例として扱ってみましょう。
これまで、あなたはCSSファイルの中に新しいクラスを用意し（今回は、.primary-buttonというクラス名を使用）、その中身を書いて、下記のようにそのクラスを適用させたいHTMLファイルの要素に記載していたと思います。

<button class="primary-button">Click me</button>

コンポーネント志向では、代わりにPrimaryButtonというコンポーネントを定義して、それを以下のように使うだけです。

<PrimaryButton>Click me</PrimaryButton>

pageコンポーネントを使ってみよう

src/pages/内のファイルの中で定義されたコンポーネントは、自動的にpageコンポーネントとなります。
どういうことか、早速見てみましょう。

もう既に、あなたはsrc/pages/index.jsというファイルでpageコンポーネントを作成しています。次は、一緒にabout.jsを作ってみましょう。

1 . まずはsrc/pages/内にabout.jsというファイルを新規作成して、次のコードをコピーして保存しましょう。

import React from "react"

export default () => (
  <div style={{ color: `teal` }}>
    <h1>About Gatsby</h1>
    <p>Such wow. Very React.</p>
  </div>
)

2 . http://localhost:8000/about/にアクセスしてみましょう。

このように、src/pages/about.jsというファイルにReactコンポーネントを書き込むだけで、あっという間に/aboutでアクセス可能なページを作ることができました。これがpageコンポーネントです。

子コンポーネントを使ってみよう

例えば、HomeページとAboutページの両方のページで同じようなコードが記述されている場合、「繰り返し利用可能な子コンポーネント」を作ることで解決できます。今回作成したページの両方に<h1>が存在しているので、繰り返し使うことのできるHeaderという子コンポーネントを作ってみましょう。

1 . src/componentsという新しいディレクトリを作成し、その中にheader.jsというファイルを作成しましょう。

2 . 以下のコードをそのsrc/components/header.jsの中に記述します。

import React from "react"

export default () => <h1>This is a header.</h1>

3 . 以下のようにabout.jsを編集することでHeaderコンポーネントをインポートし、<h1>を<Header />に書き換えます。

import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header />
    <p>Such wow. Very React.</p>
  </div>
)

現在ブラウザでは、"About Gatsby"というテキストが"This is a header"に書き換えられていると思います。しかし、Aboutページなので本来は"About Gatsby"と書かれるべきですよね。

4 . src/pages/header.jsの中を以下のように編集します。

import React from "react"

export default props => <h1>{props.headerText}</h1>

5 . src/pages/about.jsの中を以下のように編集します。

import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header headerText="About Gatsby" />
    <p>Such wow. Very React.</p>
  </div>
)

これで、"About Gatsby"というテキストに戻ったはずです。

「propsって何だろう？」

これまで、あなたはいくつかのReactコンポーネントを定義してきました。それらのコンポーネントを静的ではなく動的に使用するためには、props（properties = 所有物）を使って、子コンポーネントにその親となるコンポーネントのデータを渡してあげる必要があるのです。

今回、about.js という親コンポーネントから、headerTextというprop（親コンポーネントがもつデータ、つまり"About Gatsby"）を、子コンポーネントであるHeaderに渡しています。

<Header headerText="About Gatsby" />

一方header.jsでは、親コンポーネントからheaderTextというpropを受け取るために以下のような記述をします。

<h1>{props.headerText}</h1>

このように、JSXファイルでは{}で囲うことによってJavaScriptのコード記法を使うことができます。上では、実際にpropsオブジェクトからheaderTextの値を取得しています。

もし、もうひとつ別のprop（値、データ）を<Header />コンポーネントに渡したい場合は、以下のように書きます。

<Header headerText="About Gatsby" arbitraryPhrase="is arbitrary" />

これで、header.js内で{props.arbitrary}とすれば、arbitraryPhraseの値を取得できるようになります。

6 . こういったコンポーネントの作成がいかに便利なのかを、もうひとつ<Header />コンポーネントをsrc/pages/about.jsに付け足すことで実感しましょう。

import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header headerText="About Gatsby" />
    <Header headerText="It's pretty cool" />
    <p>Such wow. Very React.</p>
  </div>
)

はい、簡単にヘッダーが増えました！
<Header />用のコードを何度も書く必要はありません。propsを使用して、中のデータを渡してあげるだけでOKです。

layoutコンポーネントを使ってみよう

layoutコンポーネントは、Gatsbyサイト内の複数ページで毎回読み込まれる部分をまとめるためのコンポーネントです。例えば、ヘッダーやフッター、サイドバー、ナビゲーションメニュー等です。

（layoutコンポーネントについては、第3章で詳しく解説します）

`<Link/>`を使ってみよう

<Link />は、Gatsbyからインポートして使用できる便利なコンポーネントの一つです。使い方は簡単です。

1 . src/pages/index.jsを以下のように編集し、<Link />コンポーネントをGatsbyから取得、to=""で行き先を指定しつつ/contactに飛ぶ<Link />コンポーネントを設置します。

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default () => (
  <div style={{ color: `purple` }}>
    <Link to="/contact/">Contact</Link>
    <Header headerText="Hello Gatsby!" />
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

この段階で生成された"Contact"をクリックすると、このような画面が表示されるはずです。

なぜ、404ページ？
それは、あなたがまだ作成されていないページにアクセスしようとしているからです。

2 . それでは、src/pages/contact.jsに新しい“Contact”ページを作成して、以下のコードを記述しましょう。

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Link to="/">Home</Link>
    <Header headerText="Contact" />
    <p>Send us a message!</p>
  </div>
)

これで、以下のように"Home"ページと"Contact"ページを行き来できるようになっていれば成功です！

ちなみに、<Link />コンポーネントはそのGatsbyサイトの中での移動でのみ使われます。外部のサイトに移動するリンクを貼りたい場合は、HTMLの<a>タグを使いましょう。

Gatsbyサイトをデプロイしてみよう

Gatsby.jsは静的サイトを生成するモダンなフレームワークであり、複雑なデータベースを動かすようなサーバーを用意する必要はありません。その代わり、gatsby buildというコマンドを使って、静的なHTMLファイルやJavaScriptファイルをホスティングサービスサイト（Webサイトを表示するためのサーバーを使わせてもらえるサービス）でデプロイできる状態に変換する必要があります。

今回は、Surgeを使ってGatsbyサイトをデプロイしてみましょう。

これまでにSurgeを使ったことがない方は、ターミナルで以下のコマンドを実行することでSurgeをインストール・ログインすることができます。

npm install --global surge

# 以下のコマンド実行後、指示通りに入力すればアカウントを作成できます
surge login

Surgeに新規登録またはログインできたら、同じくターミナルで作業中のディレクトリ（hello-worldというディレクトリ）で、gatsby buildを実行してください。

gatsby build

このコマンドは、15〜30秒ほどかかるはずです。
終わったら、以下のようにlsコマンドを使って生成されたファイルを見ることができます。

ls public

それでは、以下のようにして、生成されたファイルを使ってデプロイしましょう！

surge public/

domain: ランダム生成される名前.surge.shというのが表示されたら、enterキーを押しましょう。

ターミナル上の処理が終わって、このような画面が表示されたら、ついにデプロイ成功です！！！

domain:の部分に記載されているwebアドレス（この画像の場合、lowly-pain.surge.sh）にアクセスすれば、あなたが新しく作成したサイトにアクセスできるようになっているはずです。

お疲れさまでした！

参考文献：Gatsby公式ドキュメント

次の章のテーマは、
「GatsbyにおけるCSSの使い方を理解する」です。

お楽しみに！！

[第0章：環境構築編] Gatsby公式ドキュメントを翻訳してみた。

[第2章：Gatsbyにおけるスタイリング編] Gatsby公式ドキュメントを翻訳してみた。

[第3章：Layoutコンポーネントを使ってみよう編] Gatsby公式ドキュメントを翻訳してみた。