gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[今回：gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# チュートリアル
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-three/
ネストされたレイアウトコンポーネントの作成ができるようです。
早速やっていきましょう。
# Creating Nested Layout Component
## Using plugins
gatsbyはコミュニティメンバーがプラグインを提供しているので、それを使用しようぜ。
最初はTypography.jsを使うぜ！
みたいなことが書いてるはず！
### Create a new Gatsby site
またサイトを作成、で移動
```gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world```
```cd tutorial-part-three```
### Install and configure gatsby-plugin-typography
移動したディレクトリで以下を実行
```npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates```
![2020-09-04_21h54_50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/5c7741b5-56d5-9eab-5426-eca57810cd56.jpeg)
たぶん出来た。
tutorial-part-threeディレクトリにあるgatsby-config.jsを以下のように修正。

```js:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```
srcディレクトリ配下にutilsディレクトリを作成。
src/utils/typography.jsを作成し以下を記述。

```js:src/utils/typography.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
```
起動
```gatsby develop```
チュートリアルの感じのんが出てたからOK!!
### Make some content and style changes
src/pages/index.jsを以下のように修正

```js:src/pages/index.js
import React from "react"

export default function Home() {
  return (
    <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>
  )
}
```
![2020-09-04_22h08_28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/72336a57-e6fb-d0a6-c461-986e426a76ed.jpeg)
OKOK
更にsrc/pages/index.jsを修正

```js:src/pages/index.js
import React from "react"

export default function Home() {
  return (
    <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>
  )
}
```
![2020-09-04_22h58_14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/bfbe64c9-f76b-3364-6564-05b3e037977b.jpeg)
おーけー

## Creating layout components
つぎがレイアウトコンポーネントの作成
src/pages/about.jsを作成し、以下を記述

```js:src/pages/about.js
import React from "react"

export default function About() {
  return (
    <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を作成し、以下を記述

```js:src/pages/contact.js
import React from "react"

export default function Contact() {
  return (
    <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>
  )
}
```
![2020-09-04_23h03_50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/332f1336-b9a8-eacb-baee-32a99e68b78f.jpeg)
![2020-09-04_23h04_49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/818991a0-d570-1431-d816-34211c6cfa87.jpeg)
### Create your first layout component
src配下にcomponentsを作成
src/components/layout.jsを作成し以下を記述

```js:src/components/layout.js
import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      {children}
    </div>
  )
}
```
src/pages/index.jsを修正

```js:src/pages/index.js
import React from "react"
import Layout from "../components/layout"←これ追記

export default function Home() {
  return (
    <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>←これ修正
  );
}
```
![2020-09-04_23h09_50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/93507846-0763-57f8-3aae-8f9697864d76.jpeg)
divのstyleをlayout.jsに移行したが、変わらないのでOK!
### Add a site title
サイトタイトルを入れる
src/components/layout.jsを修正

```src/components/layout.js
import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      <h3>MySweetSite</h3>←これを追記
      {children}
    </div>
  )
}
```
![2020-09-05_00h13_15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/06dacfa8-03aa-8261-3f5d-8d1888ff1d23.jpeg)
タイトル出た
### Add navigation links between pages
ナビゲーションのリンクを追加する。
src/components/layout.jsを追記

```js:src/components/layout.js
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 function Layout({ children }) {
  return (
    <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>
  )
}
```
![2020-09-05_00h18_12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/2a742673-aea0-9ecd-a21c-880ee2fe8a0f.jpeg)
ナビゲーションが追加されてる！
チュートリアルはここまでか。。。
一応ほかのjsにもレイアウト適用してみるか。
src/pages/about.jsとsrc/pages/contact.jsを修正

```js:src/pages/about.js
import React from "react"
import Layout from "../components/layout"←これ追記

export default function About() {
  return (
    <Layout>←divからLayoutタグに変更
      <h1>About me</h1>
      <p>
        I’m good enough, I’m smart enough, and gosh darn it, people like me!
      </p>
    </Layout>←divからLayoutタグに変更
  )
}
```

```js:src/pages/contact.js
import React from "react"
import Layout from "../components/layout"←これ追記

export default function Contact() {
  return (
    <Layout>
      <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>
    </Layout>
  )
}
```
![2020-09-05_00h27_13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/019902a2-cdab-072b-68a8-ef699cb4a921.jpeg)
![2020-09-05_00h28_19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/91633f03-64c4-550d-aa06-39952a2274c1.jpeg)
Layoutが簡単に適用されるね。
便利。
jspのtilesとかで、こんな感じのよく作ってたな。
おじさん、割と感動。

今回はここまで。

ありがとうございました。