mottox2 blog

Gatsby Themeの紹介

devgatsby

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

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

実装例(利用者側)

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

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

今後に期待しましょう。

参考ページ

B!
blog

JAMstack関連の海外イベント情報

JAMstackの情報は国内には乏しいので、特に最新情報に関してはNetlifyやGatsbyの情報は海外のものを見るとよい。 その中でもJAMstack confやGatsby Daysの情報は一

gatsbyJAMstack
dev

ReactのUIコンポーネントライブラリに「Sancho UI」はいかが?

GW満喫していますか?私はNext.jsとCloud Functionsを組み合わせたり、FirebaseをバックエンドとしたSPAの検証や、SwiftでiOSアプリを書いて満喫しています。 こう

emotionreact
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典