GatsbyJSのLayoutを設定しよう

GatsbyJSのレイアウトを修正していきましょう。

/components/header.js
           /layout.js
           /layout.css
           /image.js
           /seo.js

という構造になっていますが、この構造だとlayout.cssに全部CSSを書く構造にしたりするとあとあと辛くなります。
そこで、今回は以下のようにフォルダ構造をしておくと後々見通しが良くなると考えました。

/components/header/index.js
           /layout/index.js
                  /layout.css
           /image.js
           /seo.js

このように設定するとコンポーネントごとに分かれてCSSが読み込めるので良い感じにデザインできるのではないでしょうか？

コンポーネントを追加する

Layout/index.jsを見てみましょう。

          <footer>
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>

ここの部分をコンポーネントで切り出してindex.jsに組み込んでいきます。
components/footer/index.jsを作成して以下のように記述してみます。

import React from 'react'

const Footer = () => (

    <footer>
    © {new Date().getFullYear()}, Built with
    <a href="https://www.gatsbyjs.org">Gatsby</a>
    <p>Myblog</p>
  </footer>

)
export default Footer

getFullYear()メソッドは、指定された日付のローカルタイムに沿って、その年を返します。
よく似た表記にgetYear()がありますがgetYear()は、Web標準から削除されています。 廃止される過程にあるので使用しないでください。

続いて/Layout/index.jsを以下のように修正

import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'

import Footer from '../footer'
import Header from '../header'
import './layout.css'

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          {children}
          <Footer /> 
        </div>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

import Footer from '../footer'で読み込んで`