WEB

July 23, 2020

JavaScript
Gatsby.js

静的サイトジェネレータ活用入門 Gatsby.jsで画像最適化するための手順

post 51

本ブログも 他人の記事 を参考に突貫で作ったので、Gatsby.jsも理解出来ていない部分が多い。開発当初に比べ、参考書も幾つか出版されているので、こちらを一読してGatsby.jsの理解を深めてみた。


一応ECMAScriptやReactに馴染みのない方でも、簡単なブログを構築出来るまでが紹介されており、一読した印象では丁寧に初心者向けて解説されていると思う。

今回はGatsby.jsの鬼門と呼ばれる gatsby-image での画像表示を試してみた。

プロジェクト作成と下準備

ローカル環境にNode.jsが導入済みであることを前提に、以下手順に従ってプロジェクトを初期化。

# Gatsby.jsインストール
yarn global add gatsby-cli
gatsby -v

# 初期化と動作確認
gatsby new mysite
gatsby develop

Gatsby.jsでは gatsby-image を利用することで、最適化や高速化を全て処理してくれる(大変便利)

・劣化が目立たない範囲で圧縮.

・ファイルサイズが小さくなるフォーマットWebPを使用.

・デバイスの画面サイズや解像度に応じて適切なサイズで表示.

・遅延読み込み(Lazy Load)


gatsby-imageに必要なプラグインをインストール。

yarn add gatsby-image
yarn add gatsby-transformer-sharp gatsby-plugin-sharp
yarn add gatsby-source-filesystem

gatsby-config.jsを修正。

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

gatsby-source-filesystem は、ローカルにあるファイルを読み込むために必要なプラグインで、gatsby-config.jsのpathにGraphQLが見にいく場所を指定。

gatsby-imageで画像表示

src/pages/index.jsでsrc/images配下にある画像を表示させる。

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

import { graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = ({data}) => (
  <Layout>
    <SEO title="Home" />
    <Img fluid={data.file.childImageSharp.fluid} alt="" />
  </Layout>
)

export default IndexPage

export const query = graphql`
  query MyQuery {
    file(relativePath: {eq: "gatsby-icon.png"}) {
      childImageSharp {
        fluid(maxWidth: 512) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

GraphQLでクエリ結果を取得するため、冒頭でgraphqlをimportする。

gatsby-imageをimport後、取得結果を変数dataで定義し、クエリ結果をImgに連携する。

Fragment

GraphQLのクエリで定型部分をFragmentに置き換えてシンプルに記述が出来る。

// 置換前
fluid(maxWidth: 1600) {
  base64
  aspectRatio
  src
  srcSet
  srcWebp
  srcSetWebp
  sizes
}

// 置換後
fluid(maxWidth: 1600) {
  ...GatsbyImageSharpFluid_withWebp
}

gatsby-imageに合わせたデータを揃えるためクエリをFragmentとして用意されている。

gatsbyjs-fragment


©Copyright2020 TaNA LABO. All Rights Reserved.