GatsbyJS データでページを生成 チュートリアル part.4

チュートリアルのパート4へようこそ!
中途半端になってしまいました。物事がかなり快適に感じられるようになってきていることを願っています 😀

チュートリアル前半の復習

これまでに、React.js の使い方を学んできましたが、これがいかに強力かというと、自分でコンポーネントを作成して Web サイトのカスタムビルディングブロックとして機能させることができるということです。

また、CSS モジュールを使ったコンポーネントのスタイリングについても学習してきました。

今回のチュートリアルは?

このチュートリアルの次の4つのパート(このパートを含む)では、Markdown、WordPress、ヘッドレスCMS、その他あらゆる種類のデータソースから簡単にサイトを構築できるGatsbyの強力な機能であるGatsbyデータレイヤーに飛び込んでいきます。
Note:

GatsbyのデータレイヤーはGraphQLを利用しています。 GraphQLの詳細なチュートリアルについては、How to GraphQLをお勧めします。

ギャッツビーのデータ

ウェブサイトには、HTML、CSS、JS、データの4つの部分があります。チュートリアルの前半では、最初の3つに焦点を当てました。では、ギャツビーサイトでのデータの使い方を学んでいきましょう。

データとは?

データとは、「文字列」、整数(42)、オブジェクト({ pizza: true })などのことです。

しかし、Gatsbyで作業する目的のためには、より有用な答えは「Reactコンポーネントの外にあるすべてのもの」です。

これまでは、コンポーネント内で直接テキストを書いたり、画像を追加したりしていましたね。これは多くのウェブサイトを構築するための優れた方法です。しかし、多くの場合、データをコンポーネントの外に保存し、必要に応じてコンポーネントにデータを持ち込みたいと思うでしょう。

WordPress と Gatsby を使ってサイトを構築している場合、サイトのデータ(ページや記事)は WordPress にあり、必要に応じてそのデータをコンポーネントに取り込むことができます。

データはMarkdownやCSVなどのファイル形式や、データベースやAPIなどあらゆる種類のものにも対応しています。

Gatsbyのデータレイヤーを使えば、これらの(そして他のソースからも)データを直接コンポーネントに引っ張ってくることができます。

構造化されていないデータを使う vs GraphQL

ギャツビーサイトにデータを取り込むには、GraphQLやソースプラグインを使用しなければならないのでしょうか?

絶対にダメです。ノードのcreatePages APIを使用して、構造化されていないデータをGraphQLデータレイヤーを経由するのではなく、直接Gatsbyページに引き込むことができます。これは小規模なサイトには最適な選択ですが、より複雑なサイトではGraphQLとソースプラグインを使用することで時間を節約することができます。 Using Gatsby without GraphQLガイドを参照して、ノードのcreatePages APIを使用してGatsbyサイトにデータを取り込む方法とサイトの例をご覧ください。

構造化されていないデータを GraphQL と比較して、どのような場合に使用するのですか?

小規模なサイトを構築している場合、このガイドで説明したように、createPages APIを使用して非構造化データを取り込むのが効率的な構築方法の1つで、後にサイトが複雑になった場合、より複雑なサイトの構築に移行するか、データを変換したい場合は、以下の手順に従います。
  1. プラグインライブラリをチェックして、使いたいソースプラグインやトランスフォーマープラグインがすでに存在するかどうかを確認してください。
  2. もし存在しない場合は、プラグインオーサリングガイドを読んで、自分のものを作ることを検討してみてください!

ギャツビーのデータ層がGraphQLを使ってデータをコンポーネントに引き込む方法

Reactコンポーネントにデータを読み込むためのオプションはたくさんあります。その中でも最も人気があり、強力なものの1つがGraphQLと呼ばれる技術です。

GraphQLは、プロダクトエンジニアが必要なデータをコンポーネントに引き込むのを支援するためにFacebookで発明されました。

GraphQLはクエリ言語(名前のQLの部分)です。SQLに精通している場合、それは非常に似た方法で動作します。特別な構文を使って、コンポーネントに必要なデータを記述すると、そのデータが提供されます。

Gatsby は GraphQL を使用して、コンポーネントが必要なデータを宣言できるようにしています。

新しいサンプルサイトを作成する

チュートリアルのこの部分のために、別の新しいサイトを作成します。あなたは、"Pandas Eating Lots "と呼ばれるMarkdownブログを作成します。これは、たくさんの食べ物を食べるパンダの最高の写真とビデオを披露することに専念しています。途中、あなたはGraphQLとGatsbyのMarkdownサポートに足を踏み入れます。

新しいターミナルウィンドウを開き、以下のコマンドを実行して、tutorial-part-fourというディレクトリに新しいGatsbyサイトを作成してください。そして、新しいディレクトリに移動します。
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-four
そして、プロジェクトのルートに他に必要な依存関係をいくつかインストールします。Typographyテーマ「Kirkham」を使用し、CSS-in-JSライブラリ「Emotion」を試してみます。
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
パート3で終了したものと同じようなサイトを設定します。このサイトにはレイアウトコンポーネントと2つのページコンポーネントがあります。
src/components/layout.js

import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"

import { rhythm } from "../utils/typography"

export default function Layout({ children }) {
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          Pandas Eating Lots
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}
src/components/index.js

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

export default function Home() {
  return (
    <Layout>
      <h1>Amazing Pandas Eating Things</h1>
      <div>
        <img
          src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
          alt="Group of pandas eating bamboo"
        />
      </div>
    </Layout>
  )
}
src/components/about.js

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

export default function About() {
  return (
    <Layout>
      <h1>About Pandas Eating Lots</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}
src/utils/typography.js

import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typography = new Typography(kirkhamTheme)

export default typography
export const rhythm = typography.rhythm
gatsby-config.js (src 以下ではなく、プロジェクトのルートになければなりません)
gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
上記のファイルを追加して、いつものようにgatsby developを実行すると、以下のように表示されるはずです。 レイアウトと2ページの小さなサイトをもう一つ持っていますね。

これで、クエリを開始することができるようになりました😋。

初めてgraphQLでQueryを使う

サイトを構築する際には、例えばサイトタイトルのような共通のデータを再利用したいと思うでしょう。 about/ページを見てください。レイアウトコンポーネント(サイトヘッダー)とabout.jsページの<h1 />(ページヘッダー)の両方にサイトタイトル(Pandas Eating Lots)があることに気づくでしょう。

しかし、将来的にサイトタイトルを変更したい場合はどうでしょうか?すべてのコンポーネントでタイトルを検索し、各インスタンスを編集しなければなりません。これは、特に大規模で複雑なサイトでは、面倒でエラーが発生しやすい作業です。代わりに、タイトルを一つの場所に保存し、他のファイルからその場所を参照することができます。タイトルを一つの場所で変更すれば、Gatsbyは更新されたタイトルを参照するファイルに引き込んでくれます。

これらの共通のデータを格納する場所は、gatsby-config.jsファイル内のsiteMetadataオブジェクトです。 gatsby-config.jsファイルにサイトタイトルを追加します。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
develp server でサーバーを再起動します。

ページクエリの使い方

これでサイトのタイトルがクエリで取得できるようになりました。
src/pages/about.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function About({ data }) {
  return (
    <Layout>
      <h1>About {data.site.siteMetadata.title}</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`
こいつ・・・動くぞ! 上記のabout.jsの変更点でタイトルを取得する基本的なGraphQLクエリは以下の通りです。
src/pages/about.js

{
  site {
    siteMetadata {
      title
    }
  }
}
💡 パート5では、GraphQLで利用可能なデータをインタラクティブに探索できるツールに出会い、上記のようなクエリの作成をサポートしてくれます。

ページクエリはコンポーネント定義の外にあり、慣習的にはページコンポーネントファイルの最後にあり、ページコンポーネント上でのみ利用可能です。

静的クエリを使う

StaticQueryはGatsby v2で導入された新しいAPIで、ページ以外のコンポーネント(layout.jsコンポーネントなど)からGraphQLクエリを使ってデータを取得することができます。ここでは、新しく導入されたフックのバージョンであるuseStaticQueryを使ってみましょう。

src/components/layout.jsファイルに変更を加えて、useStaticQueryフックと{data.site.siteMetadata.title}を使用するようにします。参照を使用しています。完了すると、ファイルは以下のようになります。
src/pages/layout.js

import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"

import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          {data.site.siteMetadata.title}
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}
動いた! なぜここで2つの異なるクエリを使うのでしょうか?これらの例では、クエリの種類、書式、使用可能な場所を簡単に紹介しました。今のところ、ページクエリを作成できるのはページのみであることを覚えておいてください。Layout などのページ以外のコンポーネントでは StaticQuery を使用することができます。これらについては、チュートリアルのパート7で詳しく説明しています。

しかし、本当のタイトルを元に戻しましょう。

ギャツビーの核となる原則の1つは、クリエイターは自分が作っているものとすぐにつながることを必要としているということです(ブレット・ビクターに脱帽)。言い換えれば、コードに何か変更を加えたときには、その変更の効果をすぐに見るべきだということです。ギャツビーの入力を操作すると、新しい出力が画面に表示されます。

つまり、ほとんどの場合、変更した内容はすぐに反映されるということです。gatsby-config.jsファイルを再度編集し、今度はタイトルを "Pandas Eating Lots "に変更します。この変更は、あなたのサイトのページにすぐに反映されるはずです。



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

次に、チュートリアルのパート5では、ソースプラグインを使ってGraphQLを使ってGatsbyサイトにデータを取り込む方法を学びます。

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