Gatsbyのテーマとは？

概要

Gatsby テーマはプラグインの一種です。

Gatsby

GatsbyPlugins

2020年05月17日

プラグインとは？ Gatsbyプラグインは、Gatsby APIを実装してGatsbyサイトに追加機能を追加するNode.jsパッケージです。 例えば、以下のようなものがあります。 build…

プラグインとは違って自身でgatsby-config.jsファイルをもっており、複数のパッケージをインストールして管理できる Gatsby サイトになります。
この点は<と同じようですが、テーマはプラグインの一種です。スターターと同じようですが、テーマはプラグインの一種です。 複数のテーマを同時に利用することができますし、テーマの更新や変更の影響を受けることができます。

Gatsby

GatsbyStarters

2020年05月17日

概要 スターターは既に設定された機能をもつ Gatsby…

テーマとスターターの違い

テーマを理解するために、どんなときにテーマを作成するのか考えます。

Gatsby サイトを構築する際、様々な設定をする必要があります。
たとえばどこにデータを置くのか？
どのようにアクセスするのか？
どのように表示するのか？
などなど。

それらをテーマとしてパッケージ化することで、第三者や自分自身が再利用することができます。

似たものにスターターがあります。
スターターは Gatsby サイトを素早く作成する方法の 1 つで、あらかじめ特定の目的のために設定された Gatsby サイトをダウンロードしてカスタマイズしていけます。
例えば、ブログを作りたい。TypeScript を使いたい。という目的があれば、これら 14 個(2020/5/18 時点)のスターターから始めて自分好みにカスタマイズできます。

サイト作成の始めの手助け、雛形として使うだけ。
つまり、今後スタータを更新変更してもそれをサイトに取り込む必要はない。
あくまで雛形として使うだけなんだ。というならスターターで問題ないかもしれません。

ただ、共通化した設定をパッケージとして再利用したい場合は、パッケージの更新変更もサイトに取り込みたいはずです。
そんなときに使えるのがテーマです。

次の場合、スターターではなくテーマの使用を検討できます。

• すでに Gatsby サイトがありそこに追加したい。つまりスターターから始めることが出来ない場合
• パッケージの更新変更を取り込み、サイトを最新にアップデートし続けたい場合
• 複数の機能を実装したいが、すべての機能をもつスターターがない場合 (複数のテーマを組み合わせる)

また次の場合、テーマの作成を検討できます。

• 複数の Gatsby サイトで同じ機能・設定を再利用したい場合
• 複数人で同じ機能・設定を共有したい場合

テーマの使い方

テーマはプラグインの一種ですので、インストールして使い始めることが出来ます。

npm install gatsby-theme-xxx

次にプラグインと同様、gatsby-config.jsの plugins 配列に追加します。
テーマによってはオプションを設定できます。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-xxx`,
      options: {
        option1: `macho`,
      },
    },
  ],
};

そのあとテーマによって、必要な設定をしたり必要なファイルを作成したりしていきます。

実際に使ってみる

それでは実際に使ってみてみましょう。

今回は、gatsby-theme-blogというテーマを使ってみます。

まず、最小構成で Gatsby サイトを作成します。

mkdir example-of-gatsby-theme-usage
cd example-of-gatsby-theme-usage
npm init -y
npm install react react-dom gatsby
touch gatsby-config.js

次にテーマをインストールします。

npm install gatsby-theme-blog

gatsby-config.jsのpluginsにテーマを指定します。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {},
    },
  ],
};

いくつかオプションがあります。ぜひ見てみましょう。

これで完了です。

早速、記事を作ってみましょう。

このテーマではデフォルトで、/content/posts/の下に.mdファイルか.mdxファイルを作るとページが作成されます。
このpathはオプションで変えることも出来ます。

---
title: ボディビル
date: 2020-05-18T22:00:00Z
---
ボディビルはたのしいぞ！！

gatsby developしてlocalで確認できます！

gatsby develop

以上のシンプルな作業でこんなサイトが出来上がりです！！！

ソースコードはこちら です！

岡本 侑貴@筋肉ﾁｮｯﾄﾃﾞｷﾙ

筋肉バカ。筋トレしてコード書いて、毎日幸せに生きてる。ボディビルにドハマリ。2021年東京オープンボディビル選手権で最高の身体に仕上げてつよつよエンジニアになる！！