MDX 読書時間を抽出するリマークプラグインを作成

Remark は、マークダウンコンテンツを変換するためのカスタムプラグインを作成するために使用できる強力なマークダウンプロセッサーです。Remark を使用してマークダウンファイルを解析する際、コンテンツは抽象構文木 (AST) に変換され、プラグインを使用して操作することができます。

ユーザーエクスペリエンスを向上させるために、記事の推定読書時間を表示することが一般的です。このガイドでは、MDX ファイルから読書時間データを抽出し、MDX ファイルを ES モジュールとしてインポートする際に利用可能にするためのリマークプラグインを作成します。

始める#

まず、MDX ファイルを作成しましょう:

私たちが Vite をバンドラーとして使用し、公式の @mdx-js/rollup プラグインで MDX ファイルを変換することを前提とすると、このようにして MDX ファイルを ES モジュールとしてインポートできます。Vite の設定は次のようになります:

MDX ファイルを ES モジュールとしてインポートすると、コンテンツは default プロパティにコンパイルされた JSX を格納するオブジェクトとして取得できます。例えば:

このようになります:

この出力が得られたら、リマークプラグインを作成する準備が整いました。

リマークプラグインを作成#

目標を達成するために何をする必要があるか見てみましょう:

1. 読書時間の計算のために MDX コンテンツをテキストに抽出。
2. 読書時間を計算。
3. 読書時間データを MDX コンテンツに添付し、MDX ファイルを ES モジュールとしてインポートする際に利用可能にする。

幸いにも、読書時間の計算や基本的な AST 操作を助けるライブラリはすでに存在します:

• reading-time は読書時間を計算します。
• mdast-util-to-string は MDX AST をテキストに変換します。
• estree-util-value-to-estree は読書時間データを ESTree ノードに変換します。

もし TypeScript を使用している場合は、型定義のためのこれらのパッケージもインストールする必要があります:

• @types/mdast は MDX ルートノードの型定義用。
• unified はプラグインの型定義用。

必要なパッケージがインストールされたら、プラグインを作成し始めましょう:

ご覧の通り、このプラグインは単に MDX コンテンツをテキストに抽出し、読書時間を計算します。次に、読書時間データを MDX コンテンツに添付する必要がありますが、それは一見すると簡単ではないように見えます。しかし、他の素晴らしいライブラリ、例えば remark-mdx-frontmatter を見てみると、その方法がわかります:

上記のコードにおける type: 'mdxjsEsm' に注目してください。これは MDX ESM のシリアライズ に使用されるノードタイプです。上記のコードは、読書時間データを readingTime という名前で MDX コンテンツに添付し、MDX ファイルを ES モジュールとしてインポートする際に次のような出力が得られます:

読書時間データの名前を変更する必要がある場合は、Identifier ノードの name プロパティを更新できます。

TypeScript サポート#

このプラグインをさらに開発者に優しいものにするために、MDX の型定義を拡張して最後の仕上げを行うことができます:

これで、MDX ファイルをインポートすると、TypeScript は readingTime プロパティを認識します:

結論#

このガイドが MDX ファイルを扱う際により良いエクスペリエンスを提供する手助けとなることを願っています。このリマークプラグインを使用すれば、読書時間データを直接利用でき、ESM のツリーシェーキングを活用してパフォーマンスを向上させることも可能です。