More than 1 year has passed since last update.

Gatsby.js ページの追加・共通設定する方法を学ぶ

Posted at 2022-08-13

はじめに

こちらの記事の続きです。
gatsby-starter-hello-worldのスターターを使ってプロジェクトを作成した状態から開始になります。
以下の操作は全てDokcerコンテナ上で行っています。

ゴール

Gatsby.jsでページの追加・共通設定する方法を学ぶ

ページを追加して、ページ間を遷移できるようにする
全ページに共通なCSSやレイアウトを作成して適用する
404エラーのページを作成する
headタグを設定する

参考

ページ作成

Gatsby.jsではsrc/pagesにファイルを作成すると、localhost:8000/ファイル名のURLで新しいページが作成される

手順

src/pagesに任意のJSを作成する

    ├── src
    │   └── pages
    │       ├── index.js
    │       └── page2.js ←作成する

page2.js

import React from "react";

export default function Page2() {
    return <div>Page2です</div>;
}

【確認】

作成したページにアクセスする
localhost:8000/page2にアクセスすると作成したページが表示できる

gatsby develop中にファイルを作成してもwatchされているので、再起動せずに作成したページにアクセスできる

画面遷移

Gatsby.jsではリンクを作るための<Link>コンポーネントが提供されていて、これを使うことでページの遷移が手軽に実装できる

手順

各ページに<Link>を追加する
to=""には遷移先のパスを記載する

index.js

import React from "react";
import {Link} from "gatsby";

export default function Home() {

  return (
    <>
        <div>Hello world!</div>
        <Link to="/page2">別のページへ</Link>
    </>
  );
}

page2.js

import React from "react";
import { Link } from "gatsby";

export default function Page2() {
    return (
        <>
            <div>Page2です</div>
            <Link to="/">ホームに戻る</Link> 
        </>
    );
}

【確認】

ページのリンクをクリックするとそれぞれのページに遷移できる

ページ全体にCSSを適用させる

プロジェクトディレクトリ直下にgatsby-browser.jsを作成し、このファイル内でcssをimportすることでページ全体にCSSを適用させることができる
(gatsby-browser.jsについてはこちらの記事に簡単にまとめています)

公式はCSSの作成場所はstaticフォルダをすすめている？

手順

. my-gatsby-site
    ├── gatsby-browser.js ←追加する
    ├── gatsby-config.js
    ├── 〜略〜
    ├── src
    └── static
        ├── styles        ←追加する
        │   └── style.css ←追加する
        └── favicon.ico

グローバル CSS ファイルを作成する
style.css
```
body {
    background-color: pink;
}
```
gatsby-browser.js を作成して、作成したCSS ファイルを読み込ませる
gatsby-browser.js
```
import "/static/styles/style.css"
```
開発サーバーが動いていたら再起動する
gatsby-browser.jsはビルド時に読み込まれるので、開発サーバーが動いていたら再起動する

【確認】

全てのページにCSSが適用された

全画面共通のレイアウト作成

Layoutの作成

ページ全体の配置を整えるためのLayoutコンポーネントを作成する
Layoutコンポーネントを各ページで用いることで、全ページで共通したスタイリングを適用できる

手順

    ├── src
    │   ├── components        ←追加する
    │   │   └── layout.js     ←追加する
    │   └── pages
    │       ├── index.js     ←layoutを適用する
    │       └── page2.js     ←layoutを適用する

Layoutコンポーネントを作成する
コンポーネントの子要素を引数で受け取り、共通のコンポーネントに埋め込んで返却している

layout.js

import React from "react"

const Layout = ({ children }) => {
    return (
        <div className="wrapper">
            <main>{children}</main>
        </div>
    )
}

export default Layout

作成したLayoutコンポーネントを各ページで使う

index.js

    import React from "react";
    import {Link} from "gatsby";
    import Layout from "../components/layout"; ← 追加
    
    
    export default function Home() {
    
      return (
          <Layout>  ← 追加
            <div>Hello world!</div>
            <Link to="/page2">別のページへ</Link>
          </Layout>  ← 追加
      );
    }

page2.jsも同様にする

【確認】

ヘッダーとフッターを追加

ページ全体の共通コンポーネントのLayoutコンポーネントにヘッダーとフッターを追加する

手順

    ├── src
    │   ├── components
    │   │   ├── header.js     ←追加する
    │   │   ├── fotter.js     ←追加する
    │   │   └── layout.js     ←headerとfotterを適用する
    │   └── pages
    │       ├── index.js
    │       └── page2.js

Headerコンポーネントを作成する

header.js

    import React from "react"
    import { Link } from "gatsby"
    
    export default function Header() {
        return (
            <header>
                <h1>MY SITE</h1>
                <nav class="gnav">
                    <ul class="menu">
                        <li><Link to="/">HOME</Link></li>
                        <li><Link to="/page2">PAGE2</Link></li>
                    </ul>
                </nav>
            </header>
        )
    }

Fotterコンポーネントを作成する

fotter.js

    import React from "react";
    import Layout from "../components/layout";
    
    
    export default function Page2() {
        return (
            <Layout>
                <div>Page2です</div>
            </Layout>
        );
    }

CSSを作成する

CSSはお好みで

static/styles/style.css

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html body {
        height: 100vh;
    }
    
    main {
        height: calc(100vh - 50px); /* 画面 - header */
        padding: 50px 20px;
        margin: 0 auto;
    }
    
    header {
        width: 100%;
        height: 50px;
        padding: 10px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    }
    
    .menu {
        display: flex;
    }
    
    .menu li {
        list-style: none;
    }
    
    .menu li + li {
        margin-left: 40px;
    }
    
    footer {
        width: 100%;
        height: 50px;
        padding: 10px;
        background-color: black;
        color: #fff;
    }

Layoutコンポーネントにheaderとfotterを追加する

layout.js

    import React from "react";
    import Header from "./header"; ←追加
    import Footer from "./footer"; ←追加
    
    const Layout = ({ children }) => {
        return (
            <div className="wrapper">
                <Header /> ←追加
                    <main>{children}</main>
                <Footer /> ←追加
            </div>
        )
    }
    
    export default Layout

【確認】

404ページ

Gatsby.jsでは、存在しないページにアクセスすると自動的に404ページにルーティングする
404ページの内容はsrc/pages/404.jsに記載することで反映される

gatsby developで開発サーバを立ち上げている場合は、無効なURLへアクセスしても404ページは表示されずデバッグ用のページが表示される。
404ページへのルーティングはビルドを行いサーバーを立ち上げたときのみ機能する。

404.jsがない場合の表示

gatsby developの場合
デバッグ用のページが表示される。
gatsby build→gatsby serve
404のページがないのでルーティングされない。src/pages/404.jsの作成が必要

404.jsがある場合の表示

src/pages/404.jsを作成して確認する

404.js

import React from "react";
import { Link } from "gatsby";
import Layout from "../components/layout";

export default function NotFound() {
    return (
        <Layout>
            <div className="not-found-message">
                <h1>404 Not Found</h1>
                <Link to="/">トップページへ</Link>
            </div>
        </Layout>
    )
}

gatsby developの場合
デバッグ用のページが表示される。
gatsby build→gatsby serve
404のページが表示される

SEO対策

SEOのためにheadタグの内容を最適化する
Reactではheadタグを管理できるreact-helmetというライブラリがあるのでそれを使う

react-helmetの導入

$ yarn add --dev react-helmet

SEOコンポーネントの作成

手順

SEOコンポーネントの作成

ページごとに可変の値は引数で受け取って設定する
共通の値は固定で設定する

seo.js

import React from "react";
import { Helmet } from "react-helmet";

const SEO = ({ title, description }) => {
    return (
        <Helmet
            htmlAttributes={{ lang: "ja-jp" }}
            title={`${title} | My Gatsby Site`}
            titleTemplate={`%s`}
            meta={[
                {
                    name: `description`,
                    content: description,
                },
                {
                    property: `og:title`,
                    content: title,
                },
                {
                    property: `og:description`,
                    content: description,
                },
                {
                    property: `og:type`,
                    content: `website`,
                },
                {
                    property: `og:site_name`,
                    content: `Dev Blog`,
                },
                {
                    property: `og:locale`,
                    content: `ja_JP`,
                },
            ]}
        />
    )
}

export default SEO

各ページに追加する。

index.js

    import React from "react";
    import Layout from "../components/layout";
    import SEO from "../components/seo"; ←追加
    
    export default function Home() {
    
      return (
          <Layout>
            <SEO title="TOP" description="Gatsbyを使って作ったブログです" /> ←追加
            <div>Hello world!</div>
          </Layout>
      );
    }

【確認】

ページのタイトルが設定された。

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