CMSを使わないエディタ選定

エディタ実装のための技術選定まとめ

1. エディタの種類の粒度

エディタは、大きく分けて以下の 2 パターンがある。

1. Markdown プレビュー型エディタ

   • エディタ内では Markdown テキストを入力し、横（または下）にプレビューを表示する形式
   • 「Markdown ソース」と「プレビュー」が分離しており、ユーザが Markdown 記法を直接触れる
   • 例：uiwjs/react-md-editor など

2. WYSIWYG エディタ

   • 編集画面で見たまま（装飾やレイアウト）を操作できるエディタ
   • シンプルなテキストエリアをラッピングしており、太字や見出しなどを UI ボタンやホットキーで操作
   • 最近だと、WYSIWYG なものの中で、ブロックベースエディタなんてものも出てきている。Notion などを想像するとわかりやすい
   • 例：Slate.js / Plate など

各種エディタの特徴

• Markdown プレビュー型は「Markdown そのものを直接編集したい」ユーザに向いている。
• WYSIWYG は「エンドユーザが Markdown 等を意識せずに記事を書きたい」場合に向いている。

---

2. データ形式の粒度

最終的に HTML として表示できればよいため、どの形式でデータを保存しておき、どのタイミングで HTML に変換するかがポイント。その過程で取れるデータ形式の選択肢は以下のとおり。

1. JSON

   • エディタ（特に Slate 系）の内部状態を JSON として保存するパターン
   • 再編集でロスが少ない
   • 表示時にはシリアライザを使って HTML に変換

2. Markdown (MD)

   • プレーンテキストベースで軽量
   • Git などでバージョン管理しやすい
   • 表示時に Markdown を HTML に変換（サーバー or クライアントで）

3. MDX

   • Markdown に加え、React コンポーネントの埋め込みが可能
   • デザイナーやエンジニアがより柔軟にコンテンツを作成できるらしい
   • ただし記事などの情報がまだ少ない気がする

4. HTML

   • 最終出力をそのまま保存する
   • 再編集を考えない・または HTML を直接操作できるケースに向いている
   • が、極端に記事編集がめんどくさい

---

3. 具体的なツールと特徴

3.1 エディタ系ツール

3.1.1 uiwjs/react-md-editor

• 分類: Markdown プレビュー型エディタ
• 概要: テキストエリアとプレビューを並べて表示し、Markdown をリアルタイムでプレビューするツール
• 特徴:
  • 導入が比較的容易
  • ユーザが Markdown 記法を直接編集できる
  • WYSIWYG よりも細かい UI カスタマイズは少ないが、Markdown 派のユーザに好評

3.1.2 Plate

• 分類: WYSIWYG エディタ (Slate.js をベースにした拡張ライブラリ)
• 概要: Slate.js を使いやすくラップし、プラグイン体系を整えた次世代エディタツール
• 特徴:
  • Slate.js の柔軟性を引き継ぎつつ、各種プラグイン（リンクや画像、テーブルなど）を簡単に利用可能
  • データ形式はSlate 独自の JSONを扱う
  • HTML 化する際は Plate が提供するシリアライザ（@udecode/plate-serialize-htmlなど）を利用
• 注意点:
  • 後述したが、React 19 を採用しているプロジェクトだと依存関係で競合が起こって大変

3.1.3 Slate.js

• 分類: WYSIWYG エディタのフレームワーク
• 概要: 非常に柔軟なリッチテキストエディタが組める React 向けライブラリ
• 特徴:
  • 低レベル API が豊富で、さまざまな拡張を自作できる
  • JSON ベースでエディタ状態を管理
  • 自由度が高い分、実装コストはやや高め

3.2 データ変換系ツール

3.2.1 react-markdown

• 分類: Markdown → React コンポーネントへの変換ツール
• 概要: 受け取った Markdown 文字列を React 要素としてレンダリングするライブラリ
• 特徴:
  • クライアントサイドで Markdown を HTML に変換して表示
  • プラグインを使うと GFM テーブルなど拡張 Markdown のレンダリングも可能
  • あくまで「Markdown 表示のためのツール」であり、編集機能はない

---

4. おまけ

4.1 prose の役割

• @tailwindcss/typography プラグインによって提供されるクラス
• prose を付与することで、Markdown などで生成された標準的な HTML 要素（p, h1~h6, ul, ol など）に対して、適切なタイポグラフィスタイルを自動適用してくれる
• React Markdown で生成された HTML を見やすく整える際によく使われる（というか、これがないと zenn, notion みたいな綺麗な感じにならない）

4.2 Plate の React バージョン互換

• Plate を Next.js プロジェクトに入れようと試行錯誤したが、React 19の関係で、依存パッケージの競合が頻発して大変だった
• ダウングレードできる場合は大丈夫だが、Next.js(App Router)だと React19 前提だったりする(参考：Can React 18 be used with Next.js version 15?)
• フレームワークレベルから技術選定する必要があるかも