このブログを作った際どうせならと思って Gatsby Theme と Gatsby Starter を作りました。Gatsby Theme と Gatsby Starter は簡単に言うと Gatsby サイトを再利用するための仕組みです。このあたりをどのように作ったか書いてみることにします。
ちなみに作成した Theme と Starter は以下です。
使い方は Readme に書いているつもりなのでよければ使ってみてください。
そもそもなんで Gatsby
ブログを作る上でまず SSG フレームワークを探しました。SSR などはブログ程度では複雑すぎるし運用も面倒なためです。また React へ触れる環境が欲しかったので React ベースのものを選びたかったです。こうなると現時点で主要な SSG フレームワークは以下などになりました。
今回のブログ作成ではなるべく面倒な作業はしたくなかったので（技量がないともいう）、画像の最適化が標準サポートされておりまたその他さまざまな Plugin の利用もできる Gatsby を選択しました。結局 Theme や Starter 作成など多少面倒なことしてるんですけどね。
Next や Astro はまた別の機会に使ってみようと思ってます。
Gatsby Theme と Gatsby Starter
Gatsby でサイトの構築をはじめる際はよく以下のようにします。
npx gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-worldここで指定しているのが Gatsby Starter です。Gatsby Starter はようするにボイラープレートです。gatsby newコマンドを用いて簡単にテンプレとなる Gatsby サイトを展開できます。ただし、あくまでその時点での Gatsby プロジェクトのコピーが得られるだけで以降の開発はすべて自身で行う必要があります。たとえばわかりやすいのが依存関係のバージョンで、Starter 側がバージョンを上げたとしても作成したプロジェクトのバージョンは上がらないため自身でメンテする必要があります。
この ような問題を解決する手段として Gatsby Theme があります。Gatsby Theme はようするに Plugin です。gatsby-config で以下のようにして利用します。
import type { GatsbyConfig } from "gatsby";
const config: GatsbyConfig = {
plugins: ["@zzzkan/gatsby-theme-blog"],
};
export default config;（UI 含め）Gatsby の各種機 能を npm パッケージ化しているため簡単に再利用できるようになります。ただし、サイトの構成が Theme へ依存するようになるので Starter に比べると自由度は下がります。一応 Shadowing という方法で Theme の実装を差し替えることは可能ですがやりすぎはよくなさそうです。
Gatsby Theme を作る上で参考にした情報
Gatsby Theme を作るうえでおもに以下を参考にさせてもらいました。
- Building a Theme | Gatsby
- gatsbyjs/themes: This is a repo for Gatsby's official themes.
- LekoArts/gatsby-themes: Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
ちなみに Gatsby Starter は単なる Gatsby サイトなので普通にサイトを作るだけです。GitHub などのリポジトリに公開しておけばgatsby newコマンドから利用可能になります。
どうやって作ったか
普通の Gatsby サイトの開発とは少し異なるのかなと思った点について書いてみます。
モノレポ
Theme を開発するプロジェクトだけでは実サイトとしての動作確認ができません。そのため、Theme 用のプロジェクトと動作確認用のプロジェクトのモノレポ環境にするといいです。Gatsby のチュートリアルでは yarn workspaces が使われていたため今回はあわせました。
TypeScript
Gatsby v4.9 から gatsby-config.ts のように Gatsby の設定ファイルの TypeScript 化が可能になっています。ただ、残念なことに yarn workspaces を使っているとうまく動作しませんでした（詳細まではおってない）。で TypeScript and Gatsby | Gatsby を確認すると以下のように書かれてました。
Workspaces (e.g. Yarn) are not supported.
ということで今回は素直に設定ファイルの TypeScript 化は諦めました。
一方で Gatsby v4.15 で正式に機能追加された GraphQL Typegen は普通に動いたので使いました。GraphQL Typegen は GraphQL の型情報を自動生成してくれます。使うには gatsby-config で以下のようにします。
module.exports = {
graphqlTypegen: true,
};するとgatsby developのたびに GraphQL の型情報が含まれる gatsby-types.d.ts を生成するようになります。
コンポーネントの分割
Gatsby Theme には Shadowing という概念があります。これは Theme のもともとの実装をユーザーが独自の実装に差し替えることができるというものです。たとえば、ユーザーが Theme のタイトルだけを独自の実装へ変更したい場合 Theme 側に Title.tsx のようなコンポーネントがあればこのコンポーネントを Shadowing するだけで済みます。
ということで Gatsby Theme ではコンポーネントが（正確には src 内のファイルすべてですが） Shadowing の 1 つの単位になります。自分のサイトを作るだけであればコンポーネントの分割はある程度てきとうでいい気もしますが、Gatsby Theme を作る場合は少なくとも Shadowing されることを意識して分割するとよさそうです。
スタイル
これは別になんでもいいんですが Gatsby のチュートリアルでは Theme UI の使用例がよく出てきます。Theme UI は Theming に力を入れたライブラリです。Gatsby Theme 側で theme.js などにスタイルを定義しておいてユーザーが独自の実装をしたい場合は Shadowing してもらうというパターンをよく見かけました。
今回は興味があったため Theme UI と同様な Theming ができる Chakra UI を使ってみました。ただ、 Chakra UI はバンドルサイズが結構大きくてブログ程度には過剰だった気がかなりしています。v2.4.2 から追加された ChakraBaseProvider で不要なテーマを剥がせるようになっているみたいなので気が向いたら検討します（たぶんしない）。
テスト
今回は Vitest と Playwright で簡単なテストを実行するようにしました。動作確認用のプロジェクトを用意したおかげで e2e テストも書けますね。
Starter
Theme を公開した後に Theme を使用した Starter も合わせて作成しました。Theme のみでプロジェクトをはじめるのは結構難易度が高いので Starter も合わせてあると便利な気がします。
まとめ
結構大変でしたが作ってみてよかったです。
よければ使ってみていただけると、そして FB いただけるととっっても嬉しいです。