サイト構築のタスクを自動化する「Gatsby Recipes」とタスク記述言語としてのMDX

2020年4月、Reactでウェブサイトやアプリケーションを作るGatsbyから「Gatsby Recipes」の発表がありました。（執筆時点ではまだExperimentalな機能です）

📝New! "Announcing #GatsbyRecipes"

👩🏿‍🍳👨🏼‍🍳 Recipes teach users how to accomplish desired tasks in Gatsby while also automating the process.

➡️ https://t.co/X0ueTQHqv4

✨ This release is the first step towards adding a lot more automation capabilities to Gatsby. pic.twitter.com/sBH4EVK4Cz

— Gatsby (@gatsbyjs) April 16, 2020

Gatsby RecipesはGatsbyでサイトを制作する際に利用するようなタスクを自動化するものです。上記のツイートのようにCLIを経由して使います。
次のようなタスクを自動化します。

• ページやレイアウトの作成
• プラグインのインストールと設定
• TypeScriptの設定

利用するにはGatsbyプロジェクト内で次のコマンドを入力しgatsby, gatsby-cliを最新のものにしてください。

npm install -g gatsby-cli@latest
npm install gatsby@latest

インストールを終えたら、gatsby recipesと入力することで、利用できるレシピを選択できます。
前もって、利用したいレシピが決まっている場合gatsby recipes styled-componentsのように指定が可能です。

レシピを決定すると、ウィザードに従って操作を行うとレシピが実行されます。ライブラリのインストールやgatsby-configの書き換え、必要なファイルの生成などを行ってくれます。

MDXを使ったタスクの記述

Gatsby Recipesは単にサイト構築の支援ツールのように見えますが、一番おもしろいところは上記のようなタスクを記述するのにMDX（Markdown + JSX）を利用しているところです。

MDXはMarkdown内でJSXを仕様できるようにしたフォーマットです。
MDXを使った代表的なものにjxnblk/mdx-deckというスライドツールがあります。MarkdownとJSXを利用してプレゼンテーションを作っていくツールです。

冒頭のツイートのレシピは次のようなMDXを元に動作しています。

 # Setup Theme UI
 
 This recipe helps you start developing with the [Theme UI](https://theme-ui.com) styling library.
 
 <Config name="gatsbyjs/add-theme-ui" />
 
 ---
 
 Install packages.
 
 <NPMPackage name="theme-ui" />
 <NPMPackage name="gatsby-plugin-theme-ui" />
 <NPMPackage name="@theme-ui/presets" />
 
 ---
 
 Add the plugin `gatsby-plugin-theme-ui` to your `gatsby-config.js`.
 
 <GatsbyPlugin name="gatsby-plugin-theme-ui" />
 
 ---
 
 Write out Theme UI configuration files.
 
 <File
   path="src/gatsby-plugin-theme-ui/index.js"
   content="https://gist.github.com/KyleAMathews/ab59e200e4f8a1b4109dddb51b2140f9/raw/209a2e7c589766869522b12f7f6cecaf3f7a6f81/index.js"
 />
 
 <File
   content="export default {}"
   path="src/gatsby-plugin-theme-ui/components.js"
 />
 
 ---
 
 **Success**!
 
 You're ready to get started!
 
 - Read the docs: https://theme-ui.com
 - Learn about the theme specification: https://system-ui.com
 
 *note:* if you're running this recipe on the default starter (or any other starter with
 base css), you'll need to remove the require to `layout.css` in the `components/layout.js` file
 as otherwise they'll override some theme-ui styles.

見てわかる通り、Markdownで記述した箇所が文章として、JSXで表示されている部分が実際に実行されている構造になります。
以前からタスク自動化のツールはありましたが、人間に優しくない記述や自由度が低いものが多く存在しました。その課題をうまく解決しようとしている点でGatsby Recipesは非常に面白い試みでしょう。

Recipesに見るNext.jsとの棲み分け

ここからは自分の見解になります。
つい最近、同じくReactをベースにしたフレームワークのNext.js 9.3が公開されました。Next.js 9.3ではStaticにデータを扱う部分が強化され、一見してGatsbyとNext.jsの差が小さくなっています。
しかし、Next.jsは大体何でも作れる万能ナイフ的なフレームワークである一方、Gatsbyは（アプリケーションも作れますが）ウェブサイトに特化したフレームワークです。ウェブサイトに特化している分、プラグインやスターター（テンプレート）が使いやすくエコシステムも強大です。

Gatsby Recipesは一般的なタスクに対応し、よりGatsbyのセットアップは簡単になっていきます。また、RFC段階ではありますが、GatsbyのサイトをいじるためのUI「Gatsby Admin」の動きもあります。これは何でも作れるNext.jsには作りにくく、ウェブサイトに特化したGatsbyだから出来る取り組みです。

---

Gatsbyは登場して5年ほどたって成熟しているような印象も受けますが、よりよいDXで開発が出来るような方向でさらなる進化をしています。
興味を持った方はGatsby Reciepesはもちろん、Gatsby Adminへ目を向けてみてはいかがでしょうか？