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

こんにちは !
今日は `レイアウト` `コンポーネント` について、学びたいと思います.
#レイアウトとコンポーネント
`src` 内に　`components` フォルダと `layouts` フォルダを作成します. 
`src` 内には、これで3つのフォルダ (`components` , `layouts` , `pages` ) が存在することになります.

`components` フォルダには、ヘッダーやフッター、サイドバーなどの `部品 (コンポーネント)` を入れます.
`layouts` フォルダには、ページの `レイアウト` を入れます.

部品を組み込んだレイアウトをページで使うことによって、コードが見やすくなるため、管理しやすくなります.　また一度作ったコンポーネントは使いまわすことができます.
#ヘッダーを作る
`components` フォルダ内に、`header.js` というヘッダーコンポーネントを作成します.
中身を以下のようにします.

```header.js
import React from 'react'
import { Link } from 'gatsby'

const Header = () => {
    return (
        <div>
            <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
```
#レイアウトを作る
まず最初に `layouts` フォルダに `common.js` ファイルを追加します.
中身を以下のようにします.

```common.js
import React from 'react'
import Header from '../components/header'

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

export default Layout
```

`Layout` を使って `index.js` `about.js` の中身を少し変えてみましょう.

```index.js
import React from 'react'
import Layout from '../Layouts/common'

const Home = () => {
    return (
        <Layout> 
            <h1>This is Home </h1>
            <h2>Some contents coming soon ...</h2>
        </Layout>
    )
}

export default Home 
```

```about.js
import React from 'react'
import Layout from '../Layouts/common'

const About = () => {
    return (
        <Layout>
            <h1>This is About Page </h1>
            <p>About Page coming soon ...</p>
        </Layout>
    )
}

export default About 
```
開発用サーバーに移動して ( `gatsby develop` ) 、どうなっているのか確認してみましょう.

`Home` リンク、 `About` リンクを押してみます.  Layout である `common.js` 内の ヘッダーコンポーネント  `<Header/>` の部品は変化せず、`{props.children}` という要素が変化していることがわかります.

`index.js` `About.js` 内の `<Layout>` で囲まれた部分が `common.js` 内の `{props.children}` に挿入されているわけです.

`BlogList` リンクを押してみると、なにやらエラーが表示されるようです. 
`pages` ディレクトリの中に `bloglist.js` ファイルを追加してみましょう.
この `ブログリストページ` を記事一覧ページにしたいと思います !

ここで一つ問題になってくるのが、どうやって記事のデータを取ってくるのかということです.
`Gatsby` では　`GraphQL` を利用してデータを簡単に取得することができます.

まず、データを扱うための便利な `Gatsby` にプラグインの設定をしてみましょう.
#gatsby-config.jsの設定
 
`gatsby-config.js` では、`gatsby` が提供している様々なプラグインを設定することができます.
 現在のディレクトリのどこかに、すべての記事のデータを置いておき、この `gatsby-config.js` にて、そのパスを指定するだけでデータを `GraphQL` で参照することができます.
ここでは、記事は `マークダウン` ファイルとしてあります.

実際にやってみましょう. 全記事のデータは[こちら](https://github.com/nibu0215/AllBlogContents)からダウンロードして `my-blog` ディレクトリに置いてください. ( `content` という名前です)

`gatsby-config.js` を開いて、以下のように編集してください.

```gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: [
    'gatsby-plugin-sass' ,
    {
      resolve: 'gatsby-source-filesystem' ,
      options: {
        name: 'content' ,
        path: `${__dirname}/content/`
      }
    },
    'gatsby-transformer-remark',
  ],
}
```
詳しく見てみましょう.
`gatsby-plugin-sass` を入れると、スタイルに `SASS/SCSS` を利用することができるようになります.　これはとても便利なので、今のうちに入れておきます.

`gatsby-source-filesystem` によって、`content` ディレクトリ内のデータを取得し、
`gatsby-transformer-remark` によって、取得した `マークダウン` ファイルを `graphQL` にて認識できるような形に変換します.

プラグインの設定はこれで終わりです.

 実際に、プラグインをインストールしてみます.

```
npm install --save gatsby-source-filesystem node-sass gatsby-plugin-sass gatsby-transformer-remark
```
#GraphQLを使ってみる

`my-blog` 内に `.env.development` ファイルを作成し、その中身を以下のようにします.

```
GATSBY_GRAPHQL_IDE=playground
```
ターミナルで `env-cmd` をインストールします.

```
npm install --save-dev env-cmd
```
`package.json` ファイル内の `"develop"` のところを以下のように編集します.

```
"develop": "env-cmd -f .env.development gatsby develop",
```
そして、 `npm run develop` にて開発用サーバーを立ち上げます.


`http://localhost:8000/___graphql` にアクセスしてみましょう ! 
クールな `UI` を持った `GraphQL Playground` が現れました.

左側の画面に以下を打ち込んでください

```
query {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}
```
真ん中の三角ボタンを押すと、右側の画面に、`contnent` 内の `マークダウン` ファイルの情報が示されます. いま、 `content` 内にある `blog` フォルダには `6` つの記事があるので、右側の画面には、`6` つの記事の情報 (タイトル) がずらーと示されました.

このように、 `Gatsby` では簡単に、記事の情報を引き出すことができるんです. 

#まとめ

- `Layout` と `component` を使うことによってコードが見やすくなり、再利用することができる
- `GraphQL` を利用することで、データを簡単に引き出すことができる

#次回予告

次回は、`GraphQL` を利用して、今回引き出したデータを実際に `ブログリストページ` に、表示させたいと思います.

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