More than 5 years have passed since last update.

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

Posted at 2020-04-26

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

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

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 を利用して、今回引き出したデータを実際に ブログリストページ に、表示させたいと思います.

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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