📝
【技術選定】WYSIWYGエディタをEditor.js→Tiptapに移行した話
公開
2024-12-06
更新
2024-12-20
文章量
約1836字
株式会社ヤードの代表で、Yardの開発者です。 データプロダクトの受託開発や技術顧問・アドバイザーもお受けしております。 #データ利活用 #DevOps #個人開発
はじめに
「開発でチャレンジして、失敗・成功したことをシェアしよう by 転職ドラフト Advent Calendar 2024」の7日目の記事です。
私は、テック人材（エンジニア、デザイナー、PdM、デジタルマーケターなど）に気軽に相談できるサービス、Yardを開発しています。
なぜWYSIWYGエディタ？
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を採用していましたが、途中Tiptapに移行することにしました。
理由は、端的に言うと技術選定のミスです。
最初にEditor.jsを採用した時点では、以下の点を選定軸にしていました。
notionのようなブロックベース（パラグラフごとにJSON形式で保存ができる）のエディタである
notionで使えるような、表現（フォント、文字サイズ、引用、テーブル、画像挿入...）ができる
OSSであり、開発が活発であること
Next.jsでの実装が容易
これらの要件は、Editor.jsのdemoページを見る限り、満たされているように思えました。
ところが、ベータ版をユーザーに使ってもらう中で、
Markdownへの変換（import & export）はサポートして欲しい
Markdown風のショートカット(
#でH1に保管される）が欲しいnotionのスラッシュコマンドのようなものが欲しい
といった要望が増えていきました。
Editor.jsのMarkdown系のプラグインとして、editorjs-markdown-parserがPublic archiveになっているなどMarkdownと互換させていくには心許ないと思いました。
その点、Tiptapは上記の追加の要件はカバーしていましたし、有料版もあり開発の将来性が期待できました。
なぜ技術選定をミスった？
自分のエンジニアの経験として、データエンジニアやバックエンドエンジニアのような経験が多かったため、フロントエンドの土地勘がなかったことが大きいと思っています。
フロントエンドでの技術選定は、より直感的なUI/UXが重視され、要件定義が難しい面があると思います。
そのため、開発者達の主観で技術選定してしまうと盲点が出てしまうと思います。
これを回避するには、実際に動くモックをユーザーにいじってもらいながら、最善のものを選ぶ以外にないのではないでしょうか。
今回、Editor.jsを選んだことはミスではありましたが、比較的早い段階でユーザーの意見を拾えたので、致命的なミスにはならなかった認識です。
さいごに
今回は、WYSIWYGエディタの技術選定に関する失敗とそれをなんとか挽回した話を紹介しました。
フロントエンドのライブラリの技術選定は、早い段階でユーザーのフィードバックをもらいながら、改善していくことが重要だと再認識しました。
Yardは、テック人材（エンジニア、デザイナー、PdM、デジタルマーケターなど）に気軽に相談できるサービスです。
ご興味ある方は、ぜひユーザーとして使ってみてフィードバックいただけると幸いです！