2026年6月2日

AstroのMarkdownユーティリティ活用プロンプト作例｜React・Vue・Svelte対応

Astroの新ユーティリティが解決した「コンテンツとUIの結合」問題

CSS-Tricksで紹介されたAstroのMarkdownコンポーネントユーティリティは、単なる「MarkdownをJSXで書けるツール」ではない。これは、React、Vue、Svelte、Solid.jsなど多様なフレームワークで構築されたサイトにおいて、Markdownコンテンツをフレームワークに依存しない部品として扱うアプローチを提供する。

従来、Markdownファイルは静的サイトジェネレーター専用の資産だった。AstroはこれをAstro.glob()で読み込み、テンプレート内でレンダリングしていた。しかし、コンポーネント駆動の世界では「Markdownの一部をReactコンポーネント内で使いたい」「VueのスロットにMarkdownを流し込みたい」といった要求が頻発する。そのたびに生のHTML変換やカスタムパーサーを書く必要があった。

このユーティリティは、renderMarkdown()という単一の関数を全フレームワークに公開する。内部でremark/rehypeパイプラインを実行後、出力をプレーンなHTML文字列ではなくフレームワークの中立なASTに変換する。各フレームワークはそのASTを自身のレンダラーに渡すだけで、Markdownコンテンツをネイティブな仮想DOMノードとして扱える。

実装の詳細と落とし穴

使い方は極めてシンプルだ。プロジェクトのsrc/utils/markdown.tsなどに以下のようなユーティリティを置く。

import { renderMarkdown } from '@astrojs/markdown-component';

export async function getMarkdownContent(path: string) {
  const { content, headings } = await renderMarkdown(fetch(path));
  return { content, headings };
}

このcontentはフレームワーク問わず、JSX/TSXテンプレートに直接埋め込める。Reactなら<div dangerouslySetInnerHTML={{ __html: content }} />の必要はなく、<div>{content}</div>で安全にレンダリングされる。Vueならv-htmlを経由せず、スロットやコンポーネントpropsにそのまま渡せる。

注意すべきは、このアプローチがビルド時のみ有効な点だ。動的にMarkdownを取得するSSR環境では、同一ユーティリティがサーバーサイドで動作するものの、クライアントサイドで再フェッチする場合には別途処理が必要になる。また、カスタムremarkプラグインの追加にはrenderMarkdown(content, { remarkPlugins: [...] })と明示的な指定が必要で、Astroのデフォルト設定とは独立している。

なぜ開発者はこの変化を無視できないのか

第一に、コンテンツ管理の分離が現実的になる。従来は「MarkdownはAstro Pages、UIコンポーネントはReact」という境界線があった。このユーティリティはその境界を曖昧にし、Markdownファイルを「データソース」として再利用可能にする。ブログ記事の一部をランディングページに埋め込む、製品ドキュメントの節を複数のフレームワークで共有する、といった運用がコードベースを汚さずに実現できる。

第二に、フレームワーク間の移行コストが下がる。チームが「ReactからVueに移行したい」と考えたとき、コンテンツ周りのコードは書き換え不要になる。Markdownユーティリティが受け渡すASTはフレームワーク非依存だからだ。UIコンポーネントをまるごと置き換える負担は残るが、コンテンツ層のロックインは解消される。

第三に、AI生成コンテンツとの相性が良い。AIが出力したMarkdownをそのままコンポーネントに流し込める。従来はAI生成テキストをパースし、HTMLに変換し、さらにフレームワークのテンプレートに埋め込む手順が必要だった。このユーティリティは、AIの出力を直接renderMarkdown()に渡すだけで済む。特に、AIが生成した見出し構造やリストをそのままUIコンポーネントに反映させたいユースケースで威力を発揮する。

Baselineとの関係と将来の展望

Web標準のBaselineが2026年春に「安全な実装」を再定義した。これはフレームワークエコシステムにも波及する。Astroのようなメタフレームワークが、独自のSDKではなく標準のMarkdownパーサー（remark/rehype）を基盤に採用したのは妥当な判断だ。Baselineに含まれるHTML仕様とCSS仕様に依存する限り、コンテンツの表示互換性は担保される。

次の一歩として、このユーティリティがdynamic importと組み合わせられれば、クライアントサイドでもMarkdownの遅延読み込みが可能になる。また、MDXとの統合も自然な拡張だ。MDXはMarkdown内でJSXコンポーネントを許容するが、このユーティリティは「Markdown＝データ、コンポーネント＝UI」の分離を維持する。MDXの複雑さを避けつつ、Markdownの利便性を活かしたい開発者には理想的な選択肢となる。

一方で、CSS-Tricksの記事で指摘されていたように、::checkmark疑似要素やAnchor Positioningといった新仕様のサポートは、このユーティリティの直接的な影響範囲ではない。しかし、表示品質を高めるためには、生成されたHTMLに対してCSSスコープやパーティクルスタイルを当てる仕組みが必要だ。現状のユーティリティは生のHTMLを返すため、Scoped CSSやCSS Modulesと組み合わせるには追加のラッパーが要る。

この点は今後の改善が期待される。Astroのチームはすでに、renderMarkdownの戻り値にスタイルスコープ用のメタデータを含める実験を始めている。2026年後半には、CSS Baselineと組み合わせた「安全でスタイル可能なMarkdownコンポーネント」が標準機能になるだろう。

参照

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！