React MarkdownでMarkdownを扱う方法

フロントエンド開発•2025/1/22

React Markdownとは

Reactアプリケーション上でMarkdownを手軽に扱いたいと考えたことはないでしょうか。 Markdownは見出しや箇条書き、リンクなどをシンプルな記法で表現できるため、多くのエンジニアやコンテンツ制作者に親しまれています。

しかし、Reactの標準機能だけではMarkdownをHTMLに変換して描画する仕組みが用意されていません。そこで役立つのが react-markdown というライブラリです。

react-markdown は、Markdown形式の文字列をReactコンポーネントとしてレンダリングしやすい形にしてくれます。ブログ記事の本文やコメント投稿のテキストなどを、ユーザーにとって書きやすいMarkdown形式で入力してもらい、それを画面上でHTMLに整形して表示できるようになります。

実務でも、Markdownを使ってドキュメントを素早く作成し、社内外で共有する場面は多いです。 Reactをフロントエンドのベースにするなら、Markdownのレンダリングをどう実装するかが課題になることがあります。そのときに、react-markdown を活用すると複雑な実装を行わなくてもよいので、開発期間を短縮しやすいですね。

特に、記事投稿やコメント機能を持つWebアプリケーションでは、ユーザーがHTMLを直接入力するのは難しいかもしれません。 Markdownであれば、文字装飾や見出し、リストなどを簡単に指定できます。結果として、ユーザー体験の向上だけでなく、開発や保守のコストを下げられるのではないでしょうか。

もし「Markdownなんて初めて聞く」という方がいらっしゃるなら、テキストファイルに記号を組み合わせて見出しや箇条書きを作成する感覚をイメージしてみてください。 Reactと組み合わせると、入力した内容をリアルタイムでプレビューする機能や、サーバー側のDBにMarkdownデータを保存しておき、表示時に変換する仕組みなどを柔軟に構築できます。

実務での活用シーン

実務の現場でMarkdownを取り入れると、文章作成や情報共有がスムーズになります。たとえば社内Wikiやブログサービスなどでは、素早くドキュメントを書くことが求められますよね。

ここでは、react-markdown を組み合わせると便利なシーンをいくつか紹介します。

ブログやニュース記事の投稿機能

ブラウザ上でMarkdownを入力できるフォームを用意し、サーバーにはMarkdown形式のまま保存します。表示するときはreact-markdownを用いてHTMLとしてレンダリングし、ユーザーにとって読みやすい記事ページを生成します。

社内のナレッジベースやWikiシステム

エンジニアやドキュメント担当者がMarkdownで資料を書き、レビューや更新を素早く行えます。ページ表示にはReactを使い、UIやアクセス権管理を柔軟に拡張できます。

チャットアプリケーションのメッセージ表示

チャットアプリでリッチテキストを扱うなら、Markdownが書ける機能を用意すると便利です。ユーザーは軽い装飾やリンクをメッセージに入れたいときも簡単に対応できます。

商品説明やドキュメント管理

ECサイトなどで商品説明をMarkdownで管理すると、レイアウトの統一感を保ちやすいかもしれません。更新時にHTMLタグの閉じ忘れなどが起こりにくくなる利点もあります。

このように、Markdownを取り入れたワークフローには多くの可能性があります。実務では、プロジェクトの規模やチームの構成によって、設計や運用のやり方が変わるでしょう。ただ、UI部分にReactを採用しているのであれば、react-markdown を利用するのが開発効率を高める近道になりがちです。

Markdownはテキストベースで見やすく、改修時の差分も追いやすいです。文章や設定ファイルなどを管理する際に、バージョン管理ツール（Gitなど）との相性も良いです。

Reactでの開発を想定すると、状態管理やルーティングなど、多彩な機能が絡むこともあるはずです。そういった中でも、react-markdown はほかのReactコンポーネントと同じように扱えるので、特別な実装をしなくても基本的なレンダリングが実行できます。プラグインを使えば、画像やリンクの描画、テーブルのカスタマイズなども比較的容易に行えるでしょう。

導入方法と具体的なコード例

それでは、react-markdown を導入する方法とサンプルコードを見てみましょう。 Reactプロジェクトにおいて、パッケージを追加するには以下のようにコマンドを実行します。


npm install react-markdown

あるいはyarnを使っている場合は、


yarn add react-markdown

という形になります。これで、ReactコンポーネントのなかでMarkdownをHTMLに変換できる便利なコンポーネントが使えるようになります。

ここでは、実際にテキストエリアを使ってMarkdownを入力し、その内容をプレビューする簡単な例を紹介します。ユーザーが入力を進めるたびに状態が更新され、リアルタイムで変換結果が表示される構成です。


import React, { useState } from "react";
import ReactMarkdown from "react-markdown";

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState("**初期のMarkdownサンプル**\n\n- リスト項目1\n- リスト項目2");

  const handleChange = (e) => {
    setMarkdown(e.target.value);
  };

  return (
    <div style={{ display: "flex", gap: "16px" }}>
      <textarea
        style={{ width: "50%", height: "300px" }}
        value={markdown}
        onChange={handleChange}
      />
      <div style={{ width: "50%", border: "1px solid #ccc", padding: "8px" }}>
        <ReactMarkdown>{markdown}</ReactMarkdown>
      </div>
    </div>
  );
}

export default MarkdownEditor;

このコードは、テキストエリアで入力されたMarkdownをReactの状態に保持しておき、その状態を <ReactMarkdown> コンポーネントへ渡しています。これによって、MarkdownがHTMLに変換され、即時にプレビュー領域へ反映されます。

もし見出しやリンク、画像などをより細かくカスタマイズしたい場合は、react-markdown にプラグインを適用したり、特定の要素を自作コンポーネントで差し替えたりできます。たとえば、外部リンクをすべて新しいタブで開くようにしたいなら、 components プロパティで a 要素を上書きする方法があるのです。

さらに実務で考えられるのは、Markdownをサーバーに保存し、閲覧ページではreact-markdownを使って描画するパターンです。ブログやナレッジベースのように記事を管理するアプリケーションでは、この構成が分かりやすいですね。ユーザーが記事を編集するときにはMarkdownを表示し、HTMLタグを意識しなくてもある程度リッチな文書が書けるようになるでしょう。

SSRを活用するときのポイント

Reactアプリケーションをサーバーサイドレンダリング（SSR）で動かすケースもあります。 SSRを使うと、初期描画をサーバーが行うため、クライアントがJSを受け取る前からHTMLが構築された状態でページを返せるメリットがあります。

react-markdown はSSRにも対応しています。 Next.jsなどでSSRを構築する際には、サーバーサイドの処理でMarkdownデータを取得しておき、そのまま <ReactMarkdown> へ渡すだけでHTML化できるのです。結果的に、初回ロードが素早く、検索エンジンにも内容を正しく認識されやすいページを構築できます。

一方、SSR環境で動作させる際には、以下のような点に注意を払うことが多いです。

外部プラグインとの互換性

Node.js環境で動かない依存パッケージが含まれているとエラーになる可能性があります。必要なプラグインの動作環境をチェックすることが大切です。

データ取得タイミング

SSRの場合、 getServerSideProps や getStaticProps などを用いてMarkdownをサーバー側で取得し、コンポーネントに渡すパターンが多いでしょう。クライアントサイドだけでデータ取得する場合とは流れが異なるため、初期レンダリングと再描画のタイミングに気をつけたいところです。

パフォーマンスとキャッシュ戦略

何度も同じMarkdownを変換する処理が発生するなら、どこかでキャッシュを検討する手段もあります。 APIから頻繁にデータを取る場合は、Markdown変換結果を保存しておく仕組みを導入することで、描画の高速化につなげることができるかもしれません。

実務では、SSRを使うかどうかはプロジェクトの要件や運用形態によって変わります。 ReactとMarkdownの組み合わせ自体はSSR、CSR（クライアントサイドレンダリング）のどちらにも対応しやすいため、要件が固まっていれば困ることは少ないはずです。

SSR時に外部プラグインを組み込む場合、Node.js環境での動作やライセンス周りをよく確認してください。状況によってはクライアントサイドだけでMarkdownを変換する設計にするほうが単純になる場合もあります。

まとめ

ここまで、react-markdown を使ってReactアプリケーションでMarkdownを扱うメリットや導入方法、実務における活用シーン、さらにSSRのポイントまでを見てきました。 Markdownは、初心者からベテランまで多くの人が分かりやすいと感じられる表記方法で、HTMLタグを直接書かなくても整形された文章が作れる点が魅力です。

実務では、ブログ投稿、社内ドキュメントの管理、チャットアプリのメッセージ表示など、Markdownを生かせる場面が多々あります。 react-markdown は、それらをReactアプリケーションにスムーズに組み込めるライブラリとして活躍してくれるでしょう。

一方で、プラグインの扱いやSSRとの兼ね合い、キャッシュ戦略など、規模や用途によって考えるポイントはいくつかあります。それでも、基本の実装はライブラリをインストールして <ReactMarkdown> を使うだけとシンプルなので、最初のハードルは低いと感じるのではないでしょうか。

皆さんがReactでMarkdownを取り入れる際には、本記事で紹介したような方法をベースに、自分のプロジェクトへどう組み込むかを検討してみてください。アプリケーションが成長するにつれ必要になる機能をイメージしながら、Markdownの柔軟性を生かした設計を考えるのも楽しいですね。

Markdownで書く利点は、入力ミスやレイアウト崩れのリスクが減るだけでなく、ドキュメントとしても読みやすい形を保てるところにあります。皆さんのプロジェクトが、react-markdown によってより快適にMarkdownを扱える環境になることを願っています。