Gatsby Themes が experimental から stable になりました。正式な対応バージョンは調べていませんが、[email protected] で動作確認しています。

Announcing the Stable Release of Gatsby Themes!

theme 作成自体は大きな変更はなく、正式対応したことでより theme を使いやすくする機能を実装していくようです。すでに theme の使い方は変更されており、

// gatsby-config.js
 plugins: [{
    resolve: "gatsby-crudzoo",
    options: {},
  }, ],
  // __experimentalThemes: [`gatsby-crudzoo`]

gatsby-config.js の__experimentalThemes から plugins として読み込むようになりました。

Theme 作成と使ってみての感想

ざっと作成して問題のあるところを修正しながら使ってきました。新ページや機能など何か追加する時、theme に機能を持たせるか、theme を使用したプロジェクトで拡張するべきかは毎回悩みます。

現状は theme に機能を持たせすぎると修正の影響範囲が大きくなりがちなのとシャドーイングが theme のソースコードみないと厳しいので theme よりは theme を使用したプロジェクトで普通に gatsby 使った開発を行うのが良いかなと考えています。

JavaScript 開発についての試行錯誤シリーズ

gatsby-crudzoo には index と blog のページ、tag のページを template で作成しています。上記は template ではなく普通のページ(デザイン変えていないのでわかりにくいですが)で作りました。こういったページは theme で提供すると使いずらいので、プロジェクト側で作成しています。

シャドーイングのジレンマ

“JavaScript 開発についての試行錯誤シリーズページ”のような theme にはない独自のページを index からリンクしたい時は theme の index をシャドーイングする必要があります。現状の仕様だと index 全体ではなく一部を変更したい時が難しく、component 単位での置き換えも考えることが多いです。

<Layout>
  <Header />
  <Main />
  <Footer />
</Layout>

こういう時に Header だけ置き換えたいとします。header.js 内で theme 独自の module が使用されている場合

import { Layout, SEO } from 'gatsby-crudzoo';
const Header = () => {
  return (
    <Layout>
      <SEO />
    </Layout>
  );
};

theme から export されていれば問題ないですが、export されていない場合はその機能を github などからソースコード見て持ってくる必要があります。また、header の一部、例えば文章だけ変えたいという時などはスターターと比較して小回りが効きにくいです。

style 設定も悩ましく、シャドーイング前提ならかなり細かく export しないと設定しずらいかなという感想です。styled-components を使っていると、class 名を振っていても important なしで上書きが難しい問題もあります。

import styled from 'styled-components'

const Header = styled.div`
  font-size: 16px; // ここだけ変えたい
`
...省略

Typography.js として style の設定を外に出すパターンを踏襲するべきなのか、h1.js,h2.js みたいにタグレベルで書き出す？公式がベストプラクティスとして出している theme を参考にしながら考えてみるつもりです。

これからが楽しみ

スターターと比較すると小回りは効きにくいものの、複数サイト運営などある程度デザインと機能を揃た web サイトが複数欲しい時 theme は便利です。theme さえ壊さなければ復旧しやすいのも良いところ。これからの進化が楽しみです。

公式の進歩をみつつ、自分の theme も少しずつ良くしていこうと思います。