Gatsbyを使っていて個人的に便利だと思うのが、Gatsbyプラグインです。

Google Analyticsのような有名どころのプラグインはもちろん、ちょっとした機能のプラグインも用意されていて、僕の中ではGatsbyサイトの開発にプラグインは欠かせません。

そこで今回の投稿では、僕が使ってみて便利だと思ったプラグインを目的別に分けて紹介していきたいと思います。

2020年8月17日Gatsby.jsって何？知っておきたい基礎知識やメリットを徹底解説

特にオススメしたいプラグイン

今回は紹介したいプラグインが多いので、まずは特にオススメしたいプラグインからご紹介します。

gatsby-plugin-alias-imports

まずはこちらのプラグインから。個人的にGatsbyサイトを作るときに欠かせないプラグインgatsby-plugin-alias-importsです。

このプラグインの何がいいのかと言うと、ファイルのimport時にエイリアスが切れるようになるんです。これまでの'../../../components/Nav'といった相対パスを、'@components/Nav'と書けるようになります。

僕は以前このプラグインを知らなかったので、毎回相対パスで'../../../..？？'のようにドットとスラッシュを何度も使って自滅していたんですが、このプラグインのおかげで夜ぐっすり眠れるようになりました。ありがとうございます。

それに相対パスを使っているときに階層を変更すると、最悪すべての階層を変更しないといけない…なんて悪夢のようなことも起きてしまうことがありますが、エイリアスを使ってインポートしていれば、必要最低限の変更で済むようになります。

インストール

npm install --save gatsby-plugin-alias-imports

gatsby-config.js を編集

gatsby-plugin-alias-importsのプラグインも、他のプラグインと同じようにgatsby-config.jsでプラグインの設定を行います。

設定方法としては使いたいエイリアスとパスをセットで伝えればいいので、次のコードのようになります。たとえば@componentsという名前のエイリアスを使いたいときには、そのエイリアスの名前と、対応させるパス（src/components）をセットで伝えるといった感じになります。

また、extensionsで拡張子を指定すれば、インポートの際に指定した拡張子を省略できるようになります。ここではjsやjsx、ts、tsxを指定していますが、プロジェクトに応じて変えると良さそうです。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-alias-imports`,
      options: {
        alias: {
          "@src": "src",
          "@components": "src/components",
          "@layouts": "src/layouts",
          "@pages": "src/pages",
          "@sass": "src/sass",
          "@templates": "src/templates",
          "@posts": "content/posts",
        },
        extensions: ["js", "jsx", "ts", "tsx"],
      }
    },
  ],
}

ちなみに上のコードではアットマーク@をエイリアスの手前に使っていますが、@以外に~を使うことも多い気がします。

使い方

gatsby-config.jsの編集が完了すれば、指定したエイリアスを使えるようになります。ドットとスラッシュがなくなってスッキリしましたね。

import Nav from '@components/Nav'
import '@sass/styled.scss'

gatsby-plugin-guess-js

こちらはGoogle Analytics などのデータを機械学習にかけてプリレンダリング/プリフェッチしてくれるGuess.jsの Gatsby プラグインです。
ちなみにGatsby 創始者のKyle Mathewsさんも Guess.js の開発チームに入っているみたいですね。

自動ビルドをするときには JWT が必要になる

Guess.jsでは Google Analytics のデータを利用するので、Google アカウントの認証が必要になります。

手動でビルドする場合には、出てきたポップアップをクリックすればそれで完了なのですが、CI のパイプライン内ではそうもいかないので、自動ビルドを利用する場合には JWT を利用した認証が必要になります。

インストール

まずはプラグインをインストールします。

npm install --save gatsby-plugin-guess-js

gatsby-config.js を編集

インストールができたら、gatsby-config.jsファイルを編集していきましょう。
詳しい記載内容はリンク先の記事が参考になります。

plugins: [
  {
    resolve: "gatsby-plugin-guess-js",
    options: {
      // Find the view id in the GA admin in a section labeled "views"
      GAViewID: `VIEW_ID`,
      minimumThreshold: 0.03,
      // Set Google Analytics jwt with Google Service Account email and private key
      jwt: {
        client_email: `GOOGLE_SERVICE_ACCOUNT_EMAIL`,
        private_key: `GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY`,
      },
      // The "period" for fetching analytic data.
      period: {
        startDate: new Date("2018-1-1"),
        endDate: new Date(),
      },
    },
  },
],

gatsby-plugin-nprogress

次に紹介するのは、プログレスバーを表示してくれるプラグインです。

個人的には別のページに移動するボタンを押しても何も反応がないと動いているのか心配になるので、プログレスバーのように何かしら動いていることが分かるだけでも、離脱しようかという心の中の迷い（大げさ）が減っていいんじゃないかと思います。こちらのプラグインでは、ページ遷移に 1 秒以上かかるときにプログレスバーを表示してくれます。

インストール

npm install --save gatsby-plugin-nprogress

gatsby-config.js を編集

gatsby-config.jsでは次のような設定をすることができます。

ちなみにこちらのプラグインは NProgress というライブラリがベースになっているのですが、NProgress のオプションはすべて使えるようです。詳しくはGitHubのページをご覧ください。

plugins: [
  {
    resolve: `gatsby-plugin-nprogress`,
    options: {
      // Setting a color is optional.
      color: `tomato`,
      // Disable the loading spinner.
      showSpinner: false,
      minimum: 0.08,
      easing: 'linear',
      positionUsing: '',
      speed: 200,
      trickle: true,
      trickleSpeed: 200,
      barSelector: '[role="bar"]',
      spinnerSelector: '[role="spinner"]',
      parent: 'body',
      template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
    },
  },
]

gatsby-plugin-smoothscroll

次に紹介するのは、gatsby-plugin-smoothscrollというスムーズスクロールを簡単に実装できる Gatsby プラグインです。

ちなみにこちらのプラグインはSmooth Scroll behavior polyfillを使っているみたいですね。プラグインの公式サイトはこちら↓です。

インストール

npm install gatsby-plugin-smoothscroll

gatsby-config.js を編集

オプションは用意されていないので、gatsby-config.jsにはプラグイン名のみを書けば大丈夫です。

plugins: [
  `gatsby-plugin-smoothscroll`
]

使い方

gatsby-plugin-smoothscrollではscrollToというメソッドでスムーズスクロールを実装できます。

ちなみにscrollToメソッドはdocument.querySelector()を使っているので、scrollToの引数にdocument.querySelector()で使える引数を渡さないとエラーになってしまいます。しかもクリックして初めてエラーであることが分かったりするので、引数には注意が必要です。

※ document.querySelector()では、引数に要素の ID やクラス、 HTMLタグの名前を渡すことができます。

ページ内リンク

たとえばスムーズにスクロールするページ内リンクを作るときには、次のように書くことができます。ボタンをクリックしたときにscrollToメソッドを実行して#elem1という要素に移動させています。

import scrollTo from 'gatsby-plugin-smoothscroll';
export default () => (
  <button onClick={() => scrollTo('#elem1')}>1番目の位置に移動</button>
)

トップに戻るボタン

トップに戻るボタンについても、scrollToメソッドを使って実装することができます。scrollToメソッドではHTMLタグの名前を引数に設定できるので、次のようにhtmlタグを引数として渡せば、トップに戻るボタンのできあがりです。

import scrollTo from 'gatsby-plugin-smoothscroll';
export default () => (
  <button onClick={() => scrollTo('html')}>トップに戻る</button>
)

SEO 関係

では、ここからはSEO関係のプラグインについて見ていきましょう。

Gatsby Plugin Next SEO

Gatsby サイトの SEO を強化するときにオススメしたいのが、Gatsby Plugin Next SEOというプラグインです。デフォルトでもSEOコンポーネントが用意されていますが、それよりも細かい設定ができるようになります。

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

Gatsby Plugin Next SEOを使うときにはreact-helmet-asyncというパッケージも必要になるので、一緒にインストールします。

npm install --save gatsby-plugin-next-seo react-helmet-async

gatsby-plugin-react-helmet

gatsby newコマンドで最初からインストールされているお馴染みのプラグインです。

簡単なコードでheadの中にタグを追加できるので、SEOで必要なタグを追加するときにはとても便利です。

インストール

Gatsbyサイトをgatsby newコマンドで初期化した場合には自動でインストールされますが、もしそれ以外の方法で作るときや削除してしまったときには、次のコードでインストールできます。

npm install --save gatsby-plugin-react-helmet react-helmet

gatsby-config.js を編集

gatsby-config.jsについてもgatsby newコマンドで生成した場合には、次のようにプラグイン名が書き込まれた状態で生成されます。

plugins: [
  `gatsby-plugin-react-helmet`,
]

使い方

raect-helmetはHelmetコンポーネントで追加したいタグを囲むだけ。これでhead内に追加されます。

import { Helmet } from "react-helmet"
export default () => {
  return (
    <>
      <Helmet>
        <script>...</script>
        <meta name="..." ... />
        <link rel="..." ... />
      </Helmet>
    </>
  )
}

gatsby-plugin-sitemap

名前の通りサイトマップを生成してくれるGatsbyプラグインです。

簡単な設定をすれば自動でサイトマップを生成してくれるので、とても便利。サイトマップは一般的なサイトなら使うものだと思うので、gatsby-plugin-sitemapを使っている方も多いかもしれないですね。

サイトマップは（開発環境ではなく）本番環境で自動生成される

気をつけてほしいのが、サイトマップは production モードでないと自動生成されないということです。

開発環境ではそのままの状態ではサイトマップが生成されませんが、gatsby build && gatsby serveコマンドを実行すれば、ローカルPCでもサイトマップが生成されるようになります。本番サイトで生成されることになるサイトマップに問題がないか確認したいときに使うといいかもしれないですね。

インストール

npm i --save gatsby-plugin-sitemap

gatsby-config.js の編集

gatsby-plugin-sitemapではgatsby-config.jsで出力先に指定がなければ/sitemap.xmlに生成されます。

もし別の出力先を指定したいときや、サイトマップから除外したいページがあるときは、次のようにgatsby-config.jsを編集します。

plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `/sitemap-path.xml`,
      exclude: [`/thanks`, `/category/*`],
    }
  },
]

もしサイトマップから除外したいページなどもなく、デフォルトの設定で問題ないときには、プラグインの名前だけgatsby-config.jsに追加すれば大丈夫です。

plugins: [
    `gatsby-plugin-sitemap`,
]

gatsby-plugin-canonical-urls

gatsby-plugin-canonical-urlsはサイト全体で canonical の設定をするときに便利なプラグインです。httpとhttpsの区別や、wwwのあり/なしの区別などを行うことができます。

インストール

npm install --save gatsby-plugin-canonical-urls

gatsby-config.js の編集

plugins: [
  {
    resolve: `gatsby-plugin-canonical-urls`,
    options: {
      siteUrl: `https://www.example.com`,
    },
  },
]

各ページの canonical 設定をするとき

gatsby-plugin-canonical-urls ではサイト全体の canonical 設定ができますが、それぞれのページで canonical を設定するときはreact-helmetを使うといいかもしれません。たとえば評価対象をhttps://example.com/dresses/green-dressesにしたいとき、次のようなコードを追加すればページごとのcanonical設定をすることができます。

import { Helmet } from "react-helmet"
export default () => (
  <>
    <Helmet>
      <link rel="canonical" href="https://example.com/dresses/green-dresses" />
    </Helmet>
  </>
)

gatsby-plugin-robots-txt

次に紹介するのは、簡単な設定だけでrobots.txtファイルを生成してくれるプラグインです。robots.txtも一般的なサイトでは使う機会が多いので、こちらのプラグインも使っている方は多いかもしれないですね。

インストール

npm install --save gatsby-plugin-robots-txt

gatsby-config.js の編集

siteMetadata: {
  siteUrl: 'https://www.example.com'
},
plugins: [
  {
    resolve: 'gatsby-plugin-robots-txt',
    options: {
      host: 'https://www.example.com',
      sitemap: 'https://www.example.com/sitemap.xml',
      policy: [{ userAgent: '*', allow: '/' }]
    }
  }
]

gatsby-plugin-offline

こちらのgatsby-plugin-offlineというプラグインは、先ほど紹介したgatsby-plugin-manifestと組み合わせて、サイトを PWA（Progressive Web Apps）化してくれます。

サイトを PWA 化するには

では、gatsby-plugin-offlineを使ってGatsbyサイトをPWA化する方法について見ていきましょう。GoogleもPWAを推してるみたいですし、何より簡単にPWA化できるので、特に理由がなければPWA化しておくといいかもしれません。

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

GatsbyサイトをPWA化するときには、gatsby-plugin-manifestのプラグインとセットで指定します。gatsby-plugin-manifestはファビコンの設定で活躍するのですが、このプラグインの下で紹介しているので、もし興味があればぜひご覧ください。

npm install --save gatsby-plugin-offline gatsby-plugin-manifest

gatsby-config.js の編集

通常ならmanifest.jsonに書くような内容をgatsby-config.jsファイルで設定することができます。

plugins: [
  `gatsby-plugin-offline`,
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
    },
  },
]

もしプリキャッシュしたいページやService Worker用のJSファイルを使用する場合には、次のように指定することができます。

{
  resolve: `gatsby-plugin-offline`,
  options: {
    precachePages: [`/about-us/`, `/projects/*`],
    appendScript: require.resolve(`src/custom-sw-code.js`),
  },
},

gatsby-plugin-manifest

gatsby-plugin-offlineでも触れましたが、ファビコンを設定するときに便利なプラグインです。PWA化するときにgatsby-plugin-offlineとセットのように使われることが多いんじゃないかと思います。

ファビコンの設定方法

gatsby-plugin-manifestの使い方を紹介すると、そのままファビコンの設定方法のような文章になってしまうので、開き直って（？）ファビコンの設定方法を紹介したいと思います。

インストール

npm install --save gatsby-plugin-manifest

gatsby-config.js の編集

plugins: [
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      // Faviconの設定
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
    },
  },
],

画像を用意

では、ファビコンとして表示したい画像を用意しましょう。以下は注意しておきたいポイントになります。

（画像の配置場所とファイル名）

ファビコン用の画像はimages/icon.pngなど、管理しやすいディレクトリ名やファイル名をつけておきます。

（画像サイズ）

アイコンのサイズは指定しない限り 512×512 が最大サイズになるので、512×512 以下のサイズで用意しておけば大丈夫です。ブラウザでも通常は正方形のファビコンが表示されるので、特な理由がなければ正方形の画像を用意しておくといいんじゃないかと思います。

（画像のファイル形式）

ファイル形式は JPEG や PNG、WebP、TIFF、GIF、SVG を使用できます。ちなみにジェネレーターを使ったり、.ico というファイル形式に変換しなくても大丈夫です。

複数サイズのファビコンを設定するとき

もし複数サイズのファビコンを設定したい場合には、次のようにiconsオプションを追加すれば大丈夫です。

plugins: [
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      // Faviconの設定
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
      icons: [
        {
          src: `/favicons/android-chrome-192x192.png`,
          sizes: `192x192`,
          type: `image/png`,
        },
        {
          src: `/favicons/android-chrome-512x512.png`,
          sizes: `512x512`,
          type: `image/png`,
        },
      ], // Add or remove icon sizes as desired
    },
  },
],

スタイル関係

ここまでオススメのプラグインやSEO関係のプラグインを紹介してきましたが、次に紹介したいのがスタイル関係のGatsbyプラグインです。

ここからはGatsbyプラグインを使ってSassやStyled Components、emotionを使う方法を紹介したいと思います。

Sass を使うとき

まずはGatsbyサイトでSass（Scss）を使う方法ついて見ていきましょう。

インストール

node-sassとgatsby-plugin-sassをインストールします。

npm install --save node-sass gatsby-plugin-sass

gatsby-config.js を編集

必要なパッケージをインストールしてgatsby-config.jsを編集すれば、Sassを使う準備は完了です。

plugins: [
  `gatsby-plugin-sass`
],

SassファイルはJS（TS）ファイルから読み込めばOK

GatsbyでSassを使うときには、作成した.sass（.scss）ファイルをJavaScriptやTypeScriptのファイルで読み込めばOKです。

$primary-color: tomato;
body {
  background: $primary-color;
}

読み込みはCSSと同じようにimportを使うことができます。

import '../styles/common.scss'

Styled Components を使うとき

では、Styled Components を使う方法についても見ていきましょう。

インストール

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

gatsby-config.jsを編集

gatsby-config.jsにプラグイン名を書き込めば、Styled Componentsを使う準備は完了です。

plugins: [
  `gatsby-plugin-styled-components`
]

emotion を使うとき

スタイル関係の最後は emotion を使う方法です。

インストール

npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled

gatsby-config.js を編集

emotion では、babel-plugin-emotionのオプションをすべて利用できます。

plugins: [
  {
    resolve: `gatsby-plugin-emotion`,
    options: {
      // 以下はすべてデフォルトと同じ設定です
      "sourceMap": true,
      "autoLabel": process.env.NODE_ENV !== 'production',
      "labelFormat": "[local]",
      "cssPropOptimization": true
    }
  }
],

上のoptionsにいくつか設定を書きましたが、それぞれの設定がどういったものなのか見ていきましょう。

sourceMap

sourceMapをtrueにすると、ブラウザの開発者ツールで利用できるsourcemapファイルを出力してくれるようになります。

autoLabel

オプションで指定したprocess.env.NODE_ENV !== 'production'の本番環境ではないローカル環境などでコンポーネント名をクラス名に含めてくれます。どういうことかと言うと、たとえばH1と名前をつけたコンポーネントを使ったときに生成されるクラス名はcss-hash-H1といった形になるというものです。

labelFormat

labelFormatはautoLabelの（クラス名の）表示形式を指定できる項目になります。autoLabelありきの設定項目なので、autoLabelがtrueのときのみ動作します。

// gatsby-config.js で
// autoLabel: true
// labelFormat: '[filename]--[local]'   と設定したとき
// たとえば BrownView.js という名前のファイルで次のコードを記述
const brownStyles = css({ color: 'brown' })
// すると????
// process.env.NODE_ENV !== 'production' のときのクラス名は
// css-hash-BrownView--brownStyles に！

マークダウン関係

ここからは、 マークダウン（.md）をデータソースとするときに便利なプラグインを紹介したいと思います。

下で紹介するプラグインはgatsby-transformer-remarkの拡張になるので、次のようにgatsby-transformer-remarkのオプションの中に書いていきます。他のプラグインと少し書き方が違うので注意してくださいね。

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      // gatsby-transformer-remark の機能を拡張するプラグイン
      plugins: [
        `plugin-1`,
        `plugin-2`
      ]
    }
  }
]

gatsby-remark-copy-linked-files

マークダウン関係で最初に紹介したいのがgatsby-remark-copy-linked-filesというプラグイン。最初の状態ではマークダウンで読み込んでくれない.gifや.svg、.pdfなどのファイルを使うときに便利です。

.jpgや.pngではちゃんと表示されるのに、なぜか.gifではエラーが表示されてしまう場合には、このプラグインで解決されるかもしれません。

インストール

npm install --save gatsby-remark-copy-linked-files

gatsby-config.js を編集

では、gatsby-config.jsについて見ていきましょう。

オプションのdestinationDirではファイルのコピー先となるディレクトリを指定することができます。また、ignoreFileExtensionsに拡張子を指定することで、コピーしないファイルの拡張子を指定することができます。

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-copy-linked-files`,
          options: {
            // コピー先のディレクトリを指定
            destinationDir: `static/assets`,
            // コピーしないファイルの拡張子を指定
            ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
          },
        },
      ],
    },
  },
]

pngやjpg、jpegなどの拡張子はコピーしなくてもOK

上のコードでは.pngや.jpgなどのファイルをignoreFileExtensionsで指定することによってコピーしないように設定していました。

Gatsbyサイトでは .png や .jpg はもともと最適化した状態で（コピーして）読み込まれるので、特に理由がない限りは（こちらのプラグインでコピーせず）Gatsbyに画像の最適化を任せてしまえばいいんじゃないかと思います。

gatsby-remark-images-medium-zoom-plugin

次に紹介したいのが、画像をクリックすると拡大して表示してくれるmedium-zoom のGatsbyプラグインです。下の画像のように、スムーズな動きで画像を拡大表示してくれます。

インストール

npm install --save gatsby-remark-images-medium-zoom gatsby-remark-images gatsby-transformer-remark

gatsby-config.js を編集

gatsby-config.jsを編集するときに注意してほしいのが、gatsby-remark-imagesのlinkImagesToOriginal は false にする必要があるということです。

gatsby-transformer-remark（.md）を使うとき

データソースをマークダウン（.md）とするときは、次のような設定でプラグインを使うことができます。

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            linkImagesToOriginal: false // Important!
          }
        },
        {
          resolve: `gatsby-remark-images-medium-zoom`, // Important!
          options: {
            margin: 24,    /* 画像の外側の余白 */
            background: '#BADA55',    /* 拡大したときの背景 */
            scrollOffset: 40,    /* どれくらいスクロールしたら拡大をやめて通常の表示に戻すか */
            // container: '#zoom-container',    /* カスタムビューポートを使うときの設定 */
            // template: '#zoom-template',    /* カスタムテンプレートを使うときの設定 */
            // zIndex: 9999,    /* z-index の値 */
          }
        }
      ]
    }
  }
]

gatsby-plugin-mdx（.mdx）を使うとき

データソースがマークダウンではなくMDX（.mdx）の場合には次のようになります。
マークダウンの場合とほとんど同じなのですが、pluginsとgatsbyRemarkPluginsの両方にgatsby-remark-images-medium-zoomを入れる必要があります。

plugins: [
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      // a workaround to solve mdx-remark plugin compat issue
      // https://github.com/gatsbyjs/gatsby/issues/15486
      plugins: [
        `gatsby-remark-images`,
        `gatsby-remark-images-medium-zoom` // Important!
      ],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            linkImagesToOriginal: false // Important!
          }
        },
        {
          resolve: `gatsby-remark-images-medium-zoom`, // Important!
          options: {
            // gatsby-transformer-remark の場合と同じ
          }
        }
      ]
    }
  }
]

gatsby-remark-autolink-headers

gatsby-remark-autolink-headersは見出しに自動で ID を振ってくれるGatsbyプラグインです。
ページ内リンクや目次（TOC）を作るときに便利ですね。

インストール

npm install --save gatsby-remark-autolink-headers

gatsby-config.js を編集

gatsby-remark-autolink-headersのプラグインを使うときに注意しておきたいのが、gatsby-remark-prismjsを使うときはgatsby-remark-autolink-headersの後にgatsby-remark-prismjsの名前を書く必要があるということです。

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        // ここで紹介しているプラグイン
        `gatsby-remark-autolink-headers`,
        // gatsby-remark-prismjs を使うときには
        // gatsby-remark-autolink-headers よりも後ろに書く
        `gatsby-remark-prismjs`,
      ],
    },
  }
]

gatsby-remark-check-links

では、次のプラグインに移っていきましょう。
gatsby-remark-check-linksはマークダウン形式のファイル内にリンク切れがあったときに、コンソール上で教えてくれるプラグインです。

リンク切れはGoogleからの評価も落ちてしまいやすいので、こういうプラグインを使ってリンク切れがないように管理しておくのも大事かもしれませんね。

表示内容

gatsby-remark-check-linksを使っているとき、リンク切れを検知すると次のような表示になります。

3 broken links found on /examples/react/
- /foo/bar/
- /intro/#some-hash
- /intro/#some-other-hash
⠀
2 broken links found on /intro/
- /foo/baz/
- /examples/ract/
⠀
5 broken links found

インストール

npm install gatsby-remark-check-links

gatsby-config.js を編集

gatsby-remark-check-links は gatsby-remark-autolink-headers のハッシュもチェックしてくれます。そのためgatsby-remark-autolink-headersのプラグインも一緒に使っているときには、gatsby-remark-autolink-headers の下にgatsby-remark-check-linksの名前を書くのがオススメです。

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        // この順番で書くのがオススメ ↓
        'gatsby-remark-autolink-headers',
        'gatsby-remark-check-links'
      ]
    }
  }
]

リンクチェック除外などの設定をするとき

gatsby-remark-check-linksのプラグインではignoreの項目を設定をすることによって、リンクチェックしなくてもいいページを設定することができます。こういう細かい設定ができるのも、いろいろな状況に対応できて嬉しいですね。

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        // gatsby-remark-autolink-headers を使うとき
        'gatsby-remark-autolink-headers',
        {
          resolve: 'gatsby-remark-check-links',
          options: {
            // リンク切れのチェックを無効に
            ignore: [
              '/foo/bar',
              '/generated/docs/'
            ],
            // リンク切れとしてカウントしたくないときに設定
            exceptions: [
              '/bar/baz/',
              '/dynamic/headings/'
            ],
            // コンソール上のログと警告の表示を無効に
            verbose: false,
          }
        }
      ]
    }
  }
]

gatsby-remark-external-links

gatsby-remark-external-linksは本文にある外部リンクを別タブで開くように書き換えてくれるプラグインです。

マークダウンで文章を書いていると、外部リンクで開くようにするというのが地味に大変（というか面倒）ですよね。でも、gatsby-remark-external-linksだったら外部リンクを別タブで開くように処理してくれるので、細かいことを気にせずマークダウン記法で書けて便利なんじゃないかと思います。

インストール

yarn add gatsby-remark-external-links

gatsby-config.js を編集

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
      {
        resolve: "gatsby-remark-external-links",
        options: {
          // デフォルトは _blank
          target: "_self",
          // デフォルトは nofollow noopener noreferrer
          rel: "noopener noreferrer"
        }
      }
      ]
    }
  },
]

gatsby-plugin-feed

マークダウン関係の最後に紹介するのは、GatsbyサイトでRSSフィードを実装できるようになるプラグイン gatsby-plugin-feed です。

具体的な使い方については、以下のサイトの記事が分かりやすいと思います。

Mdx を使うときに便利なプラグイン

最後はMDX（.mdx）を使うときに便利なプラグインの紹介です。

MDX 導入に必要なgatsby-plugin-mdxの使い方については、下のリンク先が分かりやすいと思います。

gatsby-plugin-feed-mdx

マークダウンの場合と同じように、RSS フィードを生成してくれます。
gatsby-plugin-feed-mdx（公式サイト）

さいごに

今回はGatsby.jsのおすすめプラグインをまとめて紹介してみました。

こうやってまとめてみると、やっぱりGatsbyのプラグインは数も多いし便利なものが揃っていますね。これから先まだまだいろいろなGatsbyプラグインが出てくると思うので、オススメしたいプラグインが出てきたらこちらの記事も更新していきたいと思います。

それでは今回はこのあたりで。最後まで閲覧ありがとうございました。