週末でGatsby.jsを触ってみたので、その共有です。

いろいろできるGatsby.jsですが、公式のHello WorldをベースにCSS（SCSS）やメタ情報の設定くらいまでを、何度かに分けて解説します。最終的には、静的なWebサイトをNetlifyあたりにデプロイするまで書こうと思っております。

今回は、インストールからローカルサーバの立ち上げ、HTMLの編集くらいまでいきます。

Gatsby.jsとは？

Gatsby.jsはReact.jsベースの静的サイトジェネレーターです。GraphQL、PWA等のモダンな技術に対応しています。

Gatsby.jsのインストール

まずは、CLIをnpmでインストールしましょう。

$ npm install --global gatsby-cli

（Node.jsのインストールがまだの方は、こちらからインストールするか、nodenv等を使ってください）

完了したら、無事にインストールされているかどうか、以下のコマンドでバージョンを確認してみましょう。

$ gatsby --version

バージョンの数字が表示されれば、成功です。

開発環境の設定

シンプルな構成のgatsby-starter-hello-worldを使い、開発環境を構築しましょう。

まずは、適当な場所にディレクトリを作成し、gatsby new {プロジェクト名} {Githubのパス}でgatsby-starter-hello-worldをダウンロードします。

$ mkdir gatsby-demo
$ cd gatsby-demo
$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

すると、こんな感じのファイルが生成されていると思います。

.
└── hello-world
    ├── .gitignore
    ├── LICENSE
    ├── README.md
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    │   └── pages
    │       └── index.js
    ├── static
    │   └── favicon.ico
    └── yarn.lock

これで準備完了です。

ローカルサーバーを起動させ、HTMLを編集する

ターミナルで $ npm run develop を実行するとローカルサーバーが立ちあがります。たぶん、http://localhost:8000なので、こちらをブラウザで見てみましょう。ブラウザ上にHello world!が表示されていると思います。

では、HTMLを変更してみましょう。

src/pages/index.jsファイルを開きます。

index.js

import React from "react"

export default () => <div>Hello world!</div>

export default () =>の後ろが<div>Hello world!</div>になっていますね。こちらにHTMLを書いていきます。ためしに、テキストを変更してみてください。リロードしなくてもテキストが変更されると思います。便利ですね。

ただ、このままですとHTMLが書きづらいので、少し変更しましょう。

index.js

import React from "react"

export default () => (
  <div>Hello world!</div>
)

()を使うことにより、よりHTMLらしく書くことができます。

注意点として、**()のなかに要素はひとつしか書けません。**兄弟要素を書くとエラーになります。

index.js

import React from "react"

// これはエラー
export default () => (
  <div>Hello</div>
  <div>world!</div>
)

index.js

import React from "react"

// これならOK
export default () => (
  <div>
    <p>Hello</p>
    <p>world!</p>
  </div>
)

今回はここまで！

19/2/3: CSS・SCSS篇を公開しました！