React.js と Draft.js を利用したリッチテキストエディタ開発

皆さん、こんにちは。

近年、Web アプリケーションにおいて「リッチテキストエディタ」の需要はますます高まっています。記事投稿機能、チャットアプリ、CMS など、ユーザーが自由にフォーマットを整えて文章を入力できる機能は欠かせません。本記事では React.js と Draft.js を組み合わせてエディタを実装する方法を紹介します。

---

Draft.js とは？

Draft.js は Facebook が開発した リッチテキストエディタ用のフレームワーク です。以下のような特徴を持っています。

• React と相性が良い
• カスタマイズ性が高い
• プレーンテキストから Markdown 風、HTML 出力まで柔軟に対応可能
• プラグインや拡張が豊富

他のエディタライブラリ（Quill.js, TinyMCE など）と比較すると、より「React 的な思想」で開発できる点が魅力です。

---

プロジェクト準備

まずは React プロジェクトを作成し、Draft.js をインストールします。

npx create-react-app draftjs-editor-sample
cd draftjs-editor-sample
npm install draft-js

---

基本的なエディタの実装

Draft.js では EditorState を管理し、Editor コンポーネントに渡すことでエディタを構築します。

import React, { useState } from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

export default function MyEditor() {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty()
  );

  return (
    <div style={{ border: "1px solid #ccc", padding: "10px", minHeight: "200px" }}>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
}

これでシンプルなテキストエディタが完成します。

---

ボールドやイタリックなどのスタイル適用

RichUtils を利用すると、ユーザーが選択したテキストにスタイルを適用できます。

import React, { useState } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";

export default function MyEditor() {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty()
  );

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return "handled";
    }
    return "not-handled";
  };

  const toggleBold = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"));
  };

  return (
    <div>
      <button onClick={toggleBold}>Bold</button>
      <div style={{ border: "1px solid #ccc", padding: "10px", minHeight: "200px" }}>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          handleKeyCommand={handleKeyCommand}
        />
      </div>
    </div>
  );
}

これで「Bold」ボタンを押すと太字に切り替えられるようになります。もちろん ITALIC や UNDERLINE も同様に追加可能です。

---

出力の取得

入力されたテキストは convertToRaw や convertToHTML（プラグイン利用）で出力可能です。

import { convertToRaw } from "draft-js";

const rawData = convertToRaw(editorState.getCurrentContent());
console.log(rawData);

JSON として保存したり、HTML に変換して表示するなど、用途に応じて使い分けできます。

---

まとめ

本記事では React.js + Draft.js を用いたエディタ開発 の基本を紹介しました。

• Draft.js は Facebook 製の React 向けリッチテキストエディタフレームワーク
• EditorState を中心にエディタを構築
• RichUtils を使えばスタイルの切り替えが可能
• 出力は JSON/HTML 形式で柔軟に扱える

今後は以下のような機能拡張も検討できます：

• 画像アップロード
• Markdown 対応
• プラグイン導入によるカスタムブロック

Draft.js を利用すれば、アプリに最適化されたリッチテキストエディタを構築できるでしょう。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。