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

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

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

（この章では、GatsbyでTypography.jsを使用するためのプラグインをインストールして、サイトの全体を形作るLayoutコンポーネントを作成できるようになることがゴールです）

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

## 3. Layoutコンポーネントを使ってみよう
この章では、Gatsbyプラグインの使い方やLayoutコンポーネントの作り方を学んでいきましょう。

**Gatsbyプラグイン**は、Gatsbyのサイトに機能を付け足すことができるJavaScriptパッケージです。使用することで、Gatsbyサイトの機能を拡張したり、使いやすいように修正することができます。

**Layoutコンポーネント**は、複数のページで重複して使われるようなヘッダーやフッター等のまとめて用意しておくためのコンポーネントです。

それでは、第3章に突入です。

###プラグインを使ってみる
プラグインという言葉は、皆さん聞いたことがあるのではないでしょうか。Wordpressなどを始めとするCMS（コンテンツマネジメントシステム）やその他多くのシステムで、機能を追加したり修正するような役割をもつものです。Gatsbyでも、基本的には同じです。

Gatsbyコミュニティの一員（あなたも含まれますよ！）として、プラグインを作成して共有することもできます。

> すでに、何百ものプラグインが作成されています！
使ってみたい方は、[こちら](https://www.gatsbyjs.org/plugins/)へ。

ぜひ、プラグインをインストールして使えるようになってください。Gatsbyのサイトを作る場合はほとんどプラグインを使用することになると思います。実際に、残りのチュートリアルを通して、あなたは何度も何度もプラグインをインストールして使用することになるでしょう。

それでは、最初のプラグインとして`Typography.js`を使えるようにするプラグインを実装してみましょう。

Typography.jsとは、サイトのタイポグラフィー（デザインにおける活字の構成および表現）を生成してくれるJavaScriptのライブラリです。これをプラグインを導入することで、Gatsbyサイトで使用できるようにします。

### 新しいサイトを作成しよう
[2章](https://qiita.com/wlcmty/items/1ecf954b60a016d249a4)の時と同様、今開いているターミナルのウィンドウやファイルは閉じて、`tutorial-part-three`という新しいGatsbyサイトを以下の手順で作成しましょう。作成したら、`cd`でそのディレクトリに移動します。

```shell
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three
```

### `gatsby-plugin-typography`というプラグインを導入しよう
プラグインを使用するためには、「インストール」と「設定」という2つの手順が必要となります。

1 . `gatsby-plugin-typography`というnpmパッケージをインストールします。

```shell
npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
```

2 . ディレクトリの最上層にある`gatsby-config.js`というファイルを以下のように編集します。

```js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```

2 . 次に、`Typography.js`のための新しい設定ファイルを作成します。`src/`の中に`utils`というディレクトリを作り、以下のコードを記述した`typography.js`というファイルを作成します。

```js
import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography
```

4 . 開発サーバーを立ち上げましょう。

```shell
gatsby develop
```

サイトを開いてデベロッパーツールで検証してみると、`<head>`タグの中に`<style>`という自動生成されたCSSが入っているはずです。

![typography-styles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/9814854d-ac60-2667-7ef5-d15417a232e6.png)

### どう変化するのか見てみよう
`Typography.js`による変化を知るために、以下のコードを`src/pages/index.js`に記述してみよう。

```jsx
import React from "react"

export default () => (
  <div>
    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
    <p>
      What do I like to do? Lots of course but definitely enjoy building
      websites.
    </p>
  </div>
)
```

すると、こんな風になっているはずです。

![no-layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/98b1624b-3da8-08c5-7874-475e6f907c62.png)

もう少し、見た目を整えてみましょう。
中のテキストを真ん中に寄せるために、`src/pages/index.js`に以下のコードを記述してください。

```jsx
import React from "react"

export default () => (
  <div style={{ margin: `3rem auto`, maxWidth: 600 }}>
    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
    <p>
      What do I like to do? Lots of course but definitely enjoy building
      websites.
    </p>
  </div>
)
```

![with-layout2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/1137fb74-f15b-caef-3a11-41f8880a8864.png)

良い感じになりましたね！！

### layoutコンポーネントについて
次に、lauoutコンポーネントを学んでいきましょう。
`src/pages/`に、以下の`about`ページと`contact`ページを作成してください。

src/pages/about.js

```jsx
import React from "react"

export default () => (
  <div>
    <h1>About me</h1>
    <p>I’m good enough, I’m smart enough, and gosh darn it, people like me!</p>
  </div>
)
```

src/pages/contact.js

```jsx
import React from "react"

export default () => (
  <div>
    <h1>I'd love to talk! Email me at the address below</h1>
    <p>
      <a href="mailto:me@example.com">me@example.com</a>
    </p>
  </div>
)
```

新しい`about`ページは、このようになっていますね。

![about-uncentered.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/e117a6c0-8f47-d896-f768-3c2b3ea13934.png)

んー。`index.js`のように、中のテキストがもう少し内側に寄っていて、さらに右上にナビゲーションメニューのようなものがあれば、もっと良くなりそうですね。

それでは、layoutコンポーネントを作成することで解決しましょう！

### 実際にlayoutコンポーネントを作成しよう
1 . `src/components`というディレクトリを作成します。

2 . その`src/components/`の中に、`layout.js`というファイルを作成します。

```jsx
import React from "react"

export default ({ children }) => (
  <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    {children}
  </div>
)
```

3 . 作成したlayoutコンポーネントを`src/pages/index.js`の中で読み込ませましょう。

```jsx
import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
    <p>
      What do I like to do? Lots of course but definitely enjoy building
      websites.
    </p>
  </Layout>
)
```

![with-layout2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/eb05b9e3-2e4f-7973-daf3-bd9b35c4e937.png)

layoutコンポーネントは機能しているようです。中の`index.js`のテキストは中央に寄っていますね！

しかし、`/about`や`/contact`のページを見てみると、内側には寄っていません。

4 . layoutコンポーネントを`about.js`や`contact.js`でも読み込ませてみましょう。

そうすれば、１つのlayoutコンポーネントを使うだけで、3つ全てのページの中身が中央揃えにすることができたはずです！

### サイトのタイトルを表示させよう
1 . layoutコンポーネントに以下のような記述をしてみます。

```jsx
import React from "react"

export default ({ children }) => (
  <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    <h3>MySweetSite</h3>
    {children}
  </div>
)
```

3つ全てのページにおいて、以下のようなタイトルが表示されるようになったはずです。

![with-title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/5df02d4e-8a35-ab89-501b-d1eccf5a3e69.png)

### ナビゲーションメニューを追加しよう
1 . 以下のようなコードをlayoutコンポーネントの中に記述します。

```jsx
import React from "react"
import { Link } from "gatsby"
const ListLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>{props.children}</Link>
  </li>
)

export default ({ children }) => (
  <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    <header style={{ marginBottom: `1.5rem` }}>
      <Link to="/" style={{ textShadow: `none`, backgroundImage: `none` }}>
        <h3 style={{ display: `inline` }}>MySweetSite</h3>
      </Link>
      <ul style={{ listStyle: `none`, float: `right` }}>
        <ListLink to="/">Home</ListLink>
        <ListLink to="/about/">About</ListLink>
        <ListLink to="/contact/">Contact</ListLink>
      </ul>
    </header>
    {children}
  </div>
)
```

![with-navigation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/621c3320-0358-b8c5-85c5-68f3770c9822.png)

簡単ですね！！

このように、簡単にタイトルやナビゲーションメニューを追加できました。練習として、フッターやサイドバーなど、お好きなものをlayoutコンポーネントで追加してみるといいですね。

お疲れさまでした！

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

次の章のテーマは、
「Gatsbyにおけるデータの扱い方を学ぼう」です。

お楽しみに！！

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

[[第1章：Gatsbyサイトの理解 編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/dcfcdf36ed660fd94ad7)

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