0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MDX の紹介

Last updated at Posted at 2025-05-15

mdx.png

MDX の紹介

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についてもっと学ぶ](https://mdxjs.com)
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?