Gatsbyを使った人でStarter（Scaffold）を利用してGatsbyのサイトを構築したことのある人は多いのではないでしょうか？
Starterとは別にGatsbyのサイトを構築していく上で便利な「Theme」という仕組みもあるのでご紹介します。

2018/12月時点ではexperimentalな機能ですのでご注意ください。

> Starterの再利用性の低さStarterの再利用性の低さ

従来のStarterをGatsby CLIで展開する方法は、実行時点でのStarterの最新版をローカルのディレクトリに展開するものでした。
Scaffold方式の問題点なのですが、一回展開されたコードは、元のディレクトリのコードが変更されたときに追随するのが非常に困難です。
また、1人で複数のサイトを管理する際にお決まりの設定が各リポジトリに乱立するという問題もあります。
Contentfulのお決まりの設定や、Markdownの処理を行うremark系のプラグイン設定が各リポジトリに存在するようなケースです。
他にも、ドキュメントサイトのようなサイトに対してLogoやColorを変更したいだけなのに、大きなGatsbyプロジェクトが必要なのも問題です。必要以上に大きなコードをいじる必要があり初学者からすると避けたいケースだと思います。
Starterの再利用性の低さを解決するために作られたのがGatsby Themeです。

> 概要概要

Gatsby Themeは、Gatsbyの各種設定やページ、コンポーネントを含むnpm packageです。
利用者はそのThemeを利用して、設定を拡張したり、Viewの一部を差し替えたりすることで簡単にサイトを構築していきます。

> 想定される利用例想定される利用例

Gatsby Daysのセッションで話された内容ですが、次のような場合で利用すると効果的です。

• 同じ会社や個人がサイトを作成するときの共通設定
  • 同じSource Pluginを利用する場合
  • 同じTransformer Pluginを利用する場合
  • SASSなどの共通設定を利用する場合
• ドキュメントサイトのような大枠が変わらないサイト
  • 変更したいのは、ロゴやブランドカラーだけのようなとき

> 実装例（利用者側）実装例（利用者側）

今回はgatsby-theme-blogというThemeの作者がサンプルでつくっているテーマを使ってみます。本記事ではテーマの作成方法については言及しません。

$ npx gatsby new gatsby-theme-sample https://github.com/gatsbyjs/gatsby-starter-hello-world
$ cd gatsby-theme-sample
$ npm install gatsby-theme-blog

次のgatsby-config.jsを作成しましょう。

module.exports = {
  __experimentalThemes: [
    {
      resolve: "gatsby-theme-blog",
      options: { root: __dirname }
    },
  ],
}

src/pages/index.jsを削除し、src/assets/gatsby-logo.pngに適当なpng画像を置き、次のようなマークダウンファイルをsrc/pages/sample-post/index.mdとして作成してください。

---
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
---

This is sample post.

この状態でnpm run developを実行しましょう。

これで一応動きます。ファイルツリーを見てもシンプルな状態で動いていることが確認出来ます。

ただ、暗黙的に必要なファイルが多かったりするので、初見で使うのは非常に難しいです。おそらくテーマによって前提となる作業も違ってくるでしょう。
現実的には「ThemeをベースにしたStarterを利用する」という形になると思います。

> 個人的な感想個人的な感想

Gatsby Theme触ってるけど、WPのChild Themeと同じ印象を受ける。
そのまま配布するのは良さそうだけど、それを元に開発とかはあまり適していなそう。まだExperimentalなので今後に期待。

— もっと@締切駆動 (@mottox2) December 23, 2018

おそらくThemeに関してはgatsby-config.jsの設定の共通化のみを行うのが良くて、UIはthemeに乗せるよりは別にライブラリ化して共通化を図る方が現実的な気がする。
個人的な意見だけど、UIの継承は悪手感漂ってて好きじゃない。

— もっと@締切駆動 (@mottox2) December 23, 2018

configは多分コピペの嵐になっていると思うので、Themeで共通化できるのは嬉しい。
暗黙的に呼び出されるRouteは辛いのでRoutingに関しては各プロジェクトで持ったほうが楽そう。
UIもThemeの中にあるコンポーネントより、ドキュメントが用意されているライブラリを使った方が楽だと思う。

Document系のテンプレートを固めて、色やタイトルをオプションといった形で利用できるようにして、継承はされないという前提であればよさそう。
そういった場合は用途を限定した静的サイトジェネレーターのような扱いになるはず。それはそれであり。

今後に期待しましょう。

> 参考ページ参考ページ

• Composing Gatsby Sites by ChristopherBiscardi · Pull Request #8917 · gatsbyjs/gatsby
  • Themeが実装されたプルリクエスト
• Introducing Gatsby Themes | GatsbyJS
  • Gatsby Blogの記事
• Introducing Gatsby Themes - YouTube
  • 『Gatsby Day』というGatsbyのカンファレンスで話されたセッションの動画です。