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

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）
gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要
今回：gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成
gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ
gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング
gatsby入門 チュートリアルをこなす 6. 変圧器プラグイン※Transformer pluginsのgoogle翻訳
gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する
gatsby入門 チュートリアルをこなす 8. 公開するサイトの準備
gatsby入門 ブログ作ってサーバーにアップしてみる

チュートリアル

今回実施する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

たぶん出来た。
tutorial-part-threeディレクトリにあるgatsby-config.jsを以下のように修正。

gatsby-config.js

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

srcディレクトリ配下にutilsディレクトリを作成。
src/utils/typography.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を以下のように修正

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

OKOK
更にsrc/pages/index.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>
  )
}

おーけー

Creating layout components

つぎがレイアウトコンポーネントの作成
src/pages/about.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を作成し、以下を記述

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:[e-mail]">[e-mail]</a>
      </p>
    </div>
  )
}

Create your first layout component

src配下にcomponentsを作成
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` }}>
      {children}
    </div>
  )
}

src/pages/index.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>←これ修正
  );
}

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

タイトル出た

Add navigation links between pages

ナビゲーションのリンクを追加する。
src/components/layout.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>
  )
}

ナビゲーションが追加されてる！
チュートリアルはここまでか。。。
一応ほかのjsにもレイアウト適用してみるか。
src/pages/about.jsとsrc/pages/contact.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タグに変更
  )
}

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:[e-mail]">[e-mail]</a>
      </p>
    </Layout>
  )
}

Layoutが簡単に適用されるね。
便利。
jspのtilesとかで、こんな感じのよく作ってたな。
おじさん、割と感動。

今回はここまで。

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