GatsbyJSのThemeやStarterとは何なのか

公開日: 2020年08月04日最終更新日: 2022年01月28日

最近、shadowingでの改造箇所が多くなってきており、もうstarterをforkしたほうが良いんじゃないかと思ってたら、公式ページにその通りのことが書いてありました。
ドキュメント読むのと触って動かしてみることのバランスが取れていなかったかもしれません。しかし、触ってみないと実感がわかなかったかもしれません。うーん。

If you find yourself shadowing a large number of components in a particular theme, it might make sense to fork and modify the theme instead. The official Gatsby themes support this pattern using a set of -core themes.

特定のテーマの中で多数のコンポーネントをシャドウイングしていることに気がついたら、そのテーマをフォークして修正するのが理にかなっているかもしれません。公式の Gatsby テーマは -core テーマのセットを使ってこのパターンをサポートしています。

StarterやThemeでカスタマイズを前提としている部分（穴埋めにしてくれているような部分）をちょこっとカスタマイズするぐらいならshadowingで問題なさそうですが、機能拡張を考えるならforkしたほうが良いです。

GatsbyJSのテーマとは何なのか

そもそもGatsbyJSのテーマとは何なのか。
GatsbyJSのテーマについてはもちろん公式サイトに記載があります。
ですが、ちゃんと確認してませんでした。

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project!

Gatsbyテーマは、gatsby-config.jsファイルを含むプラグインで、設定済みの機能、データソース、UIコードをGatsbyサイトに追加します。Gatsbyテーマは、個別のGatsbyサイトをまとめて、大きなGatsbyプロジェクトを分割することができるようにするものと考えることができます。

Themeはプラグインです。サイトのコンテンツをそのままに構造や見た目を変えるものではないと理解しました。CSSがあるんだから見た目変えたいならそもそもという話……。

GatsbyJSに触り始めた頃は、Themeという名前からサイトのコンテンツをそのまま引き継いで構造や見た目を変えられるものだと自分は思っていました。しかし、使っているうちにThemeを入れ替えたりできないことに気付きます。
多くの人が作っているThemeにはサイト構成のフレームワークとなる部分が見い出せません。それもThemeがただのプラグインで、自分で組み込んで使うべき部品という位置づけならしっくりきます。

Starterとは何なのか

StarterはWEBサイトの具体例になります。Starterを使うことですぐにサイトを構築することができます。Starterの中にはテーマを利用して構築されたものもあります。

Starterをベースに改造することで必要な機能を持ったサイトを最低限の労力で作成することができます。逆にStarterと大きく異なるサイトを作りたいときや、欲しい機能を満たすStarterがないときはThemeを利用して一から作ることを検討するのもありです。

Starterはあくまでもサイトの具体例と思ったほうが良さそうです。
Starterの過去のバージョンと最新のバージョンの互換性がいつも保たれるわけではありません。そのため、Starterをshadowingしつつ最新に追随するのは困難だと感じました。
Starterの作り手にもよるのかもしれませんが、Webはトレンドの移り変わりが激しいので古いものを使い維持し続けるわけにも行かないのでしょう。

まとめ

結局まとめは公式ページにあるとおりになります。しっかり読もうドキュメント。

テーマの使用を検討してください。

• すでに既存のGatsbyサイトを持っていて、スターターから始めることができない場合
• あなたのサイトの機能を最新版にアップデートできるようにしたい場合
• あなたのサイトに複数の機能をしたいが、すべての機能を持つスターターはありません
• あなたは1つのギャツビーサイトで構成された複数のテーマを使用することができます。

テーマの構築を検討してみてください。

• 複数のGatsbyサイトで同様の機能を再利用する予定がある場合
• ギャツビーの新機能をコミュニティで共有したい場合

一度腰を据えて改造するか作り直すか……。
それとこの記事に書いてある自分の理解が誤ってたらごめんなさい。公式ページ（一次ソース）を直接確認することも忘れないで下さい。