Gatsby Themeの紹介

2018.12.23

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

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

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のセッションで話された内容ですが、次のような場合で利用すると効果的です。

実装例（利用者側）

今回は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を作成しましょう。

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を実行しましょう。

スクリーンショット 2018-12-23 17.34.14.png (141.7 kB)

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

スクリーンショット 2018-12-23 17.34.48.png (22.2 kB)

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

個人的な感想

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

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

今後に期待しましょう。

参考ページ

Xでシェア