Gatsbyでのプラグインの使用

Gatsby.js の最大の機能の1つは、すばらしい公式プラグインライブラリです。このNode.jsパッケージの大規模なコレクションは、Gatsby APIを直接利用し、余分なコードを追加することなく、GatsbyWebサイトにカスタム機能を拡張/追加する簡単な方法を提供します。この短い記事では、これらのプラグインを見つけて実装するための基本について説明します。

Gatsbyプラグインの検索

Gatsbyプロジェクトを開始するときは、作業を簡単にするために利用可能なプラグインを探すことをお勧めします。幸い、GatsbyのWebサイトには、使用できる公式プラグインが満載の巨大な検索可能なライブラリが用意されています。

先に進み、新しいタブでそのリンクを開き、利用可能なプラグインのいくつかを下にスクロールします。それらは人気順にソートされているので、他の人々が定期的に使用しているものを知ることができます。もちろん、検索バーを利用することもできます！ 🔍👀

Gatsbyプラグインのインストール

特定のプラグインのインストール手順は、 Gatsbyプラグインライブラリの各プラグインのページにあります。最良の結果を得るには、常にから開始する必要があります。しかし、一般的に、Gatsbyにプラグインをインストールするのは簡単な2ステップのプロセスです！

1. プラグインファイルをインストールします

これらの公式GatsbyプラグインはすべてNode.jsパッケージであるため、npm installまたはyarn addを使用してインストールできます。たとえば、次のようにgatsby-source-filesystemプラグインをインストールできます。

$ yarn add gatsby-source-filesystem

一部のプラグインには追加のピア依存関係も必要です。これについては、プラグインのライブラリページで説明します。この良い例は、 Gatsbyでのスタイル付きコンポーネントの使用の記事にあります。ここでは、Gatsbyプラグインgatsby-styled-componentsとそれに付随する2つのピア依存関係をインストールしています。

$ yarn add gatsby-plugin-styled-components
$ yarn add styled-components babel-plugin-styled-components

2. 使用するように構成する

この時点で、プラグインファイルはサイトに追加されていますが、機能させるには、Gatsbyでプラグインファイルを構成する必要があります。

これを実現するには、Webサイトのルートディレクトリにあるgatsby-config.jsファイルを編集するだけです。すべてのプラグイン構成は、このファイルのpluginsアレイ内に配置されます。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-name`,
      options: {
        // plugin options, if any
      },
    },
    //...other plugins
  ]
}

一般的な形式は上記のコードと似ていますが、特定の構成は使用されているプラグインによって異なります。

最新の手順と構成オプションについては、Gatsbyプラグインライブラリのプラグインのページを常に確認することが重要です。

プラグインの使用に関するGatsbyドキュメントのこのサンプルコードは、gatsby-config.jsでプラグインを構成できるさまざまな方法のすばらしい例です。

gatsby-config.js

module.exports = {
  plugins: [
    // Shortcut for adding plugins without options.
    "gatsby-plugin-react-helmet",
    {
      // Standard plugin with options example
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
        name: "data",
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      // Blank options, equivalent to string-only plugin
      options: {
        plugins: [],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // plugins inside plugins
        plugins: [`gatsby-remark-smartypants`],
      },
    },
  ],
}

使用されている構成オプションがないため、gatsby-plugin-react-helmetに使用されている省略形に注意してください。コードが少ないだけでなく、少し読みやすくなっています。

開発サーバーを再起動してください！

gatsby-config.jsにプラグインをインストールして構成したので、必ず開発サーバーを再起動してテストし、正しく機能していることを確認してください。

gatsby-config.jsファイルを編集するときはいつでも、開発サーバーを再起動することが重要です。そうしないと、期待どおりに機能しません。

ローカルプラグイン

プラグインをローカルにロードすることも可能です。これにより、プライベートで作成されたプラグインや非公式のプラグインをロードできます。

最も簡単な方法は、サイトのルートにpluginsという名前の新しいディレクトリを作成し、その中にローカルプラグインファイルを配置することです。その後、gatsby-config.jsでプラグインを構成することは、非ローカルプラグインとまったく同じです。

特別な理由でローカルプラグインを別のディレクトリに配置する必要がある場合は、require.resolveを使用して、次のようにGatsbyを指定できます。

gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-sitemap",
    {
      resolve: require.resolve(`/path/to/local-plugin`),
    },
  ],
}

独自のプラグインを作成する

上記で示唆したように、独自のプラグインを作成することも可能です。その情報はこの紹介記事の範囲を超えていますが、プラグインの作成に関する Gatsbyのドキュメントには、詳細を知りたい場合に役立つ資料が含まれています。 🧠

最終的な考え

Gatsbyは、Webサイトを構築するためのすばらしいツールであり、その公式プラグインの膨大なライブラリは、その方法の大きな部分を占めています。この短いガイドがお役に立てば幸いですが、もちろん、公式のGatsbyプラグインドキュメントで詳細を確認できます。

人気のあるプラグインのいくつかに精通することを強くお勧めします—間違いなく多くの時間を節約できます（そしてそうするでしょう）。 ⏳👈