
今回は以前のGraphqlについてやって内容の続きです。
もし読んでいない方は一度覗いてみてください。
今回はGraphqlで取得した値を表示させていきます。
この記事でわかること
・Gatsbyでの画像の操作方法
・画像の表示の仕方
・CSS Grid Layoutについて
今回はこんな感じでやっていきたいと思います。
参考文献
今回もこちらを参考にさせて頂いております。
Gatsbyでの画像の操作
Gatsbyをクエリする
まずGraphqlで取得した値を確認してみます。
query {
allFile(
filter:
{extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
edges {
node {
base
childImageSharp {
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
これをGatsbyで操作する場合、このままGatsbyに貼り付ければいいというものではないらしいです。
画像の操作の仕方は下記のページに書いてあります。
それではGatsbyで画像の値を取得してみましょう。
image.jsファイル
にGraphqlのコードを下記のように追加します。
import {graphql, useStaticQuery } from "gatsby"
import React from 'react'
import Img from "gatsby-image"
import "./image.css"
const Image = () => {
const data = useStaticQuery(graphql`
query {
allFile(
filter:
{extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
edges {
node {
base
childImageSharp {
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`)
return ()
export default Image
Imageのコンポーネント
を定義して、その中にdata
という値を定義します。
その中にGraphqlのコードをuseStaticQuery
とgraphql
を使って追加していきます。
こうすることでGatsbyで画像のデータを使用することができます。
この状態ではただ値を取得しただけなので、次は表示するようにしましょう。
画像の値を表示させる
mapメソッドを使う
今回も画像を表示させるのにJSXの部分でmapメソッド
を使います。
コードは下記のように出力します。
import {graphql, useStaticQuery } from "gatsby"
import React from 'react'
import Img from "gatsby-image"
const Image = () => {
const data = useStaticQuery(graphql`
query {
allFile(
filter:
{extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
edges {
node {
base
childImageSharp {
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`)
return (
<div className="image-container">
<h1>View our Destination</h1>
<div className="image-grid">
{data.allFile.edges.map((image, key) => (
<Img key={key}
className="image-item"
fluid={image.node.childImageSharp.fluid}
alt={image.node.base.split('.')[0]}
/>
))}
</div>
</div>
)
}
export default Image
今回も前回と同じないよのmapメソッドですね。
上記のコードがみてわからない方は前回のページを読むといいかもしれません。
Listとkeyについて【React.js】
mapメソッド
を使ってallFile
の下のedges
までを第一引数でimage
と変換します。第二引数にはkey
をいれます。
今回ここがindex
ではないのは、画像自体にkey
の値が入っているからですね。
Imgタグ
の中にkey
・className
・fluid
・alt
の値をいれていきます。
key
では画像のkey
の値を{ key }
として入れていきます。
fluid
では、
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
この値を入れたいので、allFile > edges > node > childImageSharp > fluid
という風に記述します。
allFile > edges = image
となりますので、{image.node.childImageSharp.fluid}
こうすれば呼び出せますね。
alt={image.node.base.split('.')[0]}
この部分も同じように呼び出しています。
画像名はbaseで下記のように呼び出せます。
今回も前回と同じないよのmapメソッドですね。
上記のコードがみてわからない方は前回のページを読むといいかもしれません。
Listとkeyについて【React.js】
mapメソッド
を使ってallFile
の下のedges
までを第一引数でimage
と変換します。第二引数にはkey
をいれます。
今回ここがindex
ではないのは、画像自体にkey
の値が入っているからですね。
Imgタグ
の中にkey
・className
・fluid
・alt
の値をいれていきます。
key
では画像のkey
の値を{ key }
として入れていきます。
fluid
では、
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
この値を入れたいので、allFile > edges > node > childImageSharp > fluid
という風に記述します。
allFile > edges = image
となりますので、{image.node.childImageSharp.fluid}
こうすれば呼び出せますね。
alt={image.node.base.split('.')[0]}
この部分も同じように呼び出しています。
画像名はbaseで下記のように呼び出せます。

今回も前回と同じないよのmapメソッドですね。
上記のコードがみてわからない方は前回のページを読むといいかもしれません。
Listとkeyについて【React.js】
mapメソッド
を使ってallFile
の下のedges
までを第一引数でimage
と変換します。第二引数にはkey
をいれます。
今回ここがindex
ではないのは、画像自体にkey
の値が入っているからですね。
Imgタグ
の中にkey
・className
・fluid
・alt
の値をいれていきます。
key
では画像のkey
の値を{ key }
として入れていきます。
fluid
では、
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
この値を入れたいので、allFile > edges > node > childImageSharp > fluid
という風に記述します。
allFile > edges = image
となりますので、{image.node.childImageSharp.fluid}
こうすれば呼び出せますね。
alt={image.node.base.split('.')[0]}
この部分も同じように呼び出しています。
画像名はbase
で下記のように呼び出せます。

無事に表示されましたね。
これでは全然カッコよくないので、CSSで変更していきます。
CSS Grid Layout
画像の一覧のときに画像の大きさを変更するにはGrid Layout
を使用します。
詳しくは下記のページに記載してあります。
コードは下記のようにします。
.image-container{
text-align: center;
margin: 150px 0;
}
.image-container h1 {
margin-bottom: 64px;
}
.image-grid{
display: grid;
grid-gap: 10px;
/* 収まる限り多くの列で埋める*/
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* 行の大きさを決める (最小:最大)*/
grid-auto-rows: minmax(50px,auto);
margin: 0 auto;
max-width: 1000px;
padding: 0 32px;
width: 100%;
}
/* 5番目の要素だけを取り出す */
.image-item:nth-child(5){
/* 右から2グリッド分広げる */
grid-column-end: span 2;
}
.image-item:nth-child(9){
/* 上から4つ目のグリッドからスタート */
grid-row-start: 4;
/* 下から2グリッド分広げる */
grid-column-end: span 2;
}
.image-grid img:hover {
/* 画像の大きさが変化する */
transform: scale(1.1);
transition: 0.6s all ease !important;
cursor: pointer;
}
完成図
完成したものがこちらです。

まとめ
今回はGraphqlについてやっていきました。
もうそろそろ本格的にウェブサイトの作成に移っていきたいと思います!
最後まで読んで頂きありがとうございました。