GatsbyJS の画像の扱いが至極簡単になった | gatsby-plugin-image への進化

ルッチ / Lucci

2021.05.08

#tech

#gatsby

Contents

まとめ
はじめに
進化内容
- StaticImage により静的画像の取り扱いやすさが向上
- gatsbyImageData により煩雑な Fragments の記述が不要
おわりに
参考文献

まとめ

StaticImage により静的画像がとても簡単に扱えるようになった
gatsbyDataImage により fragments の記述が統一化された

はじめに

gatsby-plugin-image の登場により GatsbyJS の画像の取り扱いがすごく簡単になりました．

本記事では個人的な gatsby-plugin-image のよいところを紹介します．

gatsby-image で不便だなーと思っていた部分がほとんど取り払われています．

特に静的画像の取り扱い方と fragments の記述が簡単になったなと感じます．

それではどうぞ！

進化内容

個人的な “ココがすごいよ gatsby-plugin-image” というポイントは次の2つです．

StaticImage による静的画像の取り扱いやすさ向上
gatsbyImageData による煩雑な fragments の記述簡略化

それぞれどういうところがすごいと思ったのか紹介します．

StaticImage により静的画像の取り扱いやすさが向上

gatsby-plugin-image で静的画像の取り扱いやすさが向上しました．

gatsby-image は静的画像を貼りたいだけなのに GraphQL を使ってデータを取ってこないといけなかったです．この画像の取り扱いずらさが GatsbyJS の鬼門でした．

個人的にも，

画像手っ取り早く使えないのか，面倒くさいな

と思っていました．

そしてついに gatsby-plugin-image で静的画像が簡単に取り扱いできるようになりました．

StaticImage コンポーネントの src プロパティに相対パスを書けば良いだけ，くらいに簡単になりました．一切 GraphQL を使わないで静的画像を表示できます．

// gatsby-image の場合

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

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

// gatsby-plugin-image の場合

import { StaticImage } from "gatsby-plugin-image"

const HomePage = () => (
      <StaticImage
        src="./example.jpg"
        alt="please include an alt"
      />
  )
}

見ての通りムッチャ簡単になっています．

繰り返しになりますが gatsby-plugin-image は StaticImage の src プロパティに画像の相対パスを記述すれば画像が表示できます．

HTML の img タグと同じ感覚で使えるので気持ち良いですね．

GatsbyJS の鬼門である “画像の取り扱いの煩雑さ” が無くなりました．

もちろん GatsbyImage というコンポーネントを使えば動的な処理を書くことができます． GatsbyImage で画像データを取り扱うには getImage というヘルパー関数を使います． getImage ヘルパー関数は GraphQL で gatsbyImageData という fragments を使います．

gatsbyImageData については後述します．

gatsbyImageData により煩雑な Fragments の記述が不要

gatsby-image では ...GatsbyImageSharpFixed とか ...GatsbyImageSharpFluid などの Fragments をいろいろと記述する必要がありました．これは結構面倒だったなーと感じていました．

でも gatsby-plugin-image では gatsbyImageData という1つの fragment を使えば良いです．これにより Fixed vs Fluid の戦争を回避できるようになりました．

画像のレイアウトはコンポーネント側 (StaticImage や GatsbyImage) で定義することもできます．

取り扱いがだいぶ楽になったなと感じます．

具体例はこんな感じ:

// gatsby-image の場合

import { graphql } from "gatsby"

export const query = graphql`
  {
    file(relativePath: { eq: "images/example.jpg" }) {
      childImageSharp {
        fixed {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

// gatsby-plugin-image の場合

import { graphql } from "gatsby"

export const query = graphql`
  {
    file(relativePath: { eq: "images/example.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }
`