2019-03-12に更新

GatsbyJSにページを追加しよう

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/と入力してください。
1.PNG

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

GatsbyJS Pageの使いどころ

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

お願い

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

Originally published at www.corylog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] ブロガー向けGatsby講座
第1回 GatsbyJSをはじめる
第2回 GatsbyJSをインストールする
第3回 GatsbyJSにページを追加しよう
第4回 GatsbyJSのLayoutを設定しよう
第5回 GatsbyJSのimageを使ってみよう

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント