📝
【技術選定】WYSIWYGエディタをEditor.js→Tiptapに移行した話
2024-12-06
2024-12-20
約1836字
「開発でチャレンジして、失敗・成功したことをシェアしよう by 転職ドラフト Advent Calendar 2024」の7日目の記事です。
私は、テック人材(エンジニア、デザイナー、PdM、デジタルマーケターなど)に気軽に相談できるサービス、Yardを開発しています。
Markdown形式のエディタではなく、あえてWYSIWYGエディタを採用しました。
WYSIWYGとは、見たままのものを実際に作成出力するという言葉のWhat You See Is What You Getの頭文字をとったものであり、WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果(HTML、印刷結果等)として得られるようなアプリケーションのこと。
web meisterサイトより
自分は普段、GitHubを使う機会が多いのでMarkdownで文章を書くことには慣れています。
しかし、エンジニアではないテック人材(PdM、デザイナー、デジタルマーケターなど)にとって、Markdownなどのプレーンテキストより直感的なWYSWYGエディタの方が支持されるのではないかと思い、Yardでは、そちらを採用しました。
当初は、Editor.jsを採用していましたが、途中Tiptapに移行することにしました。
理由は、端的に言うと技術選定のミスです。
最初にEditor.jsを採用した時点では、以下の点を選定軸にしていました。
これらの要件は、Editor.jsのdemoページを見る限り、満たされているように思えました。
ところが、ベータ版をユーザーに使ってもらう中で、
#
でH1に保管される)が欲しいといった要望が増えていきました。
Editor.jsのMarkdown系のプラグインとして、editorjs-markdown-parserがPublic archiveになっているなどMarkdownと互換させていくには心許ないと思いました。
その点、Tiptapは上記の追加の要件はカバーしていましたし、有料版もあり開発の将来性が期待できました。
自分のエンジニアの経験として、データエンジニアやバックエンドエンジニアのような経験が多かったため、フロントエンドの土地勘がなかったことが大きいと思っています。
フロントエンドでの技術選定は、より直感的なUI/UXが重視され、要件定義が難しい面があると思います。
そのため、開発者達の主観で技術選定してしまうと盲点が出てしまうと思います。
これを回避するには、実際に動くモックをユーザーにいじってもらいながら、最善のものを選ぶ以外にないのではないでしょうか。
今回、Editor.jsを選んだことはミスではありましたが、比較的早い段階でユーザーの意見を拾えたので、致命的なミスにはならなかった認識です。
今回は、WYSIWYGエディタの技術選定に関する失敗とそれをなんとか挽回した話を紹介しました。
フロントエンドのライブラリの技術選定は、早い段階でユーザーのフィードバックをもらいながら、改善していくことが重要だと再認識しました。
Yardは、テック人材(エンジニア、デザイナー、PdM、デジタルマーケターなど)に気軽に相談できるサービスです。
ご興味ある方は、ぜひユーザーとして使ってみてフィードバックいただけると幸いです!
©︎ 2024 - Yard