週末で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ファイルを開きます。
import React from "react"
export default () => <div>Hello world!</div>
export default () =>の後ろが<div>Hello world!</div>になっていますね。こちらにHTMLを書いていきます。ためしに、テキストを変更してみてください。リロードしなくてもテキストが変更されると思います。便利ですね。
ただ、このままですとHTMLが書きづらいので、少し変更しましょう。
import React from "react"
export default () => (
<div>Hello world!</div>
)
()を使うことにより、よりHTMLらしく書くことができます。
注意点として、**()のなかに要素はひとつしか書けません。**兄弟要素を書くとエラーになります。
import React from "react"
// これはエラー
export default () => (
<div>Hello</div>
<div>world!</div>
)
import React from "react"
// これならOK
export default () => (
<div>
<p>Hello</p>
<p>world!</p>
</div>
)
今回はここまで！
19/2/3: CSS・SCSS篇を公開しました！