GatsbyJsのプラグイン「gatsby-image」はもう使うべきじゃなさそう

概要

このブログでも使っているGatsbyJsという、Webサイトがサクッと作れて.mdファイルでマークダウン形式で作れるフロントエンドフレームワークだが、

これだけバージョンが出ると、以前に開発した先駆者のナレッジのポストが、更新されないままWeb上に残り続け後から利用する人が混乱する原因になることもあると思う。

今回ご紹介する

が

についても同様のことがいえる。

GatsbyJs V4 + Netlifyの環境下ではこのプラグインを使用している場合、

なのだ（僕は無料アカウントなので有料の場合はリソースの割当量が代わり、状況が変わるかもしれないが。）

gatsby-imageとは

ブログを書いたりするときにいつも悩むのが画像の取り扱いだ。画像はWebコンテンツには欠かせないもので、

ものである。

しかし、重い画像をそのままアップロードしてしまい、html内に大量に表示してしまうと、ロード遅延が発生しページの評価を下げたり、直帰率が高まることはよくあることだ。

そこで、gatsbyjsでは自動で画像の圧縮・サイズ改変を行うプラグイン

を用意していた。

上記にもあるように「Speedy, optimized images without the work.」（スピーディに手作業を生じさせず画像を最適化する）

とある。

このコンセプトからくるプラグインの利便性から多くのGatsbyJs愛好家にQiitaや個人ブログなどで取り上げられてきた。しかし、GatsbyJs V4からはこのプラグインはもはや

となっている。

なぜ問題に気づいたのか

この問題に僕が気づいたのは、GatsbyJsとの相性がいいと言われているPaaSサービスの

で何度もビルドがコケまくったからだ。

なにかおかしいと思いググると

のGithub Issueのポストを見つけた。

Netlifyの無料プランで、ビルドがコケるケースは僕以外の開発者でも、直近の期間で多発しているようだった。

解決まで

Issueを注意深く読み込むと、

はもう捨てて、

を使おうという意見が多数見られた。そのとおりにした。

が用意されていたのでほぼそのとおりに、

や

の画像呼び出しタグやGraphQLの記述も修正。

- "gatsby-image": "^3.11.0", // 削除+
"gatsby-plugin-image": "^2.9.1", // 追加

が、相変わらずビルドが通らない。

ページを最後まで読みすすめると、以下のようなポストが見つかった。

packge.jsonの記述を以下のように変更し、

...
 "gatsby": "^4.13.1", 
...

ルート直下で以下を実行

rm -rf node_modules yarn gatsby clean && gatsby build

Netlifyのbuildが通って無事サービスが更新された

。

まとめ

• GatsbyJs v4利用者は、

  v4.13.1

  以上に

  必ずアップグレード

  して、npm or yarnのやり直しをしよう。

• gatsby-image

  はもう捨てて、

  gatsby-plugin-image

  を使おう

  
  

  しかし、issueのポストでもこういうふうに言われていたのもあり、GatsbyJsの開発陣は手が回ってないのかなって感じちゃう。プラットフォームの未来が心配になるな。。