筋肉ﾁｮｯﾄﾃﾞｷﾙ

Gatsbyのプラグインとは？

2020年05月17日

GatsbyGatsbyPlugins

プラグインとは？

Gatsbyプラグインは、Gatsby APIを実装してGatsbyサイトに追加機能を追加するNode.jsパッケージです。

例えば、以下のようなものがあります。

プラグインはスターターとは異なり、Gatsbyのデータレイヤーや他の構造的なサイトコードの機能をインストール可能なパーツにパッケージ化したものです。
よって、プラグインのコードが更新されればそれに応じてプラグインを使用しているサイトも更新されます。
対するスターターは始めのサイト構築時にソースコードを取り込み、それ以降スターターの更新は反映されません。

プラグインの使い方

プラグインはNode.jsパッケージなので、まずnpmを使ってインストールします。

例えば、ChakraUIというUIコンポーネントのライブラリをサポートするプラグインを入れてみましょう。

shell
yarn add gatsby-plugin-chakra-ui @chakra-ui/core @emotion/core @emotion/styled emotion-theming

or

shell
npm install gatsby-plugin-chakra-ui @chakra-ui/core @emotion/core @emotion/styled emotion-theming

次に、gatsby-config.jsファイルのplugins配列にgatsby-plugin-chakra-uiを追加するだけです。

gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-chakra-ui`],
}

このようにオプションを渡すこともできます。

gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-chakra-ui",
      options: {
        /**
         * @property {boolean} [isResettingCSS=true]
         * if false, this plugin will not use `<CSSReset />
         */
        isResettingCSS: true,
        /**
         * @property {boolean} [isUsingColorMode=true]
         * if false, this plugin will not use <ColorModeProvider />
         */
        isUsingColorMode: true,
      },
    },
  ],
};

ちなみにインストールされるパッケージはこちらです。

ソースコードは比較的シンプルで、gatsby-browser.jsとgatsby-ssr.jsの2ファイルで以下のようにwrapRootElememntAPIを使うためにexportしていることがわかります。

import React from "react";
import { ThemeProvider, ColorModeProvider, CSSReset } from "@chakra-ui/core";
import theme from "./theme";
export const wrapRootElement = (
  { element },
  { isResettingCSS = true, isUsingColorMode = true },
) => (
  <ThemeProvider theme={theme}>
    {isResettingCSS && !isUsingColorMode && <CSSReset />}
    {isUsingColorMode ? (
      <ColorModeProvider>
        {isResettingCSS && <CSSReset />}
        {element}
      </ColorModeProvider>
    ) : (
      element
    )}
  </ThemeProvider>
);
export { wrapRootElement } from "./gatsby-browser";

このソースコードを見れば、オプションの指定によっての違いがわかりやすいですね。

ちなみにgatsby-browser.jsでは、クライアント側でブラウザ内のアクションに反応したり、追加のコンポーネントでサイトをラップしたりすることができるAPIをexportし、
gatsby-ssr.jsでは、サーバー側でGatsbyとNode.jsによってSSRされた静的なHTMLファイルを変更できるAPIをexportします。

このようにプラグインではGatsbyのコアAPIを使う設定がされており、それをサイトに反映できます。

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

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

Made with Gatsby& ChakraUi

Yuuki Okamoto • 2020