/gatsby-plugins-themes-ja

(Japanese) React ベースの静的サイトジェネレーター Gatsby が公式に提供するプラグインとテーマの一覧です。

Primary LanguagePython

Gatsby 公式のプラグイン・テーマまとめ

Gatsby

React ベースの静的サイトジェネレーター Gatsby が公式に提供するプラグインとテーマについてまとめました。

正確には、公式の monorepo リポジトリ ↓ に含まれているプラグインとテーマの一覧です。

対象の Gatsby のバージョンは gatsby@2 です。

プラグイン

Gatsby プラグインの名前にはルールがあって、おおよそ次のとおりとなっています。

  • gatsby-source-: データソースからコンテンツを取得するもの
  • gatsby-transformer-: 取得したコンテンツをパースしたり変換したりするもの
  • gatsby-plugin-: その他の機能を提供するプラグイン

また、 gatsby-transformer-remark のサブプラグインの先頭は gatsby-remark- になっています。

名前 説明
gatsby-plugin-canonical-urls HTML の <head> 内に canonical リンクを追加するためにプラグインです。
gatsby-plugin-catch-links gatsby-link を使わずに作られたサイト内リンクに gatsby-link の挙動を反映するためのプラグインです。 Markdown ファイルの中でサイト内リンクを使っているとき等に便利です。
gatsby-plugin-coffeescript CoffeeScript と CJSX を利用するためのプラグインです。
gatsby-plugin-create-client-paths 動的に動くパスを持った、動的と静的のハイブリッドな Gatsby アプリを作るためのプラグインです。
gatsby-plugin-cxs css-in-js の cxs を利用するためのプラグインです。
gatsby-plugin-emotion css-in-js の Emotion を利用するためのプラグインです。
gatsby-plugin-facebook-analytics Facebook Analytics を利用するためのプラグインです。
gatsby-plugin-feed RSS フィードを生成するためのプラグインです。
gatsby-plugin-flow Flow を利用するためのプラグインです。
gatsby-plugin-fullstory 解析サービスの Fullstory を利用するためのプラグインです。
gatsby-plugin-gatsby-cloud Gatsby Cloud 用のプラグインです。 HTTP ヘッダーの追加や _headers.json ・ _redirects.json ファイルの生成を行います。
gatsby-plugin-glamor css-in-js の Glamorを利用するためのプラグインです。
gatsby-plugin-google-analytics Google Analytics を利用するためのプラグインです。
gatsby-plugin-google-gtag Google global site tag （ gtag.js ）を利用するためのプラグインです。
gatsby-plugin-google-tagmanager Google Tag Manager を利用するためのプラグインです。
gatsby-plugin-graphql-config ESLint や IDE などで利用できるように、 Gatsby GraphQL のスキーマやフラグメントや GraphQL Config ファイルを .cache ディレクトリに保存します。
gatsby-plugin-guess-js Guess.js を利用するためのプラグインです。
gatsby-plugin-image サイトのパフォーマンス向上のために、ページの埋め込み画像の最適化（複数のサイズ・フォーマットの画像の生成）を行います。公式サイトでは Gatsby Image Plugin と呼ばれています。前身は gatsby-image というパッケージで、 Gatby の v2.26 で β 版が導入され v3.0 で正式導入されました。
gatsby-plugin-jss css-in-js の JSS を利用するためのプラグインです。
gatsby-plugin-layout ページをまたがって存在するレイアウトコンポーネントを追加するためのプラグインです。 gatsby@2 で Gatsby 本体から削除された gatsby@1 のレイアウトコンポーネントを実装するものです。
gatsby-plugin-less CSS を拡張した LESS を利用するためのプラグインです。
gatsby-plugin-lodash Lodash を利用するための Webpack と Babel のプラグインを提供します。
gatsby-plugin-manifest PWA 仕様を満たすのに必要な web app manifest （ manifest.webmanifest ）をサポートするためのプラグインです。 manifest の生成の他に、複数のサイズのアイコンの生成、 favicon 追加等の機能も備えています。 gatsby-plugin-offline と併用することが推奨されています。
gatsby-plugin-mdx MDX を利用するためのプラグインです。 MDX は JSX の中に Markdown が書けるフォーマットです。
gatsby-plugin-netlify-cms Netlify CMS を利用するためのプラグインです。パス admin/index.html に Netlify CMS を生成します。
gatsby-plugin-netlify Netlify に対応するためのプラグインです。デフォルトでは、 Netlify のヘッダーとリダイレクトの設定のために _headers と _redirects という 2 つのファイルを public フォルダのルートに設置します。
gatsby-plugin-no-sourcemaps ソースマップを生成しないようにするためのプラグインです。 Webpack の設定のためのほんの数行のコードからなるプラグインです。
gatsby-plugin-nprogress Nprogress.js を利用するためのプラグインです。
gatsby-plugin-offline ネットワーク環境が悪い場合でもサイトがなるべく動くようにするためのプラグインです。 Service Worker を追加します。 gatsby-plugin-manifest と併用することが推奨されています。
gatsby-plugin-page-creator 指定されたパスの下の React コンポーネントを含むファイルからページを自動生成するためのプラグインです。 Gatsby 本体が利用しており、デフォルトでは src/pages 以下のファイルが対象になっています。
gatsby-plugin-postcss PostCSS を利用するためのプラグインです。
gatsby-plugin-preact React の軽量版である Preact を利用するためのプラグインです。
gatsby-plugin-preload-fonts パフォーマンス改善のために、ページで使われているフォントを <link rel="preload"> で先読みするためのプラグインです。
gatsby-plugin-react-css-modules React コンポーネント内の styleName を className に変換するプラグインです。 Gatsby は CSS モジュールをデフォルトでサポートしているため、このプラグインは通常必要ありません。
gatsby-plugin-react-helmet React Helmet を利用するためのプラグインです。 HTML の <head> タグ内に <title> や <meta> 等のタグがかんたんに追加できます。
gatsby-plugin-remove-trailing-slashes パスの末尾の / （スラッシュ）を削除するためのプラグインです。 Gatsby v4.7 で本体に同じ機能が追加されたため本プラグインは deprecated となりました （ 参考 1 参考 2 ）。
gatsby-plugin-sass Sass/SCSS を利用するためのプラグインです。
gatsby-plugin-schema-snapshot GraphQL のスキーマのスナップショットファイルを生成するためのプラグインです。デフォルトで schema.gql という名前のファイルに出力します。
gatsby-plugin-sharp 画像処理ライブラリの sharp を利用するためのプラグインです。画像をレスポンシブ化する際によく利用されます。
gatsby-plugin-sitemap マシン向けのサイトマップ（ sitemap.xml ）を生成するためのプラグインです。
gatsby-plugin-styled-components styled-components を利用するためのプラグインです。
gatsby-plugin-styled-jsx styled-jsx を利用するためのプラグインです。
gatsby-plugin-styletron Styletron を利用するためのプラグインです。
gatsby-plugin-stylus Stylus を利用するためのプラグインです。
gatsby-plugin-subfont Google fonts 等のウェブフォントの配信を最適化するためのライブラリ Subfont を利用するためのプラグインです。
gatsby-plugin-twitter Twitter のツイートやタイムラインやシェアボタンをページに埋め込むためのプラグインです。
gatsby-plugin-typescript TypeScript を利用するためのプラグインです。 Gatsby 本体が利用しています。
gatsby-plugin-typography タイポグラフィー・フォント周りの設定を行うための Typography を利用するためのプラグインです。
gatsby-remark-autolink-headers gatsby-transformer-remark のサブプラグインで、 Markdown 内の各見出し（ h1 - h6 ）にリンク付きのアイコンを付けられるプラグインです（ GitHub の README にあるようなものです）。
gatsby-remark-code-repls gatsby-transformer-remark のサブプラグインで、 Markdown 内でウェブ上で JS コードを試せる Codepen 等のサービスへのリンクを生成できるプラグインです。
gatsby-remark-copy-linked-files gatsby-transformer-remark のサブプラグインで、 Markdown 内でリンクで参照されているファイルを public フォルダにコピーするプラグインです。
gatsby-remark-custom-blocks gatsby-transformer-remark のサブプラグインで、 Markdown 内で使えるカスタムブロックを定義して利用できるプラグインです。 remark-custom-blocks を使用します。
gatsby-remark-embed-snippet gatsby-transformer-remark のサブプラグインで、 Markdown 内でファイルの中身をコードスニペットとして埋め込めるプラグインです。動作には gatsby-remark-prismjs が必要です。
gatsby-remark-graphviz gatsby-transformer-remark のサブプラグインで、 Markdown 内の Graphviz のコードブロックを SVG 画像に変換してくれるプラグインです。しかし、このプラグインが利用する Viz.js の開発が終了しています。
gatsby-remark-images gatsby-transformer-remark のサブプラグインで、 Markdown 内の画像をレスポンシブ化するためのプラグインです。 png と jpg をサポートしています。
gatsby-remark-images-contentful gatsby-transformer-remark のサブプラグインで、 Contentful の Image API を使って Markdown 内の画像をレスポンシブ化するためのプラグインです。
gatsby-remark-katex gatsby-transformer-remark のサブプラグインで、 Markdown 内に数式を書くためのプラグインです。
gatsby-remark-prismjs gatsby-transformer-remark のサブプラグインで、 Markdown 内のコードブロックにシンタックスハイライトを追加できるプラグインです。シンタックスハイライト用のライブラリ Prism を使用します。
gatsby-remark-responsive-iframe gatsby-transformer-remark のサブプラグインで、 Markdown 内の <iframe> タグの縦横比を維持するためのプラグインです。
gatsby-remark-smartypants gatsby-transformer-remark のサブプラグインで、 Markdown 内のアルファベットの句読点をきれいな形に変換してくれるプラグインです。
gatsby-source-contentful ヘッドレス CMS （ API ファースト CMS ）の Contentful からコンテンツデータを取得するためのプラグインです。
gatsby-source-drupal CMS Drupal からコンテンツデータを取得するためのプラグインです。
gatsby-source-faker フェイクデータ（テストや検証のためのデータ）を生成するライブラリ faker.js を使ってフェイクコンテンツを取得するためのプラグインです。
gatsby-source-filesystem ローカルのファイルシステムからコンテンツデータを取得するためのプラグインです。
gatsby-source-graphql 任意の GraphQL API からデータを取得するためのプラグインです。
gatsby-source-hacker-news Hacker News API からコンテンツデータを取得するためのプラグインです。
gatsby-source-lever リクルーティング活動支援のウェブサービス Lever からデータを取得するためのプラグインです。
gatsby-source-medium Medium の非公式の JSON エンドポイントからコンテンツデータを取得するためのプラグインです。ただし取得できる内容・件数がかぎられています。
gatsby-source-mongodb MongoDB のコレクションからデータを取得するためのプラグインです。
gatsby-source-npm-package-search Yarn の Algolia の機能を使って npm のパッケージ情報を取得するためのプラグインです。
gatsby-source-shopify EC サービス Shopify のストアから Shopify Storefront API を使ってデータを取得するためのプラグインです。
gatsby-source-wikipedia Wikipedia から記事データを取得するためのプラグインです。
gatsby-source-wordpress WordPress サイトから WordPress REST API を使ってコンテンツデータを取得するためのプラグインです。
gatsby-transformer-asciidoc AsciiDoc ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-csv CSV ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-documentationjs JavaScript のコードから JSDoc のデータを抽出するためのプラグインです。
gatsby-transformer-excel Excel ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-hjson Hjson ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-javascript-frontmatter JavaScript ファイルの exports.frontmatter をコンテンツソースとして抽出するためのプラグインです。
gatsby-transformer-javascript-static-exports JavaScript ファイルの exports.data をコンテンツソースとして抽出するためのプラグインです。
gatsby-transformer-json JSON ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-pdf PDF ファイルのテキストデータをコンテンツソースとして抽出するためのプラグインです。
gatsby-transformer-react-docgen React のコンポーネントの情報を react-docgen を使ってコンテンツソースとして抽出するためのプラグインです。
gatsby-transformer-remark Markdown ファイルを remark を使ってコンテンツソースとしてパースするためのプラグインです。 Gatsby のテキストデータを取得する transformer の中で最も多く使われています。
gatsby-transformer-screenshot AWS Lambda Function を使ってウェブサイトのスクリーンショットを生成するプラグインです。
gatsby-transformer-sharp 画像処理ライブラリ sharp を使って画像にリサイズ・切り抜き・レスポンシブ化を施してコンテンツソースとして提供するプラグインです。
gatsby-transformer-sqip 非常に軽量なサムネイル画像を生成するプラグインです。
gatsby-transformer-toml TOML ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-xml XML ファイルをコンテンツソースとしてパースするためのプラグインです。
gatsby-transformer-yaml YAML ファイルをコンテンツソースとしてパースするためのプラグインです。

テーマ

テーマは名前が gatsby-theme- で始まります。

名前 説明
gatsby-theme-blog シンプルなブログ作成用のテーマです。 gatsby-theme-blog-core を親テーマとして利用しています。
gatsby-theme-blog-core シンプルなブログ作成用のテーマです。通常は子テーマの gatsby-theme-blog を使うことが想定されています。
gatsby-theme-blog-darkmode gatsby-theme-blog にダークモード機能を追加できるテーマです。利用するときには gatsby-theme-blog といっしょに利用する必要があります。
gatsby-theme-i18n Gatsby サイトを多言語対応（ i18n support ）させるためのテーマです。
gatsby-theme-i18n-lingui 多言語対応サイトを LinguiJS で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-i18n-react-i18next 多言語対応サイトを readct-i18next で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-i18n-react-intl 多言語対応サイトを React Intl で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-notes メモ集サイト用のテーマです。
gatsby-theme-ui-preset 他の公式テーマが使うための Theme UI の設定だけを提供するテーマです（と公式に書かれていますが、他の公式テーマでこれを使っているものは現状無いようです）。