eyecatch thumbnail

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

Profile picture
Takeru Yamada
2021.05.08

Contents


まとめ

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

はじめに

dapo-oni-64tVc0A2_xQ-unsplash

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

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

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

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

それではどうぞ!


進化内容

johannes-plenio-aWDgqexSxA0-unsplash.jpg

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

  1. StaticImage による静的画像の取り扱いやすさ向上
  2. 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-imageStaticImagesrc プロパティに画像の相対パスを記述すれば画像が表示できます.

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 の戦争を回避できるようになりました.

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

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

具体例はこんな感じ:

// 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)
      }
    }
  }
`

おわりに

kristopher-roller-zepnJQycr4U-unsplash.jpg

gatsby-plugin-image の良いと感じた点を2つ紹介しました.

GatsbyJS の鬼門が無くなったので GatsbyJS を毛嫌いする人が減ったら良いなーと思います.

最後までお読みいただきありがとうございました.

今日も良い一日を!


参考文献

やっぱり公式サイトが一番わかりやすいし一番充実してるので良き.

自分が持っている GatsbyJS 本はこれ.

gatsbyjs-book-ebisecom

2021-12-21 に初の GatsbyJS オライリー本が出る様子.

gatsby-book-oreilly


執筆機材


関連記事