• 商品一覧
  • お問合せ
  • ブログ記事
お仕事の依頼
好かれるマーケティング研究室のデフォルトサムネイル画像

Gatsbyで新規ページをコンポーネントを使って作成する

2021-11-11
前回の記事では、Gatsbyのインストールと最初のウェブサイトの作成を行いました。
「index.jsを変更したら、ページの内容が変わったけど…新しいページはどうやって作ったらいいんだろう?」
あなたもそう考えている頃かもしれません。新しいページを作ることができるようになれば、簡単にGatsbyを使える気分になってきますからね!
さて、さっそくあなたのウェブサイトのトップページを作ってみましょう。

Gatsbyでトップページを作成する

まず最初に前回作成したあなたのプロジェクトを見てみましょう。
プロジェクトのpagesフォルダ
src/pagesフォルダの中に、最初にGatsbyが生成したサンプルサイトが含まれています。
index.jsにはトップページの内容、404.jsには存在しないページにアクセスしたときに表示される内容が書かれています。

index.jsの変更

それではindex.jsを新しく作り直してみましょう。
今回、最小のコードでページを実装してみます。最小限なにをすればいいかわかっていれば、後からちょっとずつ変更していくのは楽ですからね!
まず、index.jsに書かれている内容はもういらないので、一旦全部消してしまいましょう。
Gatsbyのページを作成する時に、最初に行うべきことはReactをインポートすることです。前回の記事でも説明したようにGatsbyではReactの技術を使っています。これをインポートすることで、後で説明するJSXを書くことができるようになります。
# src/pages/index.js

import * as React from 'react'
次に、トップページの内容を返すコンポーネントを作成します。
コンポーネントとは、ページの内容を細かいパーツに分解したものと考えてください。
例えば、ヘッダーの部品だったり、フッターの部品、画像を表示する部分など、いろんなパーツを作ることができます。最終的なページはこれらのパーツを組み合わせたものものということになります。
コンポーネントを作るには、あなたの好きな名前をつけて、returnの中にJSX形式で書いて返すようにします。JSXはJavascriptを拡張したもので、HTMLの文と似ています。今回はTopPageという名前にして、"Hello World!"を表示するだけのページを実装します。
# src/pages/index.js

import * as React from 'react'

const TopPage = () => {
 return (
   <h1>Hello World!</h1>
 )
}
最後にこのコンポーネントをexportして、TopPageのコンポーネントがこのプロジェクトの他の部分で使えるようにします。
# src/pages/index.js

import * as React from 'react'

const TopPage = () => {
 return (
   <h1>Hello World!</h1>
 )
}

export default TopPage
注意点としては、returnでJSXを返すとき、全ての要素が1つのタグの中に入っているようにしてください。下のコードは<h1>で全て囲まれているのでOKです。
<h1>Hello World!</h1> 
次のコードは2つの要素があるのでNGです。
<h1>Hello World!</h1>
<h2>Does not work</h2>
こうした場合、例えば全体を<div>や<>などのタグで全体を覆ってしまえば大丈夫です。
<>
  <h1>Hello World!</h1>
  <h2>This works!</h2>
</>
それでは、index.jsを保存して、どのようなページになったか、みてみましょう!以下コマンドを実行して、ローカル開発サーバーを立ち上げましょう。
gatsby develop
後は、下のアドレスにアクセスすれば、ページを表示できます。
http://localhost:8000/
ちゃんとHello World!が表示されていますね!
GatsbyのHelloWorld

Aboutページを作成する

トップページを作成したので、今度は新しいページを作ってみましょう。
新しいページは、トップページと同じようにsrc/pagesフォルダ内に.jsファイルを追加すれば作成できます。簡単ですね!
about.jsというファイルをsrc/pagesに作成しましょう。作成する内容は先程のトップページとほとんど変わりません。内容を少しだけ変えてAboutページっぽくしておきます。
# src/pages/about.js

import * as React from 'react'

const AboutPage = () => {
 return (
   <main>
     <h1>Aboutページ</h1>
     <p>このページはGatsbyで作成したページです</p>
   </main>
 )
}

export default AboutPage
これだけで、Aboutページが作成できました。あとはローカルサーバーを起動している状態で、以下のアドレスにアクセスすればこのページをブラウザで閲覧できます。
GatsbyのAboutページ
簡単ですね!

Gatsbyの部品コンポーネントを作成する

ここまでは1つのページを1つのコンポーネントとして作成してきました。しかし、ページの一部をコンポーネントとして、作成することもできます。
ページを細かいコンポーネントにわけて作成することで、簡単にそのパーツを再利用することができます。
例えば、全てのページでヘッダーを表示させたいときに、毎回同じコードを書いていたとします。同じコードを何度も書くのは面倒ですし、プログラマー的によい習慣でもありません。1箇所を修正したくなった時に、全てのページのコードを変更しないといけないので大変な作業になってしまいます。
もしヘッダーをコンポーネントとして作っていれば、ヘッダーのコンポーネントを修正するだけで、すべてのページのヘッダーが更新されるようになります。
もう1つ重要な点として、コンポーネントには引数を追加することができます。これによって違う引数を渡すことで、コンポーネントが表示する内容を変更することができるということです。
例えば、Amazonのように商品がずらーっと並んでいるようなページを作りたいとします。これらの商品の1つ1つは同じようなデザインで表示をされていますよね。商品の画像、商品の名前、星いくつのレビュー…のような構成になっているのがわかります。
コンポーネントに商品の情報を渡せば、商品の表示が簡単に量産できるようになるのです。
まずはコンポーネントをどのように使うのか見てみましょう。Gatsbyでは既に実装されているコンポーネントがあるので使ってみましょう。

GatsbyのLinkコンポーネントの使い方

GatsbyではLinkコンポーネントというのが実装されています。Linkを使うことによって、Gatsby ウェブサイト内にある他のページに遷移できるリンクを付けることができます。
「<a>でいいんじゃないの?」と思うかもしれませんが、Gatsbyのウェブサイトに特化してpreloadingなどができるのが特徴です。
preloadingとは、例えばリンクがユーザーのブラウザで表示された時に、その時点からリンク先のページの読み込みを始めます。これによって、遷移先のページをより早く表示できるようになります。ただし、対応しているのは現在のGatsbyウェブサイト内へのリンクだけなので、外部サイトに飛ぶときは<a>を使いましょう。
それではLinkコンポーネントを使って、トップページからAboutページに飛べるようにしてみましょう。
GatsbyのLinkコンポーネントを使うために、Linkをインポートし、Aboutページへのリンクを追加します。LinkのコンポーネントにAboutページのpathを、toの引数として渡して、Aboutページに移動するようにします。
# src/pages/index.js

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

const TopPage = () => {
 return (
   <div>
     <h1>Hello World!</h1>
     <p>これは新しく作ったページです</p>
     <Link to="/about">Aboutページへ</Link>
   </div>
)
}

export default TopPage
GatsbyLinkを使ったページ
トップページから、Aboutページに飛ぶことができるようになりました。

GatsbyでLayoutコンポーネントを作成する

1つ気づいたことがあると思います。先ほどリンクを追加したことで、Aboutページに飛ぶことができるようになりましたが、Aboutページからトップページに戻るリンクがありません。
もちろん、Aboutページにも同じようにトップページに戻るリンクを追加してもいいでしょう。でもこの同じような作業が、何十、何百と増えてくるとすごい面倒ですよね。
そこでウェブサイトの基本的なレイアウトを作成して、Gatsbyウェブサイトのどのページからでもトップページに戻れるようにしましょう。そのために、ページの内容を渡すことができるLayoutコンポーネントを作成します。
Layoutのコンポーネントでは、ヘッダーやフッターなどのパーツを組み合わせて、表示されるページの基本的な構成を作るコンポーネントにします。
このコンポーネントに、index.jsやabout.jsの内容を追加すれば、レイアウトに沿ったページの出来上がりです。
コンポーネントを作成するときは、src/componentsフォルダ内に作成して整理しておきましょう。srcフォルダ内にcomponentsフォルダを作成し、フォルダの中にlayout.jsを作成しましょう。
Gatsbyコンポーネントの構成
これと一緒にヘッダーとフッターのコンポーネントも作っておきます。header.jsとfooter.jsのファイルも作成してください。
ヘッダーとフッターは非常にシンプルな内容なので、先に作ります。
# src/components/header.js

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

const Header = () => {
 return (
   <nav>
       <ul>
           <li><Link to="/">Home</Link></li>
           <li><Link to="/about">About</Link></li>
       </ul>
   </nav>
 )
}
export default Header
ここまでの内容を読んだあなたなら、このファイルの内容はすぐに理解できるはずです。ヘッダーには、今あるトップページとAboutページの2つへのリンクをつけておきます。これがあればすぐに他のページに移動できます。
# src/components/footer.js

import * as React from 'react'

const Footer = () => {
 return (
   <div>
       <p>これはフッターです</p>
   </div>
 )
}
export default Footer
footer.jsのフッターも同じように作りますが、今のところ特に表示させたいものもないので、単純にこの部分がフッターだとわかるようにしておきます。
最後にこれらのコンポーネントをまとめた、Layoutコンポーネントをlayout.jsに実装します。
# src/components/layout.js

import * as React from 'react'
import Header from '../components/header'
import Footer from '../components/footer'

const Layout = ({ pageTitle, children }) => {
 return (
   <>
     <title>{pageTitle}</title>

     <Header />

     <main>
       <h1>{pageTitle}</h1>
       {children}
     </main>

     <Footer />
   </>
 )
}

export default Layout

先程作成したHeaderとFooterをインポートして、このファイル内で使えるようにしています。そして、メインコンテンツの前にヘッダーを置き、後ろにフッターを置いています。
これでこのウェブサイトのレイアウトが完成しました。あとはこのレイアウトをindex.jsとabout.jsで使うようにしてあげるだけです。
# src/pages/index.js

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

const TopPage = () => {
 return (
   <Layout pageTitle="TopPage">
     <h1>Hello World!</h1>
     <p>これは新しく作ったページです</p>
   </Layout>
)
}

export default TopPage
# src/pages/about.js

import * as React from 'react'
import Layout from '../components/layout'
const AboutPage = () => {
 return (
   <Layout pageTitle="About Page">
     <h1>About</h1>
     <p>このページはGatsbyJSで作成したページです</p>
   </Layout>
 )
}
export default AboutPage
一番外側の要素を<div>から<Layout>に変えています。今後新しいページを作るときも、このように<Layout>で囲んであげれば、同じようなレイアウトでページを作成することができるようになります。
ページを表示してみると、両方のページにリンクが表示され、一番下にはフッターが表示されています。
Gatsbyコンポーネントを使ったトップページ
Gatsbyコンポーネントを使ったAboutページ

まとめ

このように新しいページを作れるようになれば、自由自在にウェブサイトを更新できるようになりますね!
…と言いたいですが、Gatsbyが本領を発揮するのはここからです。次回、ここまで作成したウェブサイトを、gitにアップロードして、自動的にビルドとデプロイができるようにしましょう。
この記事はnoteにも投稿しています

無料メルマガ

今すぐもっと好かれる!

プロフィール

西松 大輝:マーケティング・サイエンティスト

数字から愛へ
・「何を変えるか?」を行動経済学・TOCLSSで分析する。
・「何を伝えるか?」を戦略・マーケティングで明確にする。
・「何を測定するか?」を機械学習・ITで支援する。

"全部"やらなくっちゃあならないってのが 「マーケティング・サイエンティスト」のつらいところだな。
覚悟はいいか?僕はできてる
  • お仕事の依頼
  • お問合せ
  • プライパシーポリシー
  • 特定商取引法に基づく表記
2019-2022, 好かれるマーケティング研究室©