mottox2 blog

GatsbyJS v2 はじめの一歩 (2) 実際にページを作る

mottox2
mottox2
2018/08/21

GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げの続編です。

ディレクトリの構成

前章ではgatsby developで開発環境を立ち上げました。
まずはディレクトリ構成を確認していきましょう。重要なファイル・ディレクトリのみ説明します。

- package.json
- gatsby-node.js
- gatsby-config.js
- src/
    - pages/
    - components/
- public/

package.json

Node.jsお馴染みのpackage.jsonです。プロジェクトが使用するnpmパッケージの依存関係や、各種コマンドを登録しておけるnpm scriptsなどに使用します。

gatsby-config.js

サイトのメタデータ(タイトルなど)やGatsbyJSで使用するプラグインの設定などを記述するファイルです。後ほど詳しく解説します。

gatsby-node.js

GatsbyJSのライフサイクルに処理を加えたい場合や、挙動を変えたい場合にしようするファイルです。動的にページを生成したい場合などもこのファイルに変更を加えます。このファイルに関しても後ほど詳しく解説します。

src/pages

URLに対応するReactコンポーネントを定義するディレクトリです。
基本的にこのディレクトリが入り口になっていくので重要です。

  • yourdomain.com/src/pages/index.js
  • yourdomain.com/aboutsrc/pages/about.js
  • yourdomain.com/profile/snssrc/pages/profile/sns.js

とURLの構成とディレクトリ構成が1体1に対応します。

gatsby-ssr.jsgatsby-browser.jsに関しては入門のうちは触らないと思うので省略します。

public/

公開ディレクトリです。GatsbyJSに関係なく公開したいファイル(faviconやlogoの画像ファイル)を置く場所です。

はじめの変更

ディレクトリ構成を抑えたところでよくわからないと思うので、開発環境を立ち上げた状態でファイルをいじってみましょう。

まずは http://localhost:8000 をブラウザで開いてそのページに対応する src/pages/index.js を開いてみましょう。
開いた状態で <p>Hi People</p> を消してみましょう。そうするとリロードなしで変更が反映されたと思います。GatsbyJSはファイルの変更であればリロードなしで変更の反映をやってくれます。ファイルの追加やリネームを行う場合はブラウザ側での手動リロードが必要になります。

src/pages/index.js
import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

新しいページの追加

変更が反映されるところまで確認したら、次は新しいページを追加してみましょう。
src/pages ディレクトリ以下には index.jspage-2.js があるので以下のような page-3.js を追加してみましょう。

src/pages/page-3.js
import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = () => (
  <Layout>
    <h1>My First Component</h1>
    <Link to="/">Back to Home</Link>
  </Layout>
)

export default IndexPage

追加後にブラウザで http://localhost:8000/page-3 を開いてみると新しいコンポーネントが反映されていると思います。

リンクを貼る

/page-3 のページを追加しましたが、今はトップページからリンクが貼られていないのでアクセスできません。そこでリンクを貼っていきましょう。

GatsbyJSではリンクを作るためのLinkコンポーネントが提供されています。import { Link } from 'gatsby'で読み出します。

参考: GatsbyJS v1ではgatsby-linkのパケッケージから提供されていました。過去の情報を探すときに注意

それではsrc/pages/index.jsを編集してリンクを追加しましょう。

src/pages/index.js
 import React from 'react'
 import { Link } from 'gatsby'

 import Layout from '../components/layout'

 const IndexPage = () => (
   <Layout>
     <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
     <Link to="/page-2/">Go to page 2</Link>
+    <Link to="/page-3/">Go to page 3</Link>
   </Layout>
 )

export default IndexPage

もう一度、http://localhost:8000 を開くと、「Go to page 3」というリンクが増えていると思います。

以上のようにGatsbyJSではディレクトリ構造とURL構造が連動しているので、ルーティング用のファイルなどは存在せずシンプルにプロジェクトを進めることができます。
ディレクトリ構造とURL構造が連動するのは、最近のフロントエンドの流れでNext.js(React)やNuxt.js(Vue)でも同様な仕組みが存在しています。

次の章ではstyled-componentsを使ってReactコンポーネントにスタイルを当てる説明をします。

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。 Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をG

Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォ

netlify

Netlify FunctionsでTypeScriptを使って開発する

この記事は既に内容が古くなっています。最新の内容は「Netlify Functions + TypeScriptのボイラープレートを作った」をご覧ください 先日Netlify Functionsの

netlify

技術ブログを支える技術(Gatsby + esaio)

2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サ

esaiogatsby