Gatsby.js スタティックサイトのチュートリアル Part 2

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart2です。今回はページコンポーネントを作成しCSSモジュールでスタイリングする方法を確認します。また Gatsby Link API を使用してページ遷移するリンクの作成方法も確認します。

ページコンポーネントの作成

Gatsbyではsrc/pages/内のjsファイルがページとして認識されます。src/pages/index.jsがホームページ（トップページ）となるのでまず編集してみましょう。

src/pages/index.js

import * as React from 'react'

const IndexPage = () => {
  return (
    <main>
      <h1>Gatsby Static Site Tutorial</h1>
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </main>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

Reactを読み込み、コンポーネントを定義しています。Gatsby Head API でタイトルを指定しています。ブラウザでlocalhost:8000にアクセスすれば表示が確認できます。

それではページを追加していきましょう。このチュートリアルではナビゲーションメニューからホームページ、ブログ一覧のページ、コンタクトフォームのページへ遷移できるリンクを作成していくのでブログ一覧とコンタクトフォームのページの土台を下記のように作成しておきましょう。

src/pages/blog.js

import * as React from 'react'

const BlogPage = () => {
  return (
    <main>
      <h1>Blog Page</h1>
      <p>Blog list goes here...</p>
    </main>
  )
}

export const Head = () => <title>Blog</title>

export default BlogPage

http://localhost:8000/blog/にアクセスすれば表示が確認できます。

src/pages/contact.js

import * as React from 'react'

const ContactPage = () => {
  return (
    <main>
      <h1>Contact</h1>
      <p>Contact form goes here...</p>
    </main>
  )
}

export const Head = () => <title>Contact</title>

http://localhost:8000/contact/にアクセスすれば表示が確認できます。

それぞれのページができたのでナビゲーションメニューにリンクを作成していきましょう。

レイアウトコンポーネントの作成

ナビゲーションメニューは各ページに共通するものなのでレイアウトコンポーネントに作成していきます。srcフォルダ内にcomponentsフォルダを作成してそのなかに作成します。サイト内のページを遷移するリンクには Gatsby Link API を使用します。プリロードしてくれる機能があるので表示が高速になります。

src/components/layout.js

import * as React from 'react'
import { Link } from 'gatsby'

const Layout = ({ pageTitle, children }) => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
	  <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <main>
        <h1>{pageTitle}</h1>
        {children}
      </main>
    </div>
  )
}

export default Layout

Link API をimportして使用します。LayoutコンポーネントにpropsとしてpageTitleとchildrenを渡すようにします。作成したLayoutコンポーネントを各ページで読み込む必要があるためそれぞれ下記のように変更します。

src/pages/index.js

import * as React from 'react'
import Layout from '../components/layout'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

src/pages/blog.js

import * as React from 'react'
import Layout from '../components/layout'

const BlogPage = () => {
  return (
    <Layout pageTitle="Blog">
      <p>Blog list goes here...</p>
    </Layout>
  )
}

export const Head = () => <title>Blog</title>

export default BlogPage

src/pages/contact.js

import * as React from 'react'
import Layout from '../components/layout'

const ContactPage = () => {
  return (
    <Layout pageTitle="Contact">
      <p>Contact form goes here...</p>
    </Layout>
  )
}

export const Head = () => <title>Contact</title>

export default ContactPage

これで各ページにリンクがつけられました。index.jsだけ表示を確認しておきます。

スタイリングを追加していきましょう。

CSSモジュールでスタイリング

Gatsbyで作成するサイトのスタイリング方法は色々ありますが、CSSモジュールが使いやすい印象なので公式のチュートリアル同様にCSSモジュールでスタイリングしていきます。

CSSモジュールを使用するとコンポーネント単位でスタイリングができるため、他のコンポーネントのスタイリングとの衝突を避けられます。またJSX内でのクラスネームの記述が短くできるのでJSXの構成がわかりやすい記述にできるところがおすすめポイントです。

それではLayoutコンポーネントにcssを追加していきます。src/componentsフォルダ内にlayout.module.cssファイルを作成して下記のようにします。

layout.module.css

.container {
  margin: auto;
  max-width: 500px;
  font-family: sans-serif;
}

.nav-links {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.nav-link-item {
  padding-right: 2rem;
}

.nav-link-text {
  color: black;
}

これをLayoutコンポーネントで読み込みます。layout.jsを下記のように変更します。

import * as React from 'react'
import { Link } from 'gatsby'
import {
  container,
  navLinks,
  navLinkItem,
  navLinkText
} from './layout.module.css'

const Layout = ({ pageTitle, children }) => {
  return (
    <div className={container}>
      <nav>
        <ul className={navLinks}>
          <li className={navLinkItem}>
	    <Link to="/" className={navLinkText}>Home</Link>
	  </li>
          <li className={navLinkItem}>
	    <Link to="/blog" className={navLinkText}>Blog</Link>
	  </li>
	  <li className={navLinkItem}>
	    <Link to="/contact" className={navLinkText}>Contact</Link>
	  </li>
        </ul>
      </nav>
      <main>
        <h1>{pageTitle}</h1>
        {children}
      </main>
    </div>
  )
}

export default Layout

layout.module.cssをimportして各クラスを読み込みます。.module.cssファイルで.nav-linksといったケバブケース（kebab-case）で宣言されたクラス名は.jsファイルではnavLinksといったキャメルケース（camel-case）に自動的に変換されます。表示を確認してみましょう。

これで各ページにナビゲーションリンクが設置できました。今回は以上です。