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

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

### 動画リンク

https://www.youtube.com/watch?v=Qms4k6y7OgI&list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB&pp=iAQB

### Githubレポ

https://github.com/iamshaunjp/gatsby-tutorial

## 1
Gatsby.jsは
- SSG
- React & GraphQL

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

## 2

### 公式ページのstarter集

https://www.gatsbyjs.com/starters/

### `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コンポーネントを作っていた
```tsx
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

```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

使い方
```jsx
import styles from '../styles/{module-name}.module.css'

<div className={styles.property} />
```

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

## 8
### graphQL
GraphiQLのアクセスのしかた

http://localhost:8000/__graphql

## 9
### metadataの定義
gatsby-config.jsを編集

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

### graphQL
```graphql
query MyQuery {
    site {
        siteMetadata {
            copyright
            description
            title
        }
    }
}
```

### jsファイルの中での使い方(ページクエリ)
```js
import { graphql } = 'gatsby.js'

export const query = graphql`
(graphql content)
`
```
自動的にpropにgraphQLの結果が渡される

## 10
### graphQL (usatic query)
```js
const data = useStaticQuery(graphql`
(graphql content)
`)
```

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

## 11
gatsby.jsのdata source plugin

https://www.gatsbyjs.com/plugins

https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/

gatsby-config.js
```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
```graphql
query MyQuery {
    allMarkdownRemark {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
}
```

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

## 14
graphqlでソートする
タイトルのアルファベットでソートする例
```graphql
query MyQuery {
    allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
}
```

## 15
graphqlにおいて複数のクエリをやるには単に並列すれば良い
```graphql
query MyQuery {
    allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
    site {
        siteMetadata{
            contact
        }
    }
}
```

別名をつける
```graphql
query MyQuery {
    projects: allMarkdownRemark(sort: {fields: frontmatter__title, order: ASC}) {
        nodes {
            frontmatter {
                slug
                stack
                title
            }
            id
        }
    }
    contact: site {
        siteMetadata{
            contact
        }
    }
}
```

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

image fulidはレスポンシブ画像となる
`...name` のようにすることで複数のものをまとめられる
```graphql
query MyQuery {
    file(relativePath: {eq: "banner.png"}) {
        childImageSharp {
            fulid {
                ...GatsbyImageSharpFluid
            }
        }
    }
}
```

## 17
graphQLにおいてrelative pathはfile nodeになる...?
そしてそのnodeのchildImageSharpを利用して画像を表示できる
```jsx
<Img fuild={project.frontmatter.thumb.childImageSharp.fluid} />
```

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

## 19
ページの生成

gatsby-node.js
```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変数
```jsx
export const query = graphql`
    query Project Page($slug: String) {
        markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            ......
        }
    }
`
```
## 21, 22
デプロイ等

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