静的ファイルジェネレーターとは

静的ファイルジェネレーターとはプログラマブルに書いたソースを静的なHTMLファイルに書き出すツールです。
そしてGatsbyは単なる静的ファイルジェネレーターではなく、SSRやAMPなどのモダンな技術が最初から組み込まれています。

競合ツールとしては、同じJavaScript製としてはNuxt.jsや、Rubyで作られたJekyllなどがあります。
公式サイトに比較がまとめられてますので参考にしてください。

Gatsby vs JAMstack frameworks

インストール

npxでインストールできます。
ターミナルを起動して下記を実行します。

$ npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

ディレクトリが作られたらcdで移動して開発をはじめましょう。

$ cd hello-world
$ npm run develop

run developを実行するとブラウザでローカルホストにアクセスできるようになります。

http://localhost:8000

「Hello world!」と表示されたら成功です。

ページの編集

「Hello world!」と表示されましたが、このファイルがどこにあるかというとsrc/pagesディレクトリのindex.jsファイルです。

試しに次のように編集してみましょう。

src/pages/index.js
import React from 'react'


export default () => <div>ハローワールド!</div>

保存するとブラウザの文字が「ハローワールド!」に切り替わりましたね。

ページの作成

今度は新しいページを作成してみましょう。
自己紹介ページを作成したいとします。
pagesディレクトリに新しくabout.jsファイルを作成して、下記のように編集します。

src/pages/about.js
import React from 'react'


export default () => (
  <div>
    <h1>About</h1>
    <p>自己紹介</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

about.jsというファイルで作成したので、下記でアクセスできます。

http://localhost:8000/about/

共通で使用するコンポーネント（ヘッダー）の作成

ヘッダーとかは各ページで共通で使用したいので別ファイルにしたいですよね。
src/componentsディレクトリを作成して、その中にheader.jsファイルを作成します。

src/components/header.js
import React from 'react'


export default () => <h1>テストサイト</h1>

index.jsに作成したheader.jsを配置してみます。

src/pages/index.js
import React from 'react'
import Header from '../components/header'


export default () => (
  <div>
    <Header />
    <h2>index</h2>
    <p>トップページ</p>
  </div>
)

about.jsにも同じように配置してみてください。これでheader.jsを編集するだけですべてのページに反映することができるようになりました。

リンクの設定

作成した2つのページにリンクを設定して飛べるようにしましょう。

GatsbyにはLinkコンポーネントがあるので、aタグではなくこちらを使用してみます。
header.jsに記述することで全ページにリンクを設定できますね。

src/components/header.js
import React from 'react'
import { Link } from 'gatsby'


export default () => (
  <header>
    <h1>テストサイト</h1>
    <ul>
      <li><Link to="/">Home </Link></li>
      <li><Link to="/about/">About</Link></li>
    </ul>
  </header>
)

Linkコンポーネントを使用することで、カレントページのナビゲーションにaria-currentが付与されます。

<ul>
  <li><a aria-current="page" class="" href="/">Home </a></li>
  <li><a href="/about/">About</a></li>
</ul>

たぶんその他にもいいことがあるのではないかと思います。

スタイルを付ける

このままだと何もスタイルされていないしょぼいページな感じなので、CSSを設定していい感じにしてみましょう。
srcディレクトリにstylesディレクトリを新しく作成して、global.cssファイルを作成します。

src/styles/global.css
html {
  background-color: #eee;
}

全体的にスタイルを反映させたい場合はルートにgatsby-browser.jsというファイルを作ります。

gatsby-browser.js
import './src/styles/global.css'

このファイルでは作成したglobal.cssをインポートするだけです。

gatsby-browser.jsを新しく作成した場合は一度ローカルサーバーを再起動する必要があります。
ターミナルで、Ctrl + cで停止して、再度$ npm run developを実行してください。

コンポーネント別のスタイルを設定する

普通のCSS構造の場合グローバルにしかスタイルの設定ができないから、めちゃくちゃ長いクラス名とかにしなくてはいけなかったりしますけど、Gatsby（React）の利点の一つとして、コンポーネント毎に完全に分けて設定できるので完結に書けるところにあります。

例えば、お知らせ一覧のようなコンポーネントを作るとします。

src/styles/news.module.css
.list {
  border: solid 1px #bbb;
}
.list th {
  padding-right: 30px;
}

作成したCSSファイルをimportして、新しく作ったtableタグにclassNameで適応させます。

src/styles/news.module.css
import React from 'react'
import Header from '../components/header'
import snewsSyles from '../styles/news.module.css'


export default () => (
    <div>
        <Header />
        <h2>index</h2>
        <p style={{ fontSize: 32, fontWeight: 'bold' }}>トップページ</p>


        <table className={snewsSyles.list}>
            <tr>
                <th>2019.10.10</th>
                <td>新しいお知らせ</td>
            </tr>
            <tr>
                <th>2019.10.10</th>
                <td>古いお知らせ</td>
            </tr>
        </table>
    </div>
)

タグのクラス名はこんな感じに変換されてます。

<table class="news-module--list--3r0Os">

ビルドする

一度ここまでの状態で静的ファイルに書き出してみましょう。

$ npm run build

publicディレクトリにHTMLファイルの他、色々ファイルが書き出されます。

ということで、Gatsbyの基本的な使い方がわかったことで以上になります。
これだけだとあまりGatsbyにする意味がないですが、マークダウンファイルを表示したりとか、バックエンドと連携させたりとかできるようなので、また機会がありましたらやってみたいと思います。

Get to know Gatsby building blocks