Gatsby.jsでテンプレート(コンポーネント)を分割する方法

今Gatsby.js(= React.jsベースの静的サイトジェネレーター)でブログアプリを作っていて、各ページでヘッダーやフッターやサイドバーを共通化したいケースでどうやるかをメモっておく。

前提

Default Starterだとヘッダーはもともとheader.jsとしてコンポーネント化されているけど、フッター部分は共通(親)テンプレートである src/components/layout.js に記述されている。

そこで、フッターもヘッダーと同様にコンポーネント化する方法が下記。

1. 共有パーツ化したい部分のファイルを作る

今回はフッター用のファイルをコンポーネントフォルダ内に作成する。

src/components/footer.js

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

const Footer = ({ siteTitle }) => (
    <footer className="footer-common">
        <div>
            <h1 style={{ margin: 0 }}>
                <Link to="/">
                    {siteTitle}
                </Link>
            </h1>
        </div>
    </footer>
)

Footer.propTypes = {
    siteTitle: PropTypes.string,
}

Footer.defaultProps = {
    siteTitle: ``,
}

export default Footer

HTML部分は適当に書き換えてください。

2. コンポーネントを読み込みたい親ファイルでインポートする

今回用意するフッターは全ページ共通で使いたいので、src/components/layout.js で呼び出すよう設定を行う。

import Footer from "./footer"
...

3. 同じファイル内で、コンポーネントを呼び出したい箇所にタグを記載する

先ほどコンポーネント化したフッター部分を呼び出したい箇所に<Footer />を書く。僕は src/components/layout.js で下記のようにした。

...
  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <main>{children}</main>
      <Footer />
    </>
  )
...

全てのHTML(厳密にはHTMLだけではないが)タグは閉じられている必要があるため、<Footer />も最後にスラッシュが必要。これによりSublime Textのスニペットの配色がバグるので、GatsbyというかReactの記法をうまくカバーしてくれるプラグインを探し中・・・。


以上、Reactについてもフレームワークについてもまだまだ基本的なポイントから勉強中で、ミスっていたらツッコミいただけると嬉しいです。

Written by Ryo Konishi