Gatsbyブログに好きなページを追加する - エンジニアを目指す日常ブログ

はじめに

前回はGatsbyブログをスターターキットを作成して、公開した。

自分のブログに変更していくためのやり方を学ぶ。今回はページの追加とルーティングを実施する。ここではマークダウンによる記事入稿ではなく、単純にReactでページを作成する。

この記事のゴール

以下の仕組みを理解する。
- Gatsbyサイトへのページの追加方法
- ルーティングの方法
- ページ遷移方法
Gatsbyサイトに、記事ではないページを追加（Aboutページ：「このサイトについて」）し、トップページからリンクを貼る。

前回の記事

tomiko0404.hatenablog.com

前提

gatsby-starter-blogスターターキットを利用したgatsbyブログを立ち上げ済
Vagrantを開発環境として利用
Gatsby Cloudで公開済（今回は利用しないので、なくても可）

はじめに
Gatsbyのページ作成
Aboutページを作成する
- コンポーネント作成
- Webページへの反映
リンク作成
おわりに
関連記事
- つづき

Gatsbyのページ作成

公式サイトにあるとおり、

Gatsby automatically creates pages for React components that are the default export of files in the src/pages directory.

/src/pagesフォルダ配下に、ページコンポーネントを作成しておくと、対応するページを自動的に作成してくれるとのこと。

注意点①

関数をエクスポートすることでコンポーネントとして利用できる。

その際、

export default

でコンポーネント化する必要があるので注意。いつものような

export const Component () => {}

の書き方だとNG。

注意点②

.jsxファイルでは改めてReactをインポートする必要はないが、ここで作成するのは.jsなので、先頭でReactのインポートが必要。

import * as React from 'react'

404ページ

src/pages/404.jsという名前のコンポーネントを作成しておくと、404エラーページとして、存在しないURLを指定されたときに表示してくれる。

Aboutページを作成する

コンポーネント作成

Aboutページを作成してみる。

注意点①②以外はいつも勉強してきたReactの書き方と同じ。

src/pages/about.js

import * as React from 'react'

const About = () => {

    return (
        <main>
            <title>About me</title>
            <h1>このサイトについて</h1>
            <p>ayです。Gatsbyを利用し作成しています。
            </p>
            <p>お問い合わせはこちら 03-xxxx-xxxx</p>
        </main>
    )

}

export default About;

Webページへの反映

コンポーネントを作成しただけで、localhost:8000/aboutにページが作成された。ルーティング等は不要。

※私の環境ではVagrantを利用しているためlocalhost:8000が利用できずlocalhost:8001にルーティングされている（詳細不明）。

リンク作成

通常のReactと同じように<Link>コンポーネントが使える。Gatsbyにデフォルトで含まれているようなので、改めてnpm install react-router-dom等をする必要はない。

また、Gatsbyでは「プリロード」という機能がある。<Link>コンポーネントをクリックしてからロードするのではなく、クリックする前にロードしておく機能。

Gatsby コンポーネントは、プリロードLinkと呼ばれるパフォーマンス機能を提供します。これは、リンクがスクロールして表示されたとき、またはマウスをその上に置いたときに、リンクされたページのリソースが要求されることを意味します。そうすれば、ユーザーが実際にリンクをクリックしたときに、新しいページを非常にすばやく読み込むことができます。 Part 2: Use and Style React Components | Gatsby

トップページ→Aboutページのリンク追加

Linkを利用するにはインポートする必要がある。

import { Link} from "gatsby"

index.jsはgatsby-starter-blogスターターキットによりすでに実装されている。return文の適当なところにリンクを追加する。

src/pages/index.js

import * as React from "react"
import { Link, graphql } from "gatsby"

・・・省略・・・

  return (
・・・省略・・・

      {/* Aboutページを追加*/}
      <Link to="/about">このサイトについて</Link>

・・・省略・・・
  )
}

export default BlogIndex

・・・省略・・・

Aboutページ→トップページのリンク追加

AboutページにもLinkタグを追加する。

import * as React from 'react'
import { Link } from "gatsby"   // 追加

const About = () => {

    return (
        <main>
            <title>About me</title>
            <h1>このサイトについて</h1>
            <Link exact to="/">ホームへ戻る</Link>  {/* 追加 */}
            <p>ayです。Gatsbyを利用し作成しています。</p>
            <p>お問い合わせはこちら 03-xxxx-xxxx</p>
        </main>
    )

}

export default About;

リンク追加後の画面

各ページへのリンクを追加することができた。

トップページ（Aboutページへのリンク追加後）

おわりに

Gatsbyブログにページを追加してリンクを貼ることができた。

つづき

ページのデザインを変更する。 tomiko0404.hatenablog.com