Back to blogs
MDX の紹介

MDX の紹介

/ May 3, 2025

MDX(Markdown + JSX)とは、Markdownの簡潔さとJSXの柔軟性を組み合わせた強力なフォーマットです。開発者はこれを使うことで、Markdownの記法とReactを一緒に使うことができます。だからMDXは記事やコンテンツを書くには良い選択です。


MDXを選ぶ理由


MDXは幾つか利点があります:


  1. 使い慣れた構文:MDXはMarkdownの上に作られたものですから、学ぶのも覚えるのも簡単です。

  2. コンポネントの統合: ReactのコンポーネントをMDXに簡単に組み込むことで、動的なコンテンツを作成できます。

  3. コンテンツを再利用できます: 同じコンポネントを再利用して数回のMDXフャイルニ使うことができます。

  4. カストマイズ可能です。: MDXを使って例えば見出し、リスト、画像のような要素をカスタムコンポーネントに変換して、何度も使用することができます。

  5. 良い書類に使える: MDXは主にドキュメント、ブログ、コンテンツ中心のウェブサイトでよく使われています。


MDXの働きかた


MDXファイルとは、Markdownの記法とJSXを組み合わせたファイルのことだ。MDXファイルの使い方の例文:


# 俺のブログへようこそ
これはMDXを使って書かれた簡単なブログです。 下の行ではReactコンポーネントを使っています:
<MyComponent title="こにちは、MDXの使うブログです" />

リストやリンクなど、Markdownのすべての構文を使うことができます。:
- 一つのアイテム
- 二つのアイテム
- 三つのアイテム

MDXについてもっと学ぶ