はじめに

一度整理も兼ねて、このブログで使用しているプラグインをまとめました。

増減するかもしれないので、随時更新していくかもしれません。

gatsby-plugin-google-gtag

• Google Analytics4 に対応したプラグイン
• gatsby-plugin-google-analyticsは GA4 に対応していない

gatsby-plugin-robots-txt

• Gatsby 製のサイトで robots.txt を作成するためのプラグイン
• robots.txt は検索サイトのクローラを制御する
  • 具体的には検索サイトにインデックスさせたいページや、そうでないページなど

gatsby-plugin-sitemap

• サイトマップを生成するためのプラグイン

gatsby-remark-images

• 投稿記事（Markdown）内の画像を表示させるためのプラグイン

gatsby-plugin-react-helmet

• head 要素（メタタグ）をカスタマイズするためのプラグイン
• 初期状態ではメタタグやタイトルも表示されない

gatsby-plugin-disqus

• Gatsby サイトに Disqus のコメント機能を導入するプラグイン

gatsby-plugin-feed

• RSS フィードを生成するプラグイン

gatsby-plugin-image

• StaticImage と GatsbyImage の 2 つのコンポーネントを使う

• Web サイトのパフォーマンスを考慮しながらレスポンシブな画像をサイトに追加することが出来る

• 読み込み時にボヤッと表示させたりすることが出来る

• 他に必要なプラグイン

  • gatsby-plugin-image
  • gatsby-plugin-sharp
  • gatsby-transformer-sharp

gatsby-transformer-sharp

• 画像読み込みで ImageSharp ノードを生成する
  • gatsby-plugin-sharpと併用する
• トリミング、リサイズ、レスポンシブ画像など色々加工できる

@fortawesome/fontawesome-svg-core

• FontAwesome でアイコンを表示させるためのプラグイン
• 他にも以下のプラグインが必要
  • @fortawesome/free-brands-svg-icons
  • @fortawesome/free-regular-svg-icons
  • @fortawesome/free-solid-svg-icons

@fortawesome/react-fontawesome

• @fortawesome/fontawesome-svg-core との違いは不明

gatsby-plugin-manifest

• スマホでホーム画面に追加した際にアイコンを表示させる
  • PWA（プログレッシブウェブアプリ）を実装

gatsby-plugin-offline

• Workbox Build を使用してサイトの ServiceWorker を作成し、サイトアクセス時にクライアント側に Service worker をロードさせ、ServiceWorker を用いた機能を使えるようにするためのプラグイン

設定参考記事

gatsby-remark-autolink-headers

• マークダウンで記載しているブログ内の <h1> タグなどのタグに、URL フラグメント付きのリンクを付けることができるプラグイン

設定参考記事

gatsby-remark-component

• Markdown 内でコンポーネントを使用できるようにするプラグイン
• <card slug="/内部リンクしたい記事の日付/"></card>のように独自の内部リンクのコンポーネントを作成できる
• その他にも独自のコンポーネントを Markdown で使用出来る

gatsby-remark-copy-linked-files

• Markdown 内からリンクしたファイルを自動的にリリース対象としてコピーするためのプラグイン

設定参考記事

gatsby-remark-external-links

• 外部へのリンクは、別タブで開くように設定するためのプラグイン

gatsby-remark-gifs-to-videos

• Markdown の記事で読み込んだ GIF ファイルを MP4 動画に変換して自動再生するプラグイン

gatsby-remark-prismjs-title

• Markdown の記事でコードスニペットの前にコードのタイトルを追加するプラグイン

gatsby-remark-responsive-iframe

• Markdown の記事内で iframe タグを使用するためのプラグイン

gatsby-remark-smartypants

• retext-smartypants プラグインを使用して句読点を置き換える？

gatsby-source-filesystem

• ローカルファイルシステムからデータを取り込むためのプラグイン

{
  allFile(filter: { sourceInstanceName: { eq: "data" } }) {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

gatsby-transformer-remark

• Remark を使用して Markdown ファイルを解析するプラグイン

rehype-react

• HTML を React のノードにコンパイルするプラグイン

おわりに

こうして一覧にしてみると意外とプラグインを使用していることが分かりました。それだけ Gatsby の開発が活発なのかもしれませんが今後の動向を見据えて行きたいと思います。