Wantedlyのエディターを新しいライブラリに移行した話

はじめまして、WantedlyのDXチームのカルバン(@kalvin807)です。今日は、私たちのポストエディターでDraftJSからLexicalへの移行についてお話ししたいと思います。

Draft.jsからLexicalへ

Draft.jsは長い間テキスト編集ライブラリとして使用してきましたが、時々バグや開発の難しさといった問題がありました。2022年にDraftJSのコードがアーカイブされ、新機能の更新が終了しました。この機会に、次のエディターライブラリを検討しました。柔軟性と耐久性を兼ね備えたライブラリを探していました。

一方で、LexicalはMeta社によって開発された新しいOSSエディターで、そのツリー構造とプラグインシステムが開発の容易さと柔軟性を示しています。その結果、私たちはDraftJSをLexicalに置き換えることに決めました。

移行範囲

Wantedlyでは、100万件以上の投稿と大量のアクセスを扱っています。利用者に影響を与えずにスムーズな移行を実現するため、以下のことを確保することを設定しました：

• ユーザーの日常的な編集活動への中断を最小限に抑える。
• 視聴者にとっての視覚的な違いをほとんど感じさせない。
• 後方互換性を保ちながら進む

ステップ 0：ポスト 101

移行に取り組む前に、既存のシステムを見てみましょう。

Wantedlyでは、投稿は2つの異なる方法で表示されます。

Web: SEOと、ロード時間を短縮するために内製のレンダラーを使って、サーバーサイドレンダリング（Server side rendering）します。
アプリ：モバイルアプリに生のデータを使ってネイティブレンダリングします。

ステップ1：Lexicalの導入

当初の焦点は、全体の構造に不可欠な新しいエディターとそのレンダラーの作りました。

既存のポストを影響しないよう、Lexical用の新しいパイプラインの構築でした。既存のデータの破損を防ぐため、私たちはデータベースとコードベースでDraft.jsとLexicalコンテンツを区別し、それらの同時存在を確保しつつ、干渉しないようにしました。

ステップ2：LexicalからDraftJSへのコンバーター

モバイルアプリのアップデートの段階的な性質を考えて、古いアプリバージョンでも正確に表示できるように、LexicalコンテンツをDraft.js形式に変換するコンバーターを開発しました。

同時に、LexicalエディターをWebユーザーに徐々に導入し、バグを監視しながらシステムを継続的に改善しました。

ステップ3：DraftJSからLexicalへのコンバーター

移行の最終段階では、既存のDraft.jsポストをLexical形式に変換することに焦点を当てました。このため、当初のコンバーターを更に改善して、DraftJSからLexical変更できるようにしました。

毎晩自動的に実行されるバッチジョブを設定し、少しずつを変換しました。

自動変換の検証戦略

手動チェックが不要な正確な変換を保証するために、いくつかの制御と検証方法を実装しました：

1. 各変換について、LexicalバージョンとDraftJSバージョンの両方を生成し、元のHTMLと変換されたバージョンを比較して、視覚的および機能的な整合性を確認しました。

2. テストを通過できなかったポストは、変換せずに修正を行い、その後に再度チャレンジしました。これにより、壊れた内容が保存されることを防ぎました。

結果

今年の初めに準備を始め、皆さんの努力と協力のもとで、10月にはすべての投稿を正常に変換することができました！ 週に約100,000投稿のペースで、特別に対応が必要なエッジケースは約200投稿のみでした。現在、この投稿を含むすべてがLexicalで運用されており、ほとんどのユーザーは違いに気付いていないはずです。これは、私たちの目標がうまく達成されたと思います。🎉

最後に、DXチームと共に協力した全てのエンジニアの皆様に深く感謝申し上げます！

実装の詳細に興味のある方のために、コンバーターの実装や遭遇した興味深いバグ、問題について話す別の投稿を作成する予定です!