✏️
2024-04-29
2024-05-08
約1039字
Yardでは、記事投稿のWYSIWYG(ウィジウィグ)エディタとして、Editor.js を採用しています。
今回は、Yardのエディタの技術選定の際に調査した、各WYSIWYGエディタ ライブラリの特徴や動向について整理したいと思います。
What You See Is What You Get(見たままが得られる)の頭文字をとったもの Wikipediaより
とあるように、直感的に文章がかけるエディタです。
よく、独自の記法があるMarkdownと比較されることが多いですが、WYSIWYGはより直感的に文章を書くことができ、学習コストが低いことが特徴だと思います。
YardではWYSWYGを採用していますが、よくユーザーの方に「なぜMarkdown形式ではないの?」という質問がされます。
これは、 特に Zenn / Qiita / Github などのMarkdown形式を採用しているツールに慣れているエンジニアからよくもらうコメントです。自分も、そっち派です。
一方で、Notion / note / WordPress / Medium などでは、WYSIWYGなエディタが採用されており、より広いバックボーンの方に支持されている面はあると思います。また、個人的には、最近noteに技術ブログを書くエンジニアも多い印象を持っています。
そのため、Yardとしては、テック人材をメインの利用者と位置付けており、エンジニア以外にもデジタルマーケターやPdMなどの方にも使っていただきたい期待があり、より間口を広げたインターフェースを採用しました。
本記事では、WYSIWYGツールの概要と代表的なツールを紹介しました。
個人的には、ツールを比較検討する上で決定打となる情報がネット上に少なく、悩んだというのが本音です。
最終的には、モダンなEditor.jsとTiptapのどちらかで迷いましたが、比較的 react.jsで書かれているコードサンプルがweb上に多いEditor.jsを採用しました。
なので、今後この技術選定は変わる可能性があります。
もし、Xで @toitech までコメントいただけると幸いです!
©︎ 2025 - Yard