|
2 | 2 | title: MDX で Markdown にコンポーネントを追加する |
3 | 3 | --- |
4 | 4 |
|
5 | | -Markdown を使って長いコンテンツを作るとき、[コンポーネント](/docs/glossary/#component)を埋め込みたくなるかもしれません。 |
6 | | -これは多くの場合、コンテンツを JSX で書くか、カスタム文法を使うプラグインを利用することで解決されます。 |
7 | | -1 つ目の手段の JSX はコンテンツを書くのに優れたフォーマットではなく、 |
8 | | -コンテンツがチームにとって親しみづらくなってしまうため、最適ではありません。 |
9 | | -カスタム文法とプラグインを使う方法はとても柔軟性に欠ける場合が多く、構造化を促進しません。 |
10 | | -もしあなたが自分のコンテンツにコンポーネントを追加したいなら、 MDX をプロジェクトに |
11 | | -追加する Gatsby プラグインである `gatsby-plugin-mdx` を使うことをおすすめします。 |
| 5 | +Markdown を使って長いコンテンツを作るとき、[コンポーネント](/docs/glossary/#component)を埋め込みたくなるかもしれません。これは多くの場合、コンテンツを JSX で書くか、カスタム文法を使うプラグインを利用することで解決されます。1 つ目の手段の JSX はコンテンツを書くのに優れたフォーマットではなく、コンテンツがチームにとって親しみづらくなってしまうため、最適ではありません。カスタム文法とプラグインを使う方法はとても柔軟性に欠ける場合が多く、構造化を促進しません。もしあなたが自分のコンテンツにコンポーネントを追加したいなら、 MDX をプロジェクトに追加する Gatsby プラグインである `gatsby-plugin-mdx` を使うことをおすすめします。 |
12 | 6 |
|
13 | 7 | ## MDX とは? |
14 | 8 |
|
15 | | -[MDX][mdx] はコンポーネント時代のための Markdown です。 |
16 | | -MDX では、 Markdown の中に JSX を埋め込むことができます。 |
17 | | -これは文章を Markdown の簡潔な文法を使って(たとえば `# 見出し` のように)書くことができ、 |
18 | | -より高度なことをしたり、コンポーネントを再利用したりするのには JSX を使える、 |
19 | | -素晴らしい組み合わせです。 |
| 9 | +[MDX][mdx] はコンポーネント時代のための Markdown です。MDX では、 Markdown の中に JSX を埋め込むことができます。これは文章を Markdown の簡潔な文法を使って(たとえば `# 見出し` のように)書くことができ、より高度なことをしたり、コンポーネントを再利用したりするのには JSX を使える、素晴らしい組み合わせです。 |
20 | 10 |
|
21 | | -MDX は、文章が主体なサイトに、図表やアラートなどのコンポーネントを、 |
22 | | -プラグインの設定なしで追加するのに役立ちます。 |
23 | | -それは「設定より構成」を強調し、ブログの記事やデザインシステムの文書化、 |
24 | | -没入型あるいは動的なインタラクションのある長い記事で真価を発揮します。 |
| 11 | +MDX は、文章が主体なサイトに、図表やアラートなどのコンポーネントを、プラグインの設定なしで追加するのに役立ちます。それは「設定より構成」を強調し、ブログの記事やデザインシステムの文書化、没入型あるいは動的なインタラクションのある長い記事で真価を発揮します。 |
25 | 12 |
|
26 | | -MDX では、MDX ドキュメントをインポートし、コンポーネントとして利用できます。 |
27 | | -これにより、一箇所に用意した FAQ ページなどを、ウェブサイトの全体で再利用できます。 |
| 13 | +MDX では、MDX ドキュメントをインポートし、コンポーネントとして利用できます。これにより、一箇所に用意した FAQ ページなどを、ウェブサイトの全体で再利用できます。 |
28 | 14 |
|
29 | 15 | ## 実際にどうなるのか |
30 | 16 |
|
31 | | -インポートと JSX 文法は、コンポーネント内で使うのと同じようにはたらきます。 |
32 | | -これによって、開発者とコンテンツ製作者の間でシームレスな体験を得られます。 |
33 | | -Markdown と JSX は以下のように一緒に使うことができます。 |
| 17 | +インポートと JSX 文法は、コンポーネント内で使うのと同じようにはたらきます。これによって、開発者とコンテンツ製作者の間でシームレスな体験を得られます。Markdown と JSX は以下のように一緒に使うことができます。 |
34 | 18 |
|
35 | 19 | ```markdown |
36 | 20 | import { Chart } from '../components/chart' |
|
0 commit comments