ことばを学ぶ　LEARN GATSBY 週間 #3日目

こんにちはー！　お昼にマック 食べました.

前回の続きです.

`graphQL` に入る前に、いったんここでスタイルの整理をしておきたいと思います. 
`src` フォルダ内に `css` フォルダを作り、`main.scss` `header.module.scss` を作成します.
`main.scss` は全体的なスタイル、`header.module.scss` は `header.js` 内のみ有効なスタイルを意味します.

スタイルを書いていきます !

```header.module.scss
.wrapper {
    padding: 25px 20px 10px 20px ;
    font-size: 20px ;
    box-shadow: 0 0 4px  #a1aaac ;

    nav {
        display: flex;
        justify-content: center;
        ul{
            width: 100%;
            max-width: 600px;
            display: flex;
            justify-content: space-around;
            li {
                &:nth-child(n+2){
                    padding-left: 23px;
                }
            }
        }
    }
}

```
```main.scss
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Karla,sans-serif;
}
a , li {
    color:#110f11;
    list-style: none;
    text-decoration: none;
    &:hover {
        color: #656768;
    }
}

.main_wrapper{
    width: 100%;
    padding: 30px 70px ;
}

```
そして、`header.js`、`common.js` にスタイルを追加します. `className` の追加も忘れないようにしましょう.

```header.js
import React from 'react'
import { Link } from 'gatsby'
+import '../css/main.scss'
+import headerStyle from '../css/header.module.scss'

const Header = () => {
    return (
>        <div className={headerStyle.wrapper}>
            <nav>
                <ul>
                    <li>
                        <Link to='/'>Home</Link>
                    </li>
                    <li >
                        <Link to='/bloglist'>BlogList</Link>
                    </li>
                    <li >
                        <Link to='/about'>About</Link>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

export default Header
```
```common.js
import React from 'react'
import Header from '../components/header'
+import  '../css/main.scss'

const Layout = (props) => {
    return (
        <div>
            <Header />
>            <div className="main_wrapper">{props.children}</div>
        </div>
    )
}

```

#GrapQLを使って、ブログリストを作る

本題に入りましょう !
`src/pages/bloglist.js` を以下のように記述します.

```bloglist.js
import React from 'react'
import { graphql , useStaticQuery } from 'gatsby'
import Layout from '../Layouts/common'

const BlogList = () => {
    const data = useStaticQuery(graphql`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        frontmatter {
                            title
                            date (formatString: "MMMM DD, YYYY")
                        }
                        excerpt
                    }
                }
            }
        }
    `)
        console.log(data)
    return (
        <Layout>
            <h1>This is BlogList  </h1>
            <h2>Some contents coming soon ...</h2>
        </Layout>
    )
}

export default BlogList
```

前回 GraphQLのplaygroundで書いたクエリとほぼ同じものをここに直接、`data` として書きました.
本当にdataとして入っているか、`console.log` を記述して、実際にブラウザで確認してみましょう.
開発用サーバーを起動し ( `npm run develop` )　`F12` キーで `console` を開くと、
`{allMarkdownRemark: {…}}` オブジェクトが見えます. 

横の三角ボタンを押して詳しく見ていくと、どうやら、`edges` に長さ `6` の配列があることが分かります. 
 この一つ一つに記事のデータが入っているわけです. さらに深く見ていくと、最終的に `title` `date` `excerpt` というデータが見つかります.

よって、`data` という値を利用して、ブログリストを書いていくことになります.
もちろん、一つ一つリストを書いていくのではなく、`map` というメソッドを使って、一気に記述させます !
やってみましょう.

#bloglist.js

`bloglist.js` は最終的にこんな感じになります.

```bloglist.js
import React from 'react'
import { graphql , useStaticQuery } from 'gatsby'
import Layout from '../Layouts/common'

const BlogList = () => {
    const data = useStaticQuery(graphql`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        frontmatter {
                            title
                            date (formatString: "MMMM DD, YYYY")
                        }
                        excerpt
                    }
                }
            }
        }
    `)
        console.log(data)
    return (
        <Layout>
            <h1>This is BlogList  </h1>
            <ol>
             {data.allMarkdownRemark.edges.map( ({node}) => {
                return (
                    <li>
                        <h2>{node.frontmatter.title}</h2>
                        <p>{node.frontmatter.date}</p>
                    </li>
                )
             })}
            </ol>
        </Layout>
    )
}

export default BlogList
```
保存すると、すぐにずらーっと記事ごとに、タイトル、日付が表示されます.
これで、ブログリストを表示するということができました !

しかし、ここで重要なことがあります. それはブラウザの `F12` キーを押して、`console` を見てみると、以下のような警告が出ていることが分かります.

```
Warning: Each child in a list should have a unique "key" prop.
```
`map` メソッドを利用するときは、それぞれの記事ごとに `ユニーク` な `キー` を付ける必要があります.
やってみましょう.

```bloglist.js
                     <li key={node.frontmatter.title}>
                        <h2>{node.frontmatter.title}</h2>
                        <p>{node.frontmatter.date}</p>
                     </li>
```
これで、警告を消すことができました!

#次回予告
今回作った、ブログリストページから、実際に個々の記事のリンクを通して、記事ページに移動するための、設定、ページの作成を行いたいと思います.

ここまで読んでくださってありがとうございました.