gatsby.js備忘録（参考動画: Net Ninja）

概要

いい感じの動画Tutorialがあったので、勉強したことをまとめる。

動画リンク

Githubレポ

1

Gatsby.jsは

• SSG
• React & GraphQL

あとはSSGのメリットとか概要の説明

2

公式ページのstarter集

gatsby のインストール

npm install -g gatsby-cli

gatsby projectの開始

gatsby new ${ディレクトリ名} ${インストールするGithubレポジトリ等}

フォルダ

reactっぽい

• node_modules/
• src/pages/
• static

3

route の話とか

gatsbyサイトの開発

gatsby develop

で起動

VSCodeのスニペット

ES7 React/Redux/GraphQL/React-Native snippets
rfc

4

Linkコンポーネントを作っていた

5

Layoutコンポーネントを作っていた

export default function Layout({ children }) {
    return (
        <div className="layout">
            <Navbar />
            <div className="content">
                { children }
            </div>
            <footer>
                <p>Copyright 2025</p>
            </footer>
        </div>
    )        
}

6

styleの追加

styleディレクトリ

global css

• global.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Montserrat";
  color: white;
}
html, body {
  min-height: 100%;
}
body {
  background: radial-gradient(at top left, rgba(146,43,225,1) 0%, rgba(43,9,107,1) 100%);
  background-repeat: no-repeat;
}
p {
  margin: 16px auto;
  line-height: 1.5em;
}

/* layout & nav */
.layout {
  max-width: 1200px;
  margin: 0 auto;
}
nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 40px auto;
}
nav .links {
  display: inline-block;
  text-align: right;
}
nav a {
  display: inline-block;
  margin-left: 20px;
  font-weight: 400;
  padding-bottom: 8px;
  border-bottom: 3px solid transparent;
}
nav a:hover {
  border-color: white;
}
footer p{
  text-align: center;
  color: #bbb;
  margin: 40px auto;
}

個別のcss

cssの定義

• {module-name}.module.css

使い方

import styles from '../styles/{module-name}.module.css'

<div className={styles.property} />

7

staticファイル
(最適化されない)

8

graphQL

GraphiQLのアクセスのしかた

9

metadataの定義

gatsby-config.jsを編集

module.exports = {
    siteMetadata: {
        ...
    }
}

graphQL

query MyQuery {
    site {
        siteMetadata {
            copyright
            description
            title
        }
    }
}

jsファイルの中での使い方(ページクエリ)

import { graphql } = 'gatsby.js'

export const query = graphql`
(graphql content)
`

自動的にpropにgraphQLの結果が渡される

10

graphQL (usatic query)

const data = useStaticQuery(graphql`
(graphql content)
`)

以下の点に注意

• クエリ変数が使えない
• ファイルの頭文字大文字にしないとエラーが出る
• コンポーネント内ではuseStaticQueryは一度しか使えない

11

gatsby.jsのdata source plugin

gatsby-config.js

module.exports = {
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                // The unique name for each instance
                name: `pages`,
                // Path to the directory
                path: `${__dirname}/src/pages/`,
            },
        },
    ],
}

gatsby-config.jsを変更したら、再度gatsby develop

12

gatsby-transformer-remarkを使う
markdownをhtmlに変換してくれる

13

query MyQuery {
    allMarkdownRemark {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
}

reactで配列が出てきたら要素のタグにidを指定する

14

graphqlでソートする
タイトルのアルファベットでソートする例

query MyQuery {
    allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
}

15

graphqlにおいて複数のクエリをやるには単に並列すれば良い

query MyQuery {
    allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
    site {
        siteMetadata{
            contact
        }
    }
}

別名をつける

query MyQuery {
    projects: allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
    contact: site {
        siteMetadata{
            contact
        }
    }
}

16

画像の処理

npm install gatsby-image # イメージコンポーネントへのアクセス
npm install gatsby-transformer-sharp gatsby-plugin-sharp # graphQLで処理する

image fulidはレスポンシブ画像となる
...name のようにすることで複数のものをまとめられる

query MyQuery {
    file(relativePath: {eq: "banner.png"}) {
        childImageSharp {
            fulid {
                ...GatsbyImageSharpFluid
            }
        }
    }
}

17

graphQLにおいてrelative pathはfile nodeになる...?
そしてそのnodeのchildImageSharpを利用して画像を表示できる

<Img fuild={project.frontmatter.thumb.childImageSharp.fluid} />

18

テンプレートファイルの作成

19

ページの生成

gatsby-node.js

exports.createPages = async({ graphql, actions}) => {
    const { data } = await graphql(`
        query Projects {
            allMarkdownRemark {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
        }
    `)

    data.allMarkdownRemark.nodes.forEach(node => {
        actions.createPage({
            path: '/projects/' + node.frontmatter.slug,
            component: path.resolve('./src/templates/project-details.js'),
            context: { slug: node.frontmatter.slug }
        })
    })
}

20

graphQL変数

export const query = graphql`
    query Project Page($slug: String) {
        markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            ......
        }
    }
`

21, 22

デプロイ等

まとめ

gatsby.jsのおおよその仕組みが理解できた。
特にGraphQLに詳しくなった