✏️
【2025年版】最新のWYSIWYGエディタのライブラリ比較
はじめに
今回は、Yardのエディタの技術選定の際に調査した、各WYSIWYGエディタ ライブラリの特徴や動向について整理したいと思います。
WYSIWYG とは？
What You See Is What You Get（見たままが得られる）の頭文字をとったもの Wikipediaより
とあるように、直感的に文章がかけるエディタです。
よく、独自の記法があるMarkdownと比較されることが多いですが、WYSIWYGはより直感的に文章を書くことができ、学習コストが低いことが特徴だと思います。
なぜ WYSIWYG？
YardではWYSWYGを採用していますが、よくユーザーの方に「なぜMarkdown形式ではないの？」という質問がされます。
これは、 特に Zenn / Qiita / Github などのMarkdown形式を採用しているツールに慣れているエンジニアからよくもらうコメントです。自分も、そっち派です。
一方で、Notion / note / WordPress / Medium などでは、WYSIWYGなエディタが採用されており、より広いバックボーンの方に支持されている面はあると思います。また、個人的には、最近noteに技術ブログを書くエンジニアも多い印象を持っています。
そのため、Yardとしては、テック人材をメインの利用者と位置付けており、エンジニア以外にもデジタルマーケターやPdMなどの方にも使っていただきたい期待があり、より間口を広げたインターフェースを採用しました。
WYSIWYGライブラリの比較
Editor.js
2017年1月に公開
ブロックスタイルエディタ（ヘッダやパラグラフ単位で編集可能）
notionのようなモダンなUI
JSON形式の出力（ブロックスタイルエディタ）
プラグインが多く、カスタマイズがしやすい
Tiptap
2019年12月に公開
ヘッドレス（上にメニューバーがない）なエディタでnotionのようなUIもgoogle docsのようなUIも表現できます
プラグインも豊富
軽量でパフォーマンスも優れている
Quill
2014年から公開されており、npmのインストール数も多く豊富な実績
githubのスター数も最も多い
ドキュメントやweb上に公開されている情報も多い
deltaという独自のJSON形式でデータを保持
draft.js
facebook製、Reactとの相性が良い
EditorStateと呼ばれるステートでエディターの状態を抽象化しており、immutable.jsを使用している
2023年2月にアーカイブされているので、開発はストップしています
さいごに
本記事では、WYSIWYGツールの概要と代表的なツールを紹介しました。
個人的には、ツールを比較検討する上で決定打となる情報がネット上に少なく、悩んだというのが本音です。
最終的には、モダンなEditor.jsとTiptapのどちらかで迷いましたが、比較的 react.jsで書かれているコードサンプルがweb上に多いEditor.jsを採用しました。
なので、今後この技術選定は変わる可能性があります。
notionのような直感的なUIやプラグイン開発の活発さが気に入りTiptapを採用しました。
もし、Xで @toitech までコメントいただけると幸いです！
Read next
Loading recommendations...