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

2020年09月05日

JavaScript JSX React gatsby

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(1) gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(2) 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 2020-09-04_21h54_50.jpg たぶん出来た。 tutorial-part-threeディレクトリにあるgatsby-config.jsを以下のように修正。

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

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

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 OKOK 更に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 おーけー

Creating layout components

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

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 2020-09-04_23h04_49.jpg

Create your first layout component

src配下にcomponentsを作成 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を修正

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 divのstyleをlayout.jsに移行したが、変わらないのでOK!

Add a site title

サイトタイトルを入れる 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 タイトル出た

Add navigation links between pages

ナビゲーションのリンクを追加する。 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 ナビゲーションが追加されてる! チュートリアルはここまでか。。。 一応ほかのjsにもレイアウト適用してみるか。 src/pages/about.jsとsrc/pages/contact.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タグに変更
  )
}
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 2020-09-05_00h28_19.jpg Layoutが簡単に適用されるね。 便利。 jspのtilesとかで、こんな感じのよく作ってたな。 おじさん、割と感動。

今回はここまで。

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


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby