Gatsbyを使っていて個人的に便利だと思うのが、Gatsbyプラグインです。
Google Analyticsのような有名どころのプラグインはもちろん、ちょっとした機能のプラグインも用意されていて、僕の中ではGatsbyサイトの開発にプラグインは欠かせません。
そこで今回の投稿では、僕が使ってみて便利だと思ったプラグインを目的別に分けて紹介していきたいと思います。

特にオススメしたいプラグイン
今回は紹介したいプラグインが多いので、まずは特にオススメしたいプラグインからご紹介します。
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 keyjwt: {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/15486plugins: [`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: {// デフォルトは _blanktarget: "_self",// デフォルトは nofollow noopener noreferrerrel: "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プラグインが出てくると思うので、オススメしたいプラグインが出てきたらこちらの記事も更新していきたいと思います。
それでは今回はこのあたりで。最後まで閲覧ありがとうございました。