[第1章：Gatsbyサイトの理解 編] Gatsby公式ドキュメントを翻訳してみた。

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

実際の公式ドキュメントは[こちら](https://www.gatsbyjs.org/tutorial/)

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

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

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

[前章](https://qiita.com/wlcmty/items/67b6f51ddc646484d7bc)では、Gatsby.jsの開発環境を構築し、「hello-world-starter」を利用して高速でサイトを作成しました。この章では、その作成されたサイトの中身に着目していきましょう。

### Startersの使い方
[前章](https://qiita.com/wlcmty/items/67b6f51ddc646484d7bc)では、下記のコマンドを使って「hello-world-starter」を利用したサイトを作成しました。

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

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

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

もしも後半のURLを省いた場合、Gatsbyは自動的にこの[デフォルトスターター](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-default/)を利用してサイトを生成します。この章では、前回「hello-world-starter」を利用して作成したサイトを使っていきます。

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

![hello-world-vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/73dfad09-0318-acbc-57b9-aa4216100520.png)

## 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!"に書き換えて、保存します。
（下記のように、テキストエディタとブラウザのウィンドウを比較できるように並べるとわかりやすいです）

[![Image from Gyazo](https://i.gyazo.com/acfcd4d910ffdcde007d073db056c4ba.gif)](https://gyazo.com/acfcd4d910ffdcde007d073db056c4ba)

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

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

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

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

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

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

![more-hot-reloading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/562bbffc-6401-a8a6-4c02-c773310209f2.png)

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

```jsx
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>
)
```

![add-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/8e498d98-0531-3591-0751-fd93b3b21ca2.png)

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

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

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

JSX

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

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

（JSXについてもっと深く知りたい方は、[こちら](https://ja.reactjs.org/docs/jsx-in-depth.html)のReact公式ドキュメント（日本語）をどうぞ）

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

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

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

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

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

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

```jsx
<PrimaryButton>Click me</PrimaryButton>
```

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

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

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

```jsx
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/`にアクセスしてみましょう。

![gatsby-about-page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/8334b1df-d78c-f266-4492-04457b5a1369.png)

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

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

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

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

```jsx
import React from "react"

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

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

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

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

![header-component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/40b939cf-6088-5f75-3d6e-93920e3da81c.png)

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

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

```jsx
import React from "react"

export default props => <h1>{props.headerText}</h1>
```
5 . `src/pages/about.js`の中を以下のように編集します。

```jsx
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>
)
```

![pass-data-header.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/53509bb2-548b-f3cd-a3ba-3f97a2ca267d.png)

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

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

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

```jsx
<Header headerText="About Gatsby" />
```

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

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

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

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

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

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

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

```jsx
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>
)
```

![duplicate-header.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/42506abd-3914-a859-7118-aa486aae24eb.png)

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

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

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

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

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

```jsx
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-page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/a3a164ff-18f6-a727-b0aa-b707f0b626a0.png)

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

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

```jsx
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](https://surge.sh/)を使ってGatsbyサイトをデプロイしてみましょう。

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

```shell
npm install --global surge

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

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

```shell
gatsby build
```

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

```shell
ls public
```

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

```shell
surge public/
```

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

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

![surge-deployment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/aba1b7c4-b944-78bc-eded-29f5199ff49e.png)

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

お疲れさまでした！

参考文献：[Gatsby公式ドキュメント](https://www.gatsbyjs.org/tutorial/)

[次の章](https://qiita.com/wlcmty/items/1ecf954b60a016d249a4)のテーマは、
「GatsbyにおけるCSSの使い方を理解する」です。

お楽しみに！！

[[第0章：環境構築編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/67b6f51ddc646484d7bc)

[[第2章：Gatsbyにおけるスタイリング 編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/1ecf954b60a016d249a4)

[[第3章：Layoutコンポーネントを使ってみよう 編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/8302dcdc61debbd4132e)