Gatsbyにオレオレ設定で入門してみた
ずっと開発してきた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 して
{
"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 に以下のように追加します
"module-resolver", {
"alias": {
"@": "./src"
}
}
個人的には src を @ にしておくのが好きです
いつもこれ
TypeScript
それなりにプロジェクトを動かすならTypeScriptは必須ってお年頃なので、とにかくJSファイルを一掃します
冒頭で触れた Nuxt (Vue/Vuex) がイヤになった理由もTypeScriptとの相性の悪さが原因だったりします
拡張子を書き換えて型定義をしていきます
GraphQLの型が初見には少々トリッキーで、ネットにもあんまり情報がなさそうなので、よかったら私のリポジトリを参照してみてください
たぶん正しいと思います
tsconfig.json はNextで使ってた秘伝のタレがあるのでそのままコピーしました
注意
BabelにPath Aliasを設定した方は、ここでTypeScriptにも設定しないとエディタに怒られます
compilerOptions に以下のように追加してください
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
最初の項で起動したデフォルトプロジェクトにもあるのですが、
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 に追加しましょう
{
resolve: 'gatsby-plugin-react-css-modules'
},
(参考: gatsby-plugin-react-css-modules | Gatsby)
Global CSS
CSS Modulesを使うかどうかに関わらずグローバルなCSSを書く場所はほしいのではないでしょうか
src/styles に global.css を作って、 gatsby-browser.js に以下を追記しましょう
import '@/styles/global.css'
// Path Aliasがない場合は
// import './src/styles/global.css'
SCSS を使いたい
CSS Modules
npm i -D postcss-scss して、上で追加した plugin の option に .scss を追加しましょう
{
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-plugin-sass',
(参考: gatsby-plugin-sass | Gatsby)
一時的なものだとは思いますが、私がインストールしたときは node-sass と gatsby-plugin-sass でバージョンが合いませんでした
エラーが出た場合は gatsby-plugin-sass に合わせて node-sass をインストールし直してください
例えば、バージョン 4.14.1 をインストールしたいときは npm i -D node-sass@4.14.1 とします
yarnを使いたい
Gatsby CLIがプロジェクトをnewするとき依存関係も勝手にインストールしてくれるのですが、デフォルトだとnpmを使うので、これをyarnに変えます
︙
"cli": {
"packageManager": "yarn"
},
︙
これだけ！
(参考: Yarn | Gatsby)
テンプレート化しよう
Gatsbyのいいところは、自分のテンプレートリポジトリからプロジェクトを作れるところですよね
オレオレ設定を作ったら Repository > Setting > Template repository のチェックを入れましょう
これでもう
$ gatsby new my-gatsby-project https://github.com/tomon9086/gatsby-boilerplate
と、やるだけでオレオレ設定のGatsbyプロジェクトがnewされるってワケです！
ちなみにこれは私のボイラープレートです よかったら使ってね
NextやNuxtとの違いは？
公式が比較を出しているので私はリンクを貼るだけですね
あとがき
公式サイトでpluginを検索できるところから見ても、カスタマイズ性を重視したフレームワークなのかな、という印象を受けました
次はSSR/SSGの使い勝手をNextと比べてみたいと思います (記事を書くかは気分次第)
あと、HMRがNuxtやNextよりも速いかも？ 気のせいかもしれないですが
Discussion