Graphqlを使って画像を表示する！【Gatsby.js】

今回は画像を表示するのにGraphqlを使い、imageコンポーネントを作成します。

まずはGraphqlについて紹介し、Graphqlでのデータの取得方法から画像の表示までやっていきます。

今回はこんな感じでやっていきたいと思います。

参考文献

今回もこちらを参考にさせて頂いております。

Graphqlについて

Graphqlの概念

Reactコンポーネントにデータをロードするための多くのオプションがあります。これらの中で最も人気があり強力なものの1つは、GraphQLと呼ばれる technologyです。

GraphQLは、必要なデータをReactコンポーネントへ引き渡すことを補助するためにFacabookによって発明されたものです。

GraphQLは、query language（QL部分）です。もしSQLに馴染みがある人の場合は、同じように使用することができます。特別な構文を使用して、コンポーネントに必要なデータを記述すると、そのデータが提供されます。

GatsbyはGraphQLを使用して、ページコンポーネントとStaticQueryコンポーネントがそれらとそのサブコンポーネントに必要なデータを宣言できるようにします。次に、Gatsbyは、コンポーネントで必要になったときに、そのデータをブラウザーで使用できるようにします。

Gatsby構築プロセスの重要な部分である、1つの統合レイヤーで、任意の数のソースからのデータをクエリ可能にします。

なぜGatsbyがGraphqlを使うのか

1. フロントエンドデータの定型文を排除 ー データのrequestingとwaitingについて心配する必要はありません。GraphQLクエリで必要なデータを要求するだけで、必要なときに表示されるため
2. フロントエンドの複雑さをクエリにプッシュする—多くのデータ変換はGraphQLクエリ内でビルド時に実行できるため
3. 最新のアプリケーションの複雑でネストされたデータ依存関係に最適なデータクエリ言語であるため
4. データの肥大化を取り除くことでパフォーマンスを向上させる— GraphQLを使用すると、APIが返すものではなく、必要なデータのみを選択できます。

詳細については下記の公式のページを読むといいです。

Gatsby

 

4 Pockets

Why Gatsby Uses GraphQL

https://www.gatsbyjs.com/docs/why-gatsby-uses-graphql/

A common question about Gatsby is, “Why does Gatsby use GraphQL? Doesn’t it generate static files?” Without providing some context, it can…

要するに、GarphqlをGatsbyで使うと、必要なデータを必要なときに簡単に引き出せるということです。

実際にGraphqlを使ってみます。

Graphqlを使ってみる

必要な画像の取り出し方

それではGatsbyでGraphqlを開いてみます。

まずは下記のコードで、サーバーを起動させます。

＄gatsby develop

サーバーを起動したら、http://localhost:8000/___graphqlに接続します。

今回やりたいことは、プロジェクトの中にあるファイルのが画像の一部を一覧にして表示させることです。

ファイルの状態は下記のようになっています。

srcフォルダの中にimagesというフォルダを作って、画像を保存してあります。

今回はこのimg-2からimg-9までの画像を一覧にしていきます。

上の状態で必要な画像のデータだけを取り出すことができます。

これだけじゃわからないので、一つ一つ理解していきます。

query MyQuery {
/* allFile：ファイル参照 filter：ファイルの中身をフィルターにかける　extension:拡張子を検索　nin：当てはまるファイル名は除外する
  allFile(filter: {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
}

まずはファイルの拡張子を指定して、取得するファイルの種類を指定します。

今回は画像のファイルが欲しいので、{regex: "/(jpg)|(png)|(jpeg) /"}という感じにします。

さらに、"background"と"background2"はいらないので、ninで除外するようにします。

ninについては下記に書いてあるとおり、配列から削除する意味があります。

これで必要な画像だけを取得します。

ここまでできたら以下のGifのように実行を押します。

実行を押すとこんなコードになります。

query MyQuery {
  allFile(filter: {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
    edges {
      node {
        id
      }
    }
  }
}

このidによって画像のidが出力されます。

これではどの画像を取得できているのかわからないので、idをbaseに変更して実行を押します。

上のように画像名が表示されるはずです。

これで画像名が表示されました。この値を表示する画像のaltに渡すように後でします。

画像名を取り出せたので、次に取り出した画像を最適化します。

取り出した画像の最適化

Gatsby

 

2 Pockets

Working with Images in Gatsby

https://www.gatsbyjs.com/docs/working-with-images/

Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and…

上記のサイトに画像の操作の方法の詳細が載っていますので、そちらを参考にするといいです。

childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }

nodeの下のchildImageSharpを指定して上記のように画像の大きさを指定します。

こうすることで画像の大きさを指定して取り出すことができます。

query {
    allFile(
      filter: 
      {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
      edges {
        node {
          base
          childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

現在のGraphqlが上のようになっていればOKです。

これで画像名と画像を取り出すことができます。

今回は一旦ここで終わりにします。

次回では、今回取得したデータをGatsby.jsの方に渡して、表示させるようにしていきます。

まとめ

Graphqlについてやっていきましたが、なかなか難しいです。。。

特にGatsbyとGraphqlは英語の文献しかないので、多少英語ができないと苦戦するかもしれないですね。

動画の方でも英語で説明はしてくれているので、もし今回の内容と合わせてみてみるといいかもしれません。

それではまた次回もよろしくお願い致します。

最後まで読んで頂きありがとうございました。