Gatsbyプラグイン45選 #JavaScript

module.exports = {
  plugins: [
    // オプションなしで指定する場合は下記のようにプラグイン名を文字列で指定しましょう。
    "gatsby-plugin-react-helmet",
    // オプションありの場合は、オブジェクトで指定します。
    {
      resolve: `gatsby-source-filesystem`,
      // オプションはさらにオブジェクトで指定します。
      options: {
        path: `${__dirname}/src/data/`,
        name: "data",
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // プラグイン自体を拡張するプラグインを指定できます。
        // その場合はオプションのpluginsにプラグインを定義しましょう。
        plugins: [`gatsby-remark-smartypants`],
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      // 下記のように空オプションの場合は、プラグイン名を文字列で指定した場合と同じです。
      options: {
        plugins: [],
      },
    },
  ],
}

※ 詳細はGatsbyプラグインの使い方･作り方･公開方法 | Takumon Blogを参照してください。

マークダウン系

ここで紹介するプラグインはgatsby-transformer-remarkの拡張です。

そのためプラグインを使う時は、gatsby-config.jsではgatsby-transformer-remarkのオプションとして定義します。

gatsby-config.jsの一部

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: true,
            noInlineHighlight: false,
          },
        },
      ],
    },
  },
]

gatsby-remark-autolink-headers

マークダウンで見出しにGitHub風ホバーリンクをつける

見出しホバー時に鎖アイコンリンクが表示されます。
リンクを指定して初期表示すると見出しまでスクロースしてくれるので便利です。

設定

オプションでアイコン、アイコンの位置、アイコンのクラス名を指定できます。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              offsetY: `100`,
              icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
              className: `custom-class`,
            },
          },
        ],
      },
    },
  ],

補足

公式サイトには下記記述がありますが
起因となったissue 5764はもう解決済みたいなので、定義順は特に気にする必要なさそうです。

gatsby-remark-prismjsと一緒に使う場合は必ず後に定義してください。

gatsby-remark-embed-snippet

マークダウンでJavaSriptファイルなどを読み込んでコードブロックに埋め込む

設定

directoryは読み込み対象資産のフォルダを指定します。

必ずgatsby-remark-prismjsより前に指定してください。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-snippet",
            options: {
              classPrefix: "language-",
              directory: `${__dirname}/examples/`,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: true,
            },
          },
        ]
      }
    }
  ]

使い方

マークダウンで`embed:設定で指定したディレクトリからの相対パス`のように指定します。
指定行を強調したい場合は、読み込み対象ファイルにコメントで記述します。

JavaScriptファイルの場合

読み込み対象ファイル

examples/2018/10/21/sample.js

import React from "react"
import ReactDOM from "react-dom"

const name = "Brian"

// highlight-range{2-3}
ReactDOM.render(
  <div><h1>Hello, ${name}!</h1></div>,
  document.getElementById("root")
);

マークダウン記述


`embed:2018/10/21/sample.js`

表示結果

CSSファイルの場合

読み込み対象ファイル

examples/2018/10/21/sample.css

html {
  /* highlight-range{1-2} */
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box; /* highlight-line */
}

マークダウン記述


`embed:2018/10/21/sample.css`

表示結果

HTMLファイルの場合

読み込み対象ファイル

examples/2018/10/21/sample.html

<html>
  <body>
    <h1>highlight me</h1> <!-- highlight-line -->
    <p>
      <!-- highlight-next-line -->
      And me
    </p>
  </body>
</html>

マークダウン記述


`embed:2018/10/21/sample.html`

表示結果

YAMLの場合

読み込み対象ファイル

examples/2018/10/21/sample.yaml

foo: "highlighted" # highlight-line
bar: "not highlighted"
# highlight-range{1-2}
baz: "highlighted"
quz: "highlighted"

マークダウン記述


`embed:2018/10/21/sample.yaml`

表示結果

gatsby-remark-copy-linked-files

マークダウンのリンクや画像で使われているPDFや動画などをビルド時にpublicフォルダにコピーする

設定

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: ["gatsby-remark-copy-linked-files"],
      },
    },
  ]

コピー先をpublic以外にしたい場合はオプションを指定します。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'path/to/dir',
            }
          }
        ]
      }
    }
  ]

コピー対象外ファイル指定することもできます。その場合はignoreFileExtensionsを設定します。
このプロパティは["png", "jpg", "jpeg", "bmp", "tiff"]がデフォルトです。
というのも、これらのファイルはgatsby-remark-imagesを使って自動的にレスポンシブな画像が生成されることを前提にしているからです。
もしgatsby-remark-imagesを使わずにpublicファイルへの単純コピーにしたい場合は下記のようにします。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              ignoreFileExtensions: [],
            },
          },
        ],
      },
    },
  ]

gatsby-remark-images

マークダウンで画像をスマートに表示できるようにする

画像ロード後にレイアウトがガタっとずれないように、画像の大きさ分の空要素を確保しておく
ブラウザ幅別に画像を生成しimgタグのsrcset属性とsizes属性を設定します
画像を20px幅に小さくしたものを、画像ロード中にプレースホルダーとして表示します。これはMediumとFacebookで使われているテクニックです。

設定・使い方

gatsby-remark-images、gatsby-plugin-sharpとあわせて使いましょう。
オプションに指定したmaxWidthにあわせて、プラグインがいい感じの色々サイズの画像を複数生成してくれます。

gatsby-config.jsの一部

  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
  ]

gatsby-remark-responsive-iframe

マークダウンでiframeタグを縦横比固定でレスポンシブにする

使い方

gatsby-config.jsの設定は特に変わったところはありません。
ただし縦横比を明確にするためマークダウン中のiframeにはwidthとheigth属性を必ず指定してください。

マークダウンサンプル

This is a beautiful iframe:

<iframe url="http://www.example.com/" width="600" height="400"></iframe>

gatsby-remark-embed-youtube

マークダウンでYoutubeを埋め込めるようにする

設定

オプションに高さと幅を指定できます。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-youtube",
            options: {
              width: 800,
              height: 400
            }
          }
        ]
      }
    },
  ]

一注意があって、gatsby-remark-responsive-iframeをあわせて使う場合は必ずその前に定義してください。

gatsby-config.jsの一部

        plugins: [
          "gatsby-remark-embed-youtube",
          "gatsby-remark-responsive-iframe"
        ]

使い方

マークダウンで下記のように記載します。URLの最後(embed/2Xc9gXyf2G4)は動画のIDです。

マークダウンサンプル

# Look at this Video:

`youtube:https://www.youtube.com/embed/2Xc9gXyf2G4`

表示結果

gatsby-plugin-twitter

マークダウンでTwitterの埋め込み用スクリプトを記述できるようにする

こちらのプラグインもう少しスマートになってほしいです（ちょっとめんどくさいです）。
使い方はGatsbyでYouTubeとTwitter埋め込み | Takumon Blogを参照してください。

使い方

マークダウンには下記のように記載します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">最近忙しかったのでアレですが、ブログ更新しました。<br><br>Reactで構造化データマークアップ（JSON-LD対応） <a href="https://t.co/7V49VqH9WI">https://t.co/7V49VqH9WI</a> <a href="https://twitter.com/inouetakumon?ref_src=twsrc%5Etfw">@inouetakumon</a>さんから</p>&mdash; takumontakumon (@inouetakumon) <a href="https://twitter.com/inouetakumon/status/1046062825037344770?ref_src=twsrc%5Etfw">2018年9月29日</a></blockquote>

表示結果

SEO系

gatsby-plugin-react-helmet

React HelmetをGatsbyビルド時使えるようにする

実用例は過去記事Reactで構造化データマークアップ（JSON-LD対応)を参照してください。

gatsby-plugin-offline

低速ネットワーク環境やオフライン環境でもWebサイトをスムーズに見れるようにする

ビルド時にサービスワーカーを生成してくれます。
gatsby-plugin-manifestとの併用推奨です。
このプラグインはWorkboxの設定を従っており、必要に応じてgatsby-config.jsで上書くという感じです。Workboxは宣言的な記述だけで最適なServiceWorkerのコードが生成できるライブラリで、下記にわかりやすく書かれていました。
- 参考：ServiceWorkerを簡単に書けるworkbox-swの使い方 | Qiita

gatsby-plugin-manifest

アプリをPWA対応にする（manifest.webmanifestを生成する）

サイトにmanifest.webmanifestを配置することで、スマホでブログを見たときに、ネイティブアプリのようなUXを実現できます。
gatsby-plugin-offlineとの併用推奨です。
詳細はGatsbyでPWA対応 |Takumon Blogを参照してください。

gatsby-plugin-sitemap

サイトマップを生成する

設定・使い方

プラグインでいい感じの設定があらかじめされているので、最低限設定するならsiteUrlを指定するだけです。個別にオプションを設定する場合は、いい感じの設定を参考にしましょう。

gatsby-config.jsの一部

  siteMetadata: {
    siteUrl: `https://www.example.com`,
  },
  plugins: [`gatsby-plugin-sitemap`]

これだけで下記のようなサイトマップが生成できます。

<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://takumon.com//2018/10/14/</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://takumon.com//2018/10/12/</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://takumon.com//2018/10/08/</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  <!-- ・・・ -->
  <!-- Webサイト上の全てのURL定義 -->
  <!-- ・・・ -->
</urlset>

gatsby-plugin-canonical-urls

canonical linksを追加する

* canonical linksは検索エンジンに対して、プロコトルが違ったりクエリストリングがついていても同一のサイトのURLだということを宣言するためのリンクです。

設定・使い方

オプションとしてsiteUrlを指定します。

gatsby-config.jsの一部

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

すると下記リンクタグがHTML内に埋め込まれます。

<link rel="canonical" href="http://www.example.com/about-us/" />

gatsby-plugin-feed

RSSフィードを作る

設定

gatsby-config.jsでsiteMetadataを設定しプラグインを定義するだけでOKです。

gatsby-config.jsの一部

  siteMetadata: {
    title: `GatsbyJS`,
    description: `Blazing fast modern site generator for React`,
    siteUrl: `https://www.gatsbyjs.org`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-feed`
    }
  ]

このプラグインを使うと、ビルドでpublic配下にrss.xmlが生成されます。
自分の場合はFeedlyの登録ボタンと、rss.xmlへのリンクをブログのトップに設けています。

gatsby-plugin-robots-txt

robots.txtを生成する

robots.txtは検索エンジンのクロールを最適化するためのテキストファイルです。SEO対策に使われます。

設定・使い方

オプションでホストURLやサイトマップを指定できます。

gatsby-config.jsの一部

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

NetlfyでDeploy Preview機能を使うなら下記のような設定にします。

gatsby-config.jsの一部

const {
  NODE_ENV,
  URL: NETLIFY_SITE_URL = 'https://www.example.com',
  DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
  CONTEXT: NETLIFY_ENV = NODE_ENV
} = process.env;
const isNetlifyProduction = NETLIFY_ENV === 'production';
const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL;

module.exports = {
  siteMetadata: {
    siteUrl
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        resolveEnv: () => NETLIFY_ENV,
        env: {
          production: {
            policy: [{ userAgent: '*' }]
          },
          'branch-deploy': {
            policy: [{ userAgent: '*', disallow: ['/'] }],
            sitemap: null,
            host: null
          },
          'deploy-preview': {
            policy: [{ userAgent: '*', disallow: ['/'] }],
            sitemap: null,
            host: null
          }
        }
      }
    }
  ]
};

オプションを指定しない場合は、siteMetadataにsiteUrlを指定します。

gatsby-config.jsの一部

module.exports = {
  siteMetadata: {
    siteUrl: 'https://www.example.com'
  },
  plugins: ['gatsby-plugin-robots-txt']
};

ビルドするとpublicフォルダ配下にrobot.txtが生成されます。

robot.txtの例

User-agent: *
Disallow:
Sitemap: https://takumon.com/sitemap.xml

開発補助系

gatsby-plugin-lodash

ビルド時のlodashのサイズを小さくする

設定・使い方

入れるだけでもサイズを削減できますが、オプションで削除対象モジュールを指定してさらに削減可能です。
※削除対象モジュールはここから選択してください。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-plugin-lodash`,
      options: {
        disabledFeatures: [
          `shorthands`,
          `cloning`
        ],
      },
    },
  ]

gatsby-plugin-webpack-bundle-analyzer

webpack-bundle-analyzerを使ってbundle.jsの中身のサイズを可視化する

* webpack-bundle-analyzerはパフォーマンスチューニングでbundle.jsのサイズを減らそうと思ったときに便利なライブラリです。ライブラリorコンポーネント毎にサイズをグラフィカルに示してくれます。

設定

このプラグインは内部webpack-bundle-analyzerというライブラリを使っており、
webpack-bundle-analyzerのオプションなら何でも指定できます。

デフォルトだとgatsby developするたびにブラウザが開くので、
それがいやなら下記のようにすると良いでしょう。

gatsby-config.jsの一部

    {
      resolve: `gatsby-plugin-webpack-bundle-analyzer`,
      options: {
        openAnalyzer: false
      }
    }

使い方

gatsby developしてhttp://localhost:8888にアクセスします。
すると下記のようにコンポーネント毎のサイズをグラフィカルに示してくれます。

gatsby-plugin-google-analytics

Google Analyticsを使えるようにする

設定・使い方

gatsby-config.jsでトラッキングIDを設定するだけです。Google AnalyticsでトラッキングIDを発行して設定しましょう。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
      },
    },
  ]

gatsby-plugin-facebook-analytics

Facebook Analyticsを使えるようにする

設定・使い方

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-plugin-facebook-analytics`,
      options: {
        appId: "あなたのAPP ID",
        // 開発時も解析対象とするか
        // デフォルトはfalseでプロダクションのみ解析対象とします
        includeInDevelopment: false,
        // SDKのデバックバージョンを含めるか
        // デフォルトはfalseでライブラリはsdk.jsをロードします。
        debug: false,
        // 言語を指定。デフォルトはenglish
        language: "ja-jp",
      },
    },
  ]

UI系

gatsby-plugin-nprogress

ローディングに時間がかかっている時にプログレスバーを表示する

* NProgressを使って、リンククリックから1秒たってもローディング中の場合にプログレスバーを表示します。

設定・使い方

下記のように設定します。colorでバーの色が変更可能です。
またオプションにはNProgressのオプションが全て指定できるようになっています。

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: `#444`,
        showSpinner: false,
      },
    },
  ]

gatsby-plugin-catch-links

aタグでローカル遷移する時にリロードを抑止してヒストリーAPIで遷移できるようにする

GatsbyはSPAなのでローカル遷移はヒストリーAPIを使うべきで、リロードは避けたいところですが、
<a href="tags/react" >ローカル遷移のリンク</a>のようなaタグの場合、クリック時に（ブラウザのでフォルの挙動により）リロードしてしまいます。

このプラグインを使えば、aタグの場合でもローカル遷移であればリロードを抑止し、ヒストリーAPIを使った遷移が可能です。
Gatsby-Linkを使っていれば問題ないのですが、どうしてもaタグしか使えない場合は、このプラグインが役立つでしょう。

gatsby-plugin-layout

1系のレイアウト機能を2系でも使えるようにする

1系から2系に移行したときに、レイアウト機能(2系では削除された機能)をそのまま使えるようにするために使います。

設定・使い方

gatsby-config.jsの設定は特に変わったところはありません。
レイアウト用ファイルはsrc/layouts/index.jsを作成しましょう。

ファイル系

JSON,XML,YAML,CSVのパースは使い方はほぼ一緒なのでまとめて説明します。

gatsby-transformer-json
- JSONファイルをパースする
gatsby-transformer-xml
- XMLファイルをパースする
gatsby-transformer-yaml
- Yamlファイルをパースする
gatsby-transformer-csv
- CSVファイルをパースする

これらはgatsby-source-filesystemとあわせて使います。

gatsby-config.jsの一部

  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
  ],

gatsby-source-filesystem

ファイルを読み取りGatsby上で扱えるFileノードを生成する

transformerプラグイン（ファイルノードをファイル形式毎に最適化したノードに変換するプラグイン）と併用します。例えばgatsby-transformer-jsonはJSONファイルをJSONノードに変換し、gatsby-transformer-remarkはマークダウンファイルをMarkdownRemarkノードに変換します。
※gatsby-starter-blogインストール済

設定方法・使い方

gatsby-config.jsでは読み込み対象のフォルダパスを指定します。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ドット始まりのファイルは無視
      },
    },
  ],
}

読み取ったファイルノードはGraphQLで取得できます。

{
  allFile {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

JavaScriptの関数 createFilePath を用意しています。実際gatsby-config.jsではマークダウン読み込みで使っています。

gatsby-config.js

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

同じく関数createRemoteFileNodeを用意しています。こちらは名前の通り、リモートのファイル読み込みで使用します。

gatsby-transformer-remark

マークダウンファイルをパースする（MarkdownRemarkノードに変換する）

使い方

MarkdownRemarkノードはGraphQLで取得可能です。

{
  allMarkdownRemark {
    edges {
      node {
        html
        headings {
          depth
          value
        }
        frontmatter {
          title
        }
      }
    }
  }
}

目次も取得できます。目次のURLはslugですがpathToSlugFieldでカスタム可能です。

{
  allMarkdownRemark {
    edges {
      node {
        html
        tableOfContents(pathToSlugField: "frontmatter.path")
        frontmatter {
          path
        }
      }
    }
  }
}

要約も取得できます。デフォルト120文字ですが、pruneLengthでカスタム可能です。

{
  allMarkdownRemark {
    edges {
      node {
        html
        excerpt(pruneLength: 500)
      }
    }
  }
}

gatsby-image

画像読み込みを最適化する

gatsby-plugin-sharpと併せて使用します
Webサイトにおいて画像読み込みの最適化はかなり手間がかかりますが、それをよしなりやってくれるのがこのプラグインです。GraphQLとSharpを使ったGatsbyのネイティブ画像処理機能とシームレスに連携するように設計されています。

設定・使い方

gatsby-plugin-sharp、gatsby-transformer-sharpと一緒に使います。下記のように設定します。

gatsby-config.jsの一部

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

実際使う場合はコンポーネント内でHTMLのimgタグの代わりにgatsby-imageのImgタグを使います。

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

gatsby-transformer-sharp

画像読み込みでImageSharpノードを生成する

gatsby-plugin-sharpと併用します。

gatsby-plugin-sharp

Sharp(画像圧縮ライブラリ)を使えるようにする

Gatsbyエンドユーザーが使うというよりは、プラグインの一部で使う低レイヤーのプラグイン。

CSS系

SASSやCSS in JSのライブラリ用のプラグインは一通り用意されています。
プラグインを入れるだけで簡単に使えるので設定や使い方は省略します。

gatsby-plugin-sass
- GatsbyでSASS/SCSSを使えるようにする
- node-sassをあわせてインストールしてください。
- CSS Moduleを使う場合、拡張子をmodule.scss、module.sassなどとしてください。
gatsby-plugin-styled-components
- Styled Componentsを使えるようにする
gatsby-plugin-glamor
- Glamorとglamorousを使えるようにする
gatsby-plugin-emotion
- Emotionを使えるようにする
gatsby-plugin-postcss
- PostCSSが使えるようにする

gatsby-plugin-typography

Typography.js(文章のスタイルを設定するライブラリ)を使えるようにする

* Typography.jsはフォント、フォントサイズ、line-heigth等のパラメータを設定すると、それに従ってCSSを生成してくれるライブラリです。CSSよりも管理が楽になる上、様々なテーマが提供されているので、それを使って簡単にスタイルを設定できます。

設定・使い方

スタイル指定用のJavaScriptを作成します。
テーマを使うと作成が楽です。どんなテーマがあるかはTypography.jsの右上にあるPick themeプルダウンで確認できます。お気に入りのテーマを選んで、npmインストールして使いましょう。

src/utils/typography.js

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"

const typography = new Typography(grandViewTheme)

const { rhythm, scale } = typography;
export { rhythm, scale, typography as default };

JavaScriptでテーマの設定を上書くこともできます。

src/utils/typography.js

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"

grandViewTheme.overrideThemeStyles = () => ({
  'html,body,h1,h2,h3,h4,h5,h6': {
    color: '#444',
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      'Segoe UI',
      'Helvetica Neue'
      'Hiragino Kaku Gothic ProN',
      '"Yu Gothic"',
      'YuGothic',
      'Verdana',
      'Meiryo'
      '"M+ 1p"',
      'sans-serif'
    ].join(','),
  },
})

const typography = new Typography(grandViewTheme)

const { rhythm, scale } = typography;
export { rhythm, scale, typography as default };

作ったスタイル指定用のJavaScriptをgatsby-config.jsで指定します。

gatsby-config.jsの中

  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],

外部連携系

ブログなどからデータをひっぱってきてGraphQLで扱えるようにするプラグイン群です。様々ありますが、有名どころを以下に示します。各プラグインの使い方は、かなりがっつりしたものになるのでココでは省略します。

gatsby-source-medium
- Mediumの記事を引っ張ってきてGraphQLで扱えるようにする
gatsby-source-wordpres
- WordPressの記事を引っ張ってきてGraphQLで扱えるようにする
gatsby-source-contentful
- contentfulからデータを引っ張ってきてGraphQLで扱えるようにする

gatsby-source-esa

esa APIを使ってesa.ioのデータを引っ張ってきてGraphQLで扱えるようにする

設定

gatsby-config.jsの一部

  plugins: [
    {
      resolve: `gatsby-source-esa`,
      options: {
        // (必須)トークン
        // https://[YOUR_TEAM_NAME].esa.io/user/applications からトークンを取得できます。
        // なおオーナでないとトークンは取得できません
        accessToken: `YOUR_PERSONAL_ACCESS_TOKEN`,
        // (必須)チーム名
        teamName: `YOUR_TEAM_NAME`,
        // (任意)検索クエリ
        // 詳細は https://docs.esa.io/posts/104 参照
        // 例 : 'in:public' や 'wip:false in:public'　など
        q: '',
        // (任意)ベースカテゴリ
        // 例 : 'public'
        baseCategory: ''
      }
    }
  ]

使い方

GraphQLで下記スキーマにて取得します。

{
  allEsaPost {
    edges {
      node {
        number
        name
        body_md
        body_html
        category
        relative_category
        tags
      }
    }
  }
}

まとめ

もともと自分のブログで使っていたものも多数ありますが、
調べてみると、いろいろ便利なプラグインを発見できました。
これでますますGatsbyが人気になることを願っています。

Gatsbyプラグイン45選

なにこれ

ユースケース別目次

プラグインの使い方

マークダウン系

設定

使い方

行数表示する場合

行数表示する場合（開始行数指定あり）

指定行数を強調する場合

全部の組み合わせ（指定行数を強調かつ行数表示）

設定

使い方

強調行指定との組み合わせ

行数表示との組み合わせ

設定

補足

設定

使い方

設定

使い方

設定

使い方

設定

使い方

JavaScriptファイルの場合

読み込み対象ファイル

マークダウン記述

表示結果

CSSファイルの場合

読み込み対象ファイル

マークダウン記述

表示結果

HTMLファイルの場合

読み込み対象ファイル

マークダウン記述

表示結果

YAMLの場合

読み込み対象ファイル

マークダウン記述

表示結果

設定

設定・使い方

使い方

設定

使い方

使い方

SEO系

設定・使い方

設定・使い方

設定

設定・使い方

開発補助系

設定・使い方

設定

使い方

設定・使い方

設定・使い方

UI系

設定・使い方

設定・使い方

ファイル系

設定方法・使い方

使い方

設定・使い方

CSS系

設定・使い方

外部連携系

設定

使い方

まとめ