🔧

Gatsby.jsのおすすめプラグイン一覧

9 min read

ブログにも書いたので、そちらもご確認いただけると嬉しいです!

Gatsby.jsを使うにあたり、要となるのが「プラグイン」です。
ContentfulReact HelmetStyled ComponentsGoogle AnalyticsGoogle Tag Managerなど、サイト制作に必須のツールがプラグインとして提供されており、普段なら手間のかかる作業を、簡単に設定できるようになっています!

今回は、そんな便利なプラグインのなかで、僕がおすすめするプラグインを一挙紹介したいと思います!

おすすめのプラグイン

gatsby-plugin-google-analytics

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/

サイトのアクセス解析を行うためのツール「Googleアナリティクス」を、サイトに埋め込むためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-plugin-google-analytics
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `ご自身のトラッキングID`,
      },
    },
  ],
};
トラッキングIDの確認方法
  1. Googleアナリティクスにログインし、メニューバーの「管理」をクリック。
  2. プロパティ欄の「プロパティ設定」をクリックし、上部に表示されている「トラッキングID」が、ご自身のトラッキングIDになります!

gatsby-plugin-manifest

https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/

Webマニフェストを自動生成してくれるプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-plugin-manifest
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GIFMEEE | ラウルの個人ブログ`, // サイトの名前
        short_name: `GIFMEEE`, // サイトの短い名前
        start_url: `/`, // トップページのURL(基本は、`/`)
        background_color: `#e1f1ff`, // 背景色
        theme_color: `#ffffff`, // テーマ色(Chromeなどで表示される際のヘッダーの色)
        display: `minimal-ui`, // viewport属性
        icon: `src/images/icon.png`, // ファビコン
      },
    },
  ],
};

gatsby-plugin-react-helmet

https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/

headタグを生成してくれるプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-plugin-react-helmet react-helmet
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    `gatsby-plugin-react-helmet`,
  ],
};

インストールすることで、headタグが生成されるわけではありません。別途、「SEO.js」などのファイルが必要になります。

gatsby-plugin-styled-components

https://www.gatsbyjs.com/plugins/gatsby-plugin-styled-components/

コンポーネントファイル内でスタイルを設定できる、いわゆる「CSS in JS」を実現してくれるプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    `gatsby-plugin-styled-components`,
  ],
};

gatsby-plugin-twitter

https://www.gatsbyjs.com/plugins/gatsby-plugin-twitter/

Twitterの投稿をサイトに埋め込めるようにするためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-plugin-twitter
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    `gatsby-plugin-twitter`,
  ],
};

gatsby-source-contentful

https://www.gatsbyjs.com/plugins/gatsby-source-contentful/

Contentfulから、APIを介して投稿データを受け取るためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-source-contentful
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.SPACE_ID,
        accessToken: process.env.API_KEY,
      },
    },
  ],
};

SPACE_IDとAPI_KEYをそのまま書いてしまうと、セキュリティ上よくないので、ルート階層に.envファイルを作り、事前にキーを記述しておいてください。

gatsby-transformer-remark

https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/

マークダウンファイルのデータをHTMLに変換するためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-transformer-remark
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    // 下のコードを追加
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [],
      },
    },
  ],
};

gatsby-remark-code-titles

https://www.gatsbyjs.com/plugins/gatsby-remark-code-titles/

マークダウンにおけるコードブロックの記述の際に、ファイル名を表示させるためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-remark-code-titles
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // 下のコードを追加
          `gatsby-remark-code-titles`,
        ],
      },
    },
  ],
};

gatsby-remark-embed-youtube

https://www.gatsbyjs.com/plugins/gatsby-remark-embed-youtube/

Youtubeの動画をサイトに埋め込めるようにするためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-remark-embed-youtube
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // 下のコードを追加
          {
            resolve: `gatsby-remark-embed-youtube`,
            options: {
              width: 650,
              height: 365,
            },
          },
        ],
      },
    },
  ],
};

widthとheightは、指定しておかないとエラーになるので、とりあえず記述をしておきましょう。

https://www.gatsbyjs.com/plugins/gatsby-remark-external-links/

マークダウンファイルで記述した外部リンクを、別タブで開くようにするためのプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-remark-external-links
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // 下のコードを追加
          {
            resolve: `gatsby-remark-external-links`,
            options: {
              rel: `noopener noreferrer`, // rel属性
            },
          },
        ],
      },
    },
  ],
};

gatsby-remark-prismjs

https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/

マークダウンにおけるコードブロックの記述の際に、シンタックスハイライトを自動でつけてくれるプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-remark-prismjs prismjs
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // 下のコードを追加
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              noInlineHighlight: false,
            },
          },
        ],
      },
    },
  ],
};

gatsby-remark-responsive-iframe

https://www.gatsbyjs.com/plugins/gatsby-remark-responsive-iframe/

TwitterやYoutubeなどのiframeタグを、レスポンシブ化してくれるプラグインです。

導入方法

  1. npmからインストール
npm install gatsby-remark-responsive-iframe
  1. gatsby-config.jsに追記
gatsby-config.js
module.exports = {
  siteMetadata: {
    ・・・省略
  },
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // 下のコードを追加
          `gatsby-remark-responsive-iframe`,
        ],
      },
    },
  ],
};

最後に

以上が、僕がおすすめするGatsby.jsのプラグイン一覧となります!
取り上げたプラグインは、僕の中ではほぼ必須となっているので、皆さんも試してみてはどうでしょうか?

最後までご覧いただき、ありがとうございました!