Gatsby.jsの画像最適化プラグインgatsby-imageを触ってみてわかったこと。contentGatsby.jsの画像最適化プラグインgatsby-imageを触ってみてわかったこと。さんのwebページの記事を参考いたしました。gatsby.jsのプラグインがとても簡潔にまとめてあり勉強になりました。今回は、gatsby.jsにおける画像の最適化を行ってくれるプラグインgatsby-imageについて、「実装したこと」「やりたかったこと」「できなかったこと」をまとめた記事です。各デバイスのサイズと画面解像度に最適なイメージサイズを読み込みます画像の読み込み中に画像の位置を保持します画像全体が読み込まれている間に表示する画像の小さな画像を読み込みます。}}gatsby-config.jsでは、画像を入れておくディレクトリまでのパスを指定しています。gatsby-imageはプラグインではなく、gatsby-transformer-sharpとgatsby-plugin-sharpに依存したライブラリなので、plugins:{}には記述する必要はありません。}`これが最初の実装。GraphQLでローカルファイル検索を行って、検索に合致した画像を表示するといった一連の手順をシンプルに実装しています。}`ここの部分において、画像を1つしか指定できていないことがわかります。「1ページあたり1枚しか画像を使えないの...」みたいな疑問にぶち当たったのでGatsby.jsの公式レファレンスを読んでみました。https://www.gatsbyjs.org/docs/graphql-reference/#aliasing公式サイトのレファンレンスに書いてあるAliasingを用いれば、一度に複数のファイルを要求することができそう。言うことで実装します。}`無事に表示できました。(今回は名前を変えただけで同じ画像を使っています)aliasingでは自由に名前を指定できるみたいですね。今回はlogo1とlogo2と言う名前を使いましたが、わかりやすい自分なりの名前をつけるとミスが起こらなくて済みそうです。/>)ここに書いてあるようにStaticQueryを使って描画していますが、もう少し直感的に書きたい気持ちがありました。ことで別の記述方法で実装してみます。}`よしよし、表示できている。Gatsby.jsではStaticQueryを使わない場合は、propsの中に自動的に格納されます。fixedの中身が少し変わっているので注意したいですね。全体的なコード量も少なくなっているのでいい感じです。パス指定のみで表示できるようにしたいこれが最後の挑戦。俺はパス指定だけで最適化したいんじゃ!」となったので挑戦しました。端的に言うとjavascriptのテンプレートリテラル周りでうまくいきませんでした。/>}パスを指定するだけで動的にGraphQLクエリを生成し、ローカルにある画像の問い合わせを行います。これには弱点があります。(テンプレートリテラル)を使った文字列のことを指しています。}`}テンプレートリテラル内で式展開を行う場合、返ってくるのはstring型に変換されたものになってしまうのです。したがって、関数graphqlの引数の型が一致せずエラーになってしまう...解決方法を探しに探したのですが、TemplateStringsArray型を引数に格納しようとあがいてもstring型に変換されてしまうのでどうしようもできず...結局は諦めることにしました。(←技術力不足)※2019/3/28追記GatsbyJSのissueを探していたら、公式の方で動的な画像読み込みを推奨していないことがわかりました。)色々やった結果はじき出されたエラーコードが次の画像の通りつまり、graphqlタグ付きテンプレートリテラルを使ったファイル問い合わせはコンパイル時限定とのこと。それでも使いたいならbabelの設定を黒魔術的にカスタムするか、GatsbyのOSSにプルリク送ってねという感じでした。Gatsbyは静的サイトジェネレータなのでしょうがないです。静的画像の処理が簡単なのはありがたい限りなので、動的な画像読み込みは自分で最適化しましょう。まとめ色々ありましたが、gatsby-imageは面倒臭い画像最適化処理を全部やってくれる最高なライブラリです。この記事がgatsby.jsを使う際の参考になればと思います。upLoginユーザーは見つかりませんでした。