「Webサイト高速化のための静的サイトジェネレーター活用入門」の感想・備忘録

Gatsbyでは画像ファイルを含め、ファイルや外部データの読み込みはGraphQLを使用するのが基本となる。
npx gatsby developで起動される開発サーバでは以下のURLでGraphQLのGUIクライアントであるGraphiQLを試すことができる。
http://localhost:8000/___graphql

準備

src/内に画像を格納する
ex) src/images/xxx.jpg
ライブラリのインストール
npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem
プロジェクトルートにあるgatsby-config.jsを修正
GraphQLにallImageSharp, ImageSharp, file>childImageSharpフィールドが追加される。

module.exports = {
  plugins: [
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      }
    }
  ],
}

画像の表示

1. GraphiQLでクエリを生成

file>relativePath>eq:をチェックしxxx.jpgを入力
file>childImageSharp>fluid内のbase64,aspectRatio,src,srcSet,srcSetWebp,sizesフィールドをチェック

以下のクエリとなる

query MyQuery {
  file(relativePath: {eq: "xxx.jpg"}) {
    childImageSharp {
      fluid {
        base64
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
      }
    }
  }
}

実行すると以下のような結果が得られる。

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAGgAAAgIDAAAAAAAAAAAAAAAAAAIDBgEEBf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAe09exlVkK8UtFY0FIRDP//EAB0QAAIBBAMAAAAAAAAAAAAAAAECAAMQERITITH/2gAIAQEAAQUCFRDAymyt0HwOdptDNjPBm3//xAAWEQEBAQAAAAAAAAAAAAAAAAARABD/2gAIAQMBAT8BI3//xAAXEQEBAQEAAAAAAAAAAAAAAAAAERIB/9oACAECAQE/Ad9aRH//xAAbEAACAQUAAAAAAAAAAAAAAAABEAAgITEyYf/aAAgBAQAGPwLYSxR4s1//xAAdEAEAAgICAwAAAAAAAAAAAAABADEQESFhUZGh/9oACAEBAAE/IaT2RTQuLIhV55HzOxDZV+RF7udkIbVj/9oADAMBAAIAAwAAABCLGH3/xAAXEQEBAQEAAAAAAAAAAAAAAAAAEQFR/9oACAEDAQE/EIR1uq//xAAYEQEAAwEAAAAAAAAAAAAAAAAAARFRcf/aAAgBAgEBPxCMHKMKP//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESFRMUFhcYH/2gAIAQEAAT8Qs71RahaGXCRupWcd9RQNlw+RakorbBvDS+FfYSgHJAePcScJ9RLHZV+bmbTmCz//2Q==",
          "aspectRatio": 0.6666666666666666,
          "src": "/static/7a02b149cafcc87ac30823c817bdf86a/14b42/xxx.jpg",
          "srcSet": "/static/7a02b149cafcc87ac30823c817bdf86a/f836f/xxx.jpg 200w,\n/static/7a02b149cafcc87ac30823c817bdf86a/2244e/xxx.jpg 400w,\n/static/7a02b149cafcc87ac30823c817bdf86a/14b42/xxx.jpg 800w,\n/static/7a02b149cafcc87ac30823c817bdf86a/47498/xxx.jpg 1200w,\n/static/7a02b149cafcc87ac30823c817bdf86a/0e329/xxx.jpg 1600w",
          "srcSetWebp": "/static/7a02b149cafcc87ac30823c817bdf86a/61e93/xxx.webp 200w,\n/static/7a02b149cafcc87ac30823c817bdf86a/1f5c5/xxx.webp 400w,\n/static/7a02b149cafcc87ac30823c817bdf86a/58556/xxx.webp 800w,\n/static/7a02b149cafcc87ac30823c817bdf86a/99238/xxx.webp 1200w,\n/static/7a02b149cafcc87ac30823c817bdf86a/7c22d/xxx.webp 1600w",
          "sizes": "(max-width: 800px) 100vw, 800px"
        }
      }
    }
  },
}

2. pages/index.jsでGraphQLを使えるようにする

import * as React from "react"
import { graphql } from "gatsby" // 追加

export default () => {
  // 省略
}
// 追加（GraphiQLで生成したクエリから「MyQuery」を削除したもの）
export const query = graphql`
  query {
    file(relativePath: {eq: "xxx.jpg"}) {
      childImageSharp {
        fluid(maxWidth: 1600) {
          base64
          aspectRatio
          src
          srcSet
          srcWebp
          srcSetWebp
          sizes
        }
      }
    }
  }
`

3. pages/index.jsでgatsby-imageを使えるようにする


import * as React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image" // 追加

export default ({ data }) => {
  // 省略
  // 追加
  <Img fluid={data.file.childImageSharp.fluid} />
  // 省略
}
export const query = graphql`
  query {
    file(relativePath: {eq: "xxx.jpg"}) {
      childImageSharp {
        fluid(maxWidth: 1600) {
          base64
          aspectRatio
          src
          srcSet
          srcWebp
          srcSetWebp
          sizes
        }
      }
    }
  }
`

サイト内リンク

import { Link } from 'gatsby'でインポートして<Link to={"/"}>xxx</Link>で表示

<head>のカスタマイズ

ライブラリのインストール
npm install gatsby-plugin-react-helmet react-helmet
gatsby-config.jsのpluginsにgatsby-plugin-react-helmetを追加
import { Helmet } from "react-helmet"でインポートして以下で表示
<Helmet>
<title>Helmetでセットされたタイトル</title>
</Helmet>