Gatsbyにオレオレ設定で入門してみた

5 min読了の目安(約4900字TECH技術記事

ずっと開発してきたNuxtがイヤになり、雰囲気が似てるNextに入門してみたけど別にVercelにデプロイするつもりないしな…と思ってGatsbyにも入門してみました

「今までNextで開発してきたけどGatsbyってどんなんなんだろう」って気になってるアナタの助けになれたら幸いです

とりあえずnewしてみる

ギャツビーのギャの字も知らない状態から、まずCLIをインストールします

$ npm i -g gatsby-cli

gatsby コマンドが使えるようになったら

$ gatsby new hello-gatsby
$ cd hello-gatsby
$ npm run develop

これで localhost:8000 で動いています

import React from 'react'

Next勢が最初に顔をしかめそうなポイント(?)ですが、プロジェクトルートに .babelrc を置くことでGatsbyのbabel設定をカスタムできます
npm i -D babel-plugin-react-require して

.babelrc
{
  "plugins": [
    "react-require"
  ],
  "presets": [
    [
      "gatsby",
      {
        "targets": {}
      }
    ]
  ]
}

を追加しましょう
(プラグインの詳細: babel-plugin-react-require)
(参考: Babel | Gatsby)

Path Alias

babelついでにPath Aliasの設定をします
npm i -D babel-plugin-module-resolver したら plugins に以下のように追加します

.babelrc > plugins
"module-resolver", {
  "alias": {
    "@": "./src"
  }
}

個人的には src@ にしておくのが好きです
いつもこれ

TypeScript

それなりにプロジェクトを動かすならTypeScriptは必須ってお年頃なので、とにかくJSファイルを一掃します
冒頭で触れた Nuxt (Vue/Vuex) がイヤになった理由もTypeScriptとの相性の悪さが原因だったりします

拡張子を書き換えて型定義をしていきます
GraphQLの型が初見には少々トリッキーで、ネットにもあんまり情報がなさそうなので、よかったら私のリポジトリを参照してみてください
たぶん正しいと思います

tsconfig.json はNextで使ってた秘伝のタレがあるのでそのままコピーしました
注意
BabelにPath Aliasを設定した方は、ここでTypeScriptにも設定しないとエディタに怒られます
compilerOptions に以下のように追加してください

tsconfig.json > compilerOptions
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

最初の項で起動したデフォルトプロジェクトにもあるのですが、
Gatsby supports TypeScript by default!
Gatsbyは pages ディレクトリなんかに直接 .tsx を置いても動いてくれるらしいので、tsconfig.json はなくても動きそう

でもあるものは置いとこうかなって…

置く場合は typescript パッケージのインストールが必要みたいです
(参考: Gatsby.jsのTypeScript化 2020)

Formatter

次に目に留まるのが、.prettierrc
いままで Nuxt, Next とコードのフォーマットはESLintにやらせてきたので、また新しく秘伝のタレを書き直したくはありません

Prettierさんにはお引取りいただいて、ESLintさんを召喚しましょう
これもなんてことはない、Nextの頃の .eslintrc.js をコピーしてプラグインたちをインストールするだけで特別書き換えることはありません

もしautofixが動かないようであればESLintのエラーを読みましょう、足りないものがあるかも
VSCode (mac) なら⇧⌘Uで OUTPUT を開いて右のプルダウンからESLintを選ぶと読めます

ちなみに公式ドキュメントにもESLintでの設定手順があるのですが、ガン無視しています
(よかったらどうぞ: Using ESLint | Gatsby)

CSS Modules を使いたい

Nextで使っていたCSS Modulesを使いたいですよね(圧)
CSS Modulesは公式pluginがあります
npm i -D gatsby-plugin-react-css-modules でインストールして plugins に追加しましょう

gatsby-config.js > plugins
{
  resolve: 'gatsby-plugin-react-css-modules'
},

(参考: gatsby-plugin-react-css-modules | Gatsby)

Global CSS

CSS Modulesを使うかどうかに関わらずグローバルなCSSを書く場所はほしいのではないでしょうか
src/stylesglobal.css を作って、 gatsby-browser.js に以下を追記しましょう

gatsby-browser.js
import '@/styles/global.css'
// Path Aliasがない場合は
// import './src/styles/global.css'

SCSS を使いたい

CSS Modules

npm i -D postcss-scss して、上で追加した pluginoption.scss を追加しましょう

gatsby-config.js > plugins
{
  resolve: 'gatsby-plugin-react-css-modules',
  options: {
    filetypes: {
      '.scss': { syntax: 'postcss-scss' }
    }
  }
},

Global CSS

公式pluginにSassに対応するための公式pluginがあります
npm i -D node-sass gatsby-plugin-sass して、また plugin に追加しましょう

gatsby-config.js > plugins
'gatsby-plugin-sass',

(参考: gatsby-plugin-sass | Gatsby)


一時的なものだとは思いますが、私がインストールしたときは node-sassgatsby-plugin-sass でバージョンが合いませんでした
エラーが出た場合は gatsby-plugin-sass に合わせて node-sass をインストールし直してください
例えば、バージョン 4.14.1 をインストールしたいときは npm i -D node-sass@4.14.1 とします

yarnを使いたい

Gatsby CLIがプロジェクトをnewするとき依存関係も勝手にインストールしてくれるのですが、デフォルトだとnpmを使うので、これをyarnに変えます

~/.config/gatsby/config.json
"cli": {
    "packageManager": "yarn"
  },

これだけ!

(参考: Yarn | Gatsby)

テンプレート化しよう

Gatsbyのいいところは、自分のテンプレートリポジトリからプロジェクトを作れるところですよね
オレオレ設定を作ったら Repository > Setting > Template repository のチェックを入れましょう

Check Template repository Setting

これでもう

$ gatsby new my-gatsby-project https://github.com/tomon9086/gatsby-boilerplate

と、やるだけでオレオレ設定のGatsbyプロジェクトがnewされるってワケです!
ちなみにこれは私のボイラープレートです よかったら使ってね

NextやNuxtとの違いは?

公式が比較を出しているので私はリンクを貼るだけですね

あとがき

公式サイトでpluginを検索できるところから見ても、カスタマイズ性を重視したフレームワークなのかな、という印象を受けました
次はSSR/SSGの使い勝手をNextと比べてみたいと思います (記事を書くかは気分次第)

あと、HMRがNuxtやNextよりも速いかも? 気のせいかもしれないですが