GatsbyJSにページを追加しよう

立ち上がったGatsbyJSにページを追加したいと思います。
srcフォルダの中身は以下のような構造になっていると思います。

src/components
   /images/
   /pages/404.js
          index.js
          page-2.js

ここのpagesフォルダには3つのファイルが入っているのがわかると思います。 GatsbyJSではこのpagesフォルダにページを追加していきます。（プログラミングでページを作る方法もあります。またの、機会に説明します。） 今回はabout.jsというファイルをpagesフォルダに作成しましょう。

src/components
   /images/
   /pages/404.js
          index.js
          page-2.js
          about.js

このような構成になります。 about.jsの中身は以下のようにしてみましょう。

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

import Layout from '../components/layout'
import SEO from '../components/seo'

const Aboutpage = () => (
  <Layout>
    <SEO title="About" />
    <h1>About</h1>
    <p>Welcome to About Page</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export default Aboutpage

コードを読んでみる

import React from reactは、ReactJSを読み込んでこれからReactJSでコードを書いていきますという宣言のようなものです。

import {LINK} from gatsbyは、gatsbyからLINK機能を引っ張ってきています。HTMLタグではリンクは<a href='/'>と記載しますが、Gatsbyではサイト内の内部リンクは<Link to＝”/”>と書く決まりになっています。

import Layout from '../components/layout'は、レイアウトファイルを読み込んでいる。SEOも同じ容量。（それぞれ別記事で書今度書きます。）読み込んだコンポーネントは、<Layout></Layout>などでサイト内で使えます。

const AboutPageは、変数の値を変更せず定数として宣言する際に使う修飾子です。 constが付くと変数は書き換えができなくなり、読み取り専用となります。 = () => (これはアロー関数というもので()の中にはデータが入ったりします。今回は受け取るデータがないので空です。
export default AboutpageでAboutpageとして出力します。

実際確認してみよう

GatsbyJSは新規ファイルが追加された場合は再ビルドしたほうが良いので コマンドプロントでサーバーが動いている状態であればGatsbyJSのサーバーをCTRL＋Cで中止しましょう。そしてもう一度gatsby developコマンドを打ちこみます。 そしてブラウザにhttp://localhost:8000/about/と入力してください。

このように表示されたら成功です。おめでとうございます！

GatsbyJS Pageの使いどころ

GatsbyのPage機能はAboutなどの固定ページを制作するときに役に立つスキルです。記事ページなどを作る場合は、このやり方はあまりに非効率ですのでおススメしません。記事ページなどは、また別の記事で解説します。

お願い

頑張って勉強しながら書いています。間違いなどがあればご指摘いただけたらうれしいです。