MDX とは？

MDX は、Markdown ドキュメント内に JSX を直接記述できるフォーマットです。コンテンツ作成における Markdown のシンプルさと React コンポーネントの強力な機能を組み合わせており、Next.js、Gatsby、Docusaurus などのフレームワークで構築されたドキュメントサイト、ブログ、コンテンツ重視のアプリケーションで広く利用されています。MDX ファイルには、標準的な Markdown 構文に加え、import 文、エクスポートされた変数、インライン JSX コンポーネントをすべて 1 つのファイルにまとめて記述できます。

通常の Markdown とは異なり、MDX は JavaScript にコンパイルされます。そのため、JSX や import 文に構文エラーがあるとドキュメント全体が壊れる可能性があります。MDX コンテンツを扱う際には、バリデーションと適切なフォーマットが特に重要です。

ツールの説明

MDX エディターは、MDX コンテンツの作成・バリデーション・フォーマットをブラウザ上で行える環境を提供します。Markdown と JSX の両方に対応したシンタックスハイライト、コンパイルエラーをチェックする組み込みバリデーター、そして一貫性のある読みやすいドキュメントを実現するためにスペースや構造を整えるフォーマッターを備えています。

使用例

フォーマット前：

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

フォーマット後：

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

機能

  • 1 つのエディターで Markdown と JSX のシンタックスハイライトに対応
  • リアルタイムでコンパイルエラーをチェックする MDX バリデーション
  • 空白行とスペースを正規化する自動フォーマット
  • エディターをすばやくリセットするクリアボタン
  • フォーマット済みコンテンツを簡単にエクスポートできるコピー機能

動作の仕組み

  • バリデーション：@mdx-js/mdx コンパイラーを使用して MDX コンテンツをコンパイルします。ドキュメントに構文エラー（不正な JSX、閉じられていないタグ、無効な import など）が含まれている場合、バリデーターがエラーメッセージを表示するので、修正箇所をすぐに確認できます。
  • フォーマット：連続する複数の空白行を 1 行に統合し、見出しの前や import/export ブロックの前後に空白行を確保し、末尾の空白を削除することで、空白を正規化します。結果として、クリーンで一貫した構造のドキュメントが生成されます。

活用シーン

  • コンテンツページに MDX を使用している React ベースのプロジェクトのドキュメント作成
  • 静的サイトをデプロイする前の MDX コンパイルエラーのデバッグ
  • 複数の作成者によってスペースが不統一になった MDX ファイルの整理