react-markdownで表が表示されない時はremark-gfmを追加すれば即解決

React でMarkdown機能を実装していて「テーブルが表示されない…」と困っていませんか？GitHubでは正常に表示される表が、react-markdownでは単なるテキストになってしまう問題は、remark-gfmを追加するだけで即解決します。

この記事では、最短3分で問題を解決する方法を解説します。

問題：Markdownテーブルが表示されない現象

よくある症状

以下のようなMarkdownテーブルを書いても…

| 機能 | React | Vue | Angular |
|------|-------|-----|---------|
| 学習コスト | 中 | 低 | 高 |
| 人気度 | 高 | 中 | 中 |

react-markdownでは表として表示されず、こんな風にプレーンテキストになってしまいます：

| 機能 | React | Vue | Angular |
|------|-------|-----|---------|
| 学習コスト | 中 | 低 | 高 |
| 人気度 | 高 | 中 | 中 |

なぜこの問題が起こるのか

react-markdownはデフォルトでCommonMark標準に準拠しており、テーブル記法は含まれていません。テーブルはGFM（GitHub Flavored Markdown）の拡張機能だからです。

標準	テーブル対応
CommonMark	❌ 非対応
GFM	✅ 対応

解決策：remark-gfm追加の3ステップ

GitHub

GitHub - remarkjs/remark-gfm: remark plugin to support GFM (autolink literals, footnotes, strikethro... remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists) - remarkjs/remark-gfm

Step 1: remark-gfmをインストール

# npm の場合
npm install remark-gfm

# yarn の場合
yarn add remark-gfm

# pnpm の場合
pnpm add remark-gfm

Step 2: remarkPluginsに追加

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function MarkdownComponent() {
  const markdown = `
| 機能 | React | Vue | Angular |
|------|-------|-----|---------|
| 学習コスト | 中 | 低 | 高 |
| 人気度 | 高 | 中 | 中 |
  `;

  return (
    
      {markdown}
    
  );
}

Step 3: 完成！

これだけで表が正常に表示されるようになります。たった1行の追加で問題解決です。

表のスタイリング（おまけ）

最低限のCSS設定

デフォルトでは境界線がないので、基本的なスタイルを追加しましょう：

/* 基本的なテーブルスタイル */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

th, td {
  border: 1px solid #dfe2e5;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #f6f8fa;
  font-weight: 600;
}

コピペ用：きれいなテーブルスタイル

/* GitHub風のテーブルスタイル */
.markdown-content table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  margin: 16px 0;
}

.markdown-content table th,
.markdown-content table td {
  padding: 6px 13px;
  border: 1px solid #d0d7de;
}

.markdown-content table th {
  background-color: #f6f8fa;
  font-weight: 600;
}

.markdown-content table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .markdown-content table {
    font-size: 14px;
  }
  
  .markdown-content table th,
  .markdown-content table td {
    padding: 4px 8px;
  }
}

その他のGFM機能も使えるようになる

あわせて読みたい

react-markdown Markdown component for React

remark-gfmを追加すると、テーブル以外にも便利な機能が使えるようになります：

取り消し線

~~削除された文字~~
削除された文字

タスクリスト（チェックボックス）

- [x] 完了したタスク
- [ ] 未完了のタスク
- [ ] もう一つのタスク

自動リンク

https://github.com
www.example.com
contact@example.com

これらのURLやメールアドレスは自動的にリンクに変換されます。

脚注

これは脚注付きの文章です[^1]。

[^1]: ここに脚注の内容を書きます。

バージョン互換性の注意点

react-markdownとremark-gfmのバージョンには互換性があります：

react-markdown	remark-gfm
v9.x以上	v4.x（最新）
v8.x	v3.0.1
v7.x以下	v2.x

もしTypeErrorが発生する場合は、バージョンの組み合わせを確認してください：

# react-markdown v8系を使っている場合
npm install remark-gfm@3.0.1

まとめ：たった1行で解決

react-markdownでテーブルが表示されない問題は、remarkPlugins={[remarkGfm]}を追加するだけで即解決します。GitHubと同じようにMarkdownを表示したいなら、remark-gfmは必須のプラグインです。

解決手順のおさらい：

• npm install remark-gfm
• import remarkGfm from 'remark-gfm'
• <ReactMarkdown remarkPlugins={[remarkGfm]}>

これで表だけでなく、取り消し線・チェックボックス・自動リンク・脚注も使えるようになり、より豊かなMarkdown表現が可能になります。技術ブログやドキュメントサイトの制作がぐっと楽になりますよ！