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

Wordpressよりずっとはやい！静的サイトジェネレーターによる高速ウェブサイト制作【Gatsby】｜にしまつ@マーケティングエンジニア｜note

前回の記事では、Gatsbyのインストールと最初のウェブサイトの作成を行いました。

「index.jsを変更したら、ページの内容が変わったけど…新しいページはどうやって作ったらいいんだろう？」

あなたもそう考えている頃かもしれません。新しいページを作ることができるようになれば、簡単にGatsbyを使える気分になってきますからね！

さて、さっそくあなたのウェブサイトのトップページを作ってみましょう。

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

まず最初に前回作成したあなたのプロジェクトを見てみましょう。

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を返すとき、全ての要素が１つのタグの中に入っているようにしてください。下のコードは<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!が表示されていますね！

実装結果

Tutorial:Hello World | 好かれるマーケティング研究室

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ページが作成できました。あとはローカルサーバーを起動している状態で、以下のアドレスにアクセスすればこのページをブラウザで閲覧できます。

http://localhost:8000/about

簡単ですね！

実装結果

Tutorial:About Page | 好かれるマーケティング研究室

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

ここまでは１つのページを１つのコンポーネントとして作成してきました。しかし、ページの一部をコンポーネントとして、作成することもできます。

ページを細かいコンポーネントにわけて作成することで、簡単にそのパーツを再利用することができます。

例えば、全てのページでヘッダーを表示させたいときに、毎回同じコードを書いていたとします。同じコードを何度も書くのは面倒ですし、プログラマー的によい習慣でもありません。１箇所を修正したくなった時に、全てのページのコードを変更しないといけないので大変な作業になってしまいます。

もしヘッダーをコンポーネントとして作っていれば、ヘッダーのコンポーネントを修正するだけで、すべてのページのヘッダーが更新されるようになります。

もう１つ重要な点として、コンポーネントには引数を追加することができます。これによって違う引数を渡すことで、コンポーネントが表示する内容を変更することができるということです。

例えば、Amazonのように商品がずらーっと並んでいるようなページを作りたいとします。これらの商品の１つ１つは同じようなデザインで表示をされていますよね。商品の画像、商品の名前、星いくつのレビュー…のような構成になっているのがわかります。

コンポーネントに商品の情報を渡せば、商品の表示が簡単に量産できるようになるのです。

まずはコンポーネントをどのように使うのか見てみましょう。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

トップページから、Aboutページに飛ぶことができるようになりました。

実装結果

Tutorial:GatsbyLink | 好かれるマーケティング研究室

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

１つ気づいたことがあると思います。先ほどリンクを追加したことで、Aboutページに飛ぶことができるようになりましたが、Aboutページからトップページに戻るリンクがありません。

もちろん、Aboutページにも同じようにトップページに戻るリンクを追加してもいいでしょう。でもこの同じような作業が、何十、何百と増えてくるとすごい面倒ですよね。

そこでウェブサイトの基本的なレイアウトを作成して、Gatsbyウェブサイトのどのページからでもトップページに戻れるようにしましょう。そのために、ページの内容を渡すことができるLayoutコンポーネントを作成します。

Layoutのコンポーネントでは、ヘッダーやフッターなどのパーツを組み合わせて、表示されるページの基本的な構成を作るコンポーネントにします。

このコンポーネントに、index.jsやabout.jsの内容を追加すれば、レイアウトに沿ったページの出来上がりです。

コンポーネントを作成するときは、src/componentsフォルダ内に作成して整理しておきましょう。srcフォルダ内にcomponentsフォルダを作成し、フォルダの中にlayout.jsを作成しましょう。

これと一緒にヘッダーとフッターのコンポーネントも作っておきます。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ページの２つへのリンクをつけておきます。これがあればすぐに他のページに移動できます。

# 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>で囲んであげれば、同じようなレイアウトでページを作成することができるようになります。

ページを表示してみると、両方のページにリンクが表示され、一番下にはフッターが表示されています。

実装結果

Tutorial:Layout | 好かれるマーケティング研究室

まとめ

このように新しいページを作れるようになれば、自由自在にウェブサイトを更新できるようになりますね！

…と言いたいですが、Gatsbyが本領を発揮するのはここからです。次回、ここまで作成したウェブサイトを、gitにアップロードして、自動的にビルドとデプロイができるようにしましょう。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ