GatsbyJS レイアウトコンポーネント制作 チュートリアル part.3

第3章へようこそ!

第3章では何するの?

このパートでは、Gatsbyプラグインと「レイアウト」コンポーネントの作成について学びます。

Gatsbyプラグインは、Gatsbyサイトに機能を追加するのに役立つJavaScriptパッケージです。Gatsbyは拡張性があるように設計されています。つまり、プラグインはGatsbyが行うすべてのことを拡張したり変更したりすることができます。

レイアウトコンポーネントは、複数のページで共有したいサイトのセクションのためのものです。例えば、サイトは一般的にヘッダーとフッターを共有するレイアウトコンポーネントを持っています。レイアウトに追加する他の一般的なものは、サイドバーやナビゲーションメニューです。例えばこのページでは、上部のヘッダーはgatsbyjs.orgのレイアウトコンポーネントの一部です。

パート3に飛び込んでみましょう。

プラグインを使う

あなたはプラグインのアイデアに精通しているでしょう。多くのソフトウェアシステムでは、カスタムプラグインを追加して新しい機能を追加したり、ソフトウェアのコア機能を変更したりすることをサポートしています。Gatsbyのプラグインも同じように動作します。

コミュニティメンバー(あなたのような人)は、プラグイン(少量のJavaScriptコード)を提供することができ、それを他の人がGatsbyサイトを構築する際に使用することができます。

既にライブラリーには数百ものライブラリが揃っています。PlugInライブラリを見てみましょう!

私たちのプラグインの目標は、プラグインを簡単にインストールして使えるようにすることです。あなたが構築するほとんどすべてのGatsbyサイトでプラグインを使用することになるでしょう。チュートリアルの残りの部分を進めていく中で、プラグインのインストールと使用を練習する機会がたくさんあります。

プラグインを使用するための最初のイントロダクションとして、Typography.js用のGatsbyプラグインをインストールして実装します。

Typography.jsは、サイト制作用のグローバルなベーススタイルを生成するJavaScriptライブラリです。このライブラリには対応するGatsbyプラグインがあり、Gatsbyサイトでの利用を効率化します。

新しいGatsbyサイトを作ろう!

パート2で述べたように、この時点では、デスクトップ上をすっきりさせるために、前のチュートリアルのパート(パート2のこと)のターミナルウィンドウとプロジェクトファイルを閉じておいた方が良いでしょう。

新しいターミナルウィンドウを開き、以下のコマンドを実行して、tutorial-part-threeというディレクトリに新しいGatsbyサイトを作成し、この新しいディレクトリに移動してください。
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パッケージをインストールします。
npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
Note:

Typography.jsはいくつかの追加パッケージを必要とするので、それらは説明書に含まれています。このような追加の要件は、各プラグインの「インストール」の説明に記載されています。

  1. プロジェクトのルートにあるgatsby-config.jsというファイルを以下のように編集します。
gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
gatsby-config.jsもGatsbyが自動的に認識する特殊なファイルです。ここにプラグインを追加したり、その他のサイト設定を行います。 よろしければ、gatsby-config.jsのdocをチェックしてみてください。
  1. Typography.jsには設定ファイルが必要です。srcディレクトリにutilsという新しいディレクトリを作成します。そして、utilsTypography.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
  1. 開発サーバーを起動
gatsby develop
サイトを読み込んだら、Chrome の開発者ツールを使って生成された HTML を調べると、タイポグラフィ プラグインが生成された CSS で <head> 要素に <style> 要素が追加されていることがわかります。

コンテンツとスタイルを変更してみよう

Typography.jsによって生成されたCSSの効果をよりよく見ることができるように、以下をsrc/pages/index.jsにコピーしてください。
src/utils/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>
  )
}
あなたのサイトは今、このようになっているはずです。 早速改善してみましょう。多くのサイトでは、ページの中央に1列のテキストが中央に配置されています。 これを作成するには、src/pages/index.js<div>に以下のスタイルを追加します。
src/utils/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>
  )
}
いいですね。最初のGatsbyプラグインのインストールと設定が完了しました!

レイアウトコンポーネントを作る

それでは、レイアウトコンポーネントの学習に移りましょう。 このパートの準備をするために、プロジェクトにいくつかの新しいページを追加します: aboutページとcontactページです。
src/utils/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/utils/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>
  )
}
新しいアバウトページがどのようなものか見てみましょう

うーん。新しい2つのページの内容がインデックスページのように中央にあるといいですね。
そして、訪問者がそれぞれのサブページを簡単に見つけて訪問できるように、ある種のグローバルなナビゲーションがあるといいですね。

最初のレイアウトコンポーネントを作成して、これらの変更に取り組みます。

最初のレイアウトコンポーネントを作る

  1. src/components に新しいディレクトリを作成します。
  2. 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>
  )
}
  1. 新しく作ったレイアウトコンポーネントを src/pages/index.js ページコンポーネントにインポートします。
src/components/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>
  );
}
レイアウトがうまくいっています。インデックスページの内容はまだ中央にあります。 しかし、/about//contact/ に移動してみてください。これらのページのコンテンツはまだ中央に配置されていません。
  1. 前ステップのindex.jsと同じ要領でabout.jscontact.jsのレイアウトコンポーネントをインポートします。
この1つの共有レイアウトコンポーネントのおかげで、3つのページのコンテンツは中央に配置されています。

サイトタイトルをつけよう!

新しいレイアウトコンポーネントに次の行を追加します。
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>
  )
}
3つのページのどれかに行けば、同じタイトルが追加されていることがわかります。

ページ間にナビリンクを作る

  1. 以下をレイアウトコンポーネントファイルにコピーします。
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>
  )
}
そして、あなたはそれを持っています! 基本的なグローバルナビゲーションを備えた3ページのサイトです。

チャレンジ: 新しい「レイアウトコンポーネント」の力を使って、ヘッダー、フッター、グローバルナビゲーション、サイドバーなどをギャツビーサイトに追加してみてください!

次回のチュートリアル4は?

チュートリアルのパート4では、Gatsbyのデータレイヤーとプログラムでページを作成する方法について学びます。

チュートリアルを進める >>