こんにちは !
今日は レイアウト コンポーネント について、学びたいと思います.

レイアウトとコンポーネント

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 で参照することができます.
ここでは、記事は マークダウン ファイルとしてあります.

実際にやってみましょう. 全記事のデータはこちらからダウンロードして 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 を利用して、今回引き出したデータを実際に ブログリストページ に、表示させたいと思います.

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

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