今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についてもフレームワークについてもまだまだ基本的なポイントから勉強中で、ミスっていたらツッコミいただけると嬉しいです。