株式会社リフカム / エンジニア
エディタライブラリのリプレイス
# エディタライブラリのリプレイス@リフカム ## チーム編成 - エンジニア 3 名(自分含む) - CTO ## 背景 - これまでのエディタ関連機能はProseMirrorというlibraryを利用して実装されていたがフリーのlibraryで機能性に乏しく、細かい仕様に合わせて自前実装がなされており、レガシー化していた - UX向上のためにエディタ関連機能を磨き込んでいく必要があったが、現状のままでは機能の拡張や修正は難しいような状態になっていた - 影響範囲が広く難易度が⾼かったためこれまで負債として据え置かれてしまっていたが、自分が引き受ける形でリプレイスに着手していくことにした ## 詳細 #### 課題 - エディタ機能が依存しているProseMirror周りの設計・実装がレガシー化していた - 例えばDB内の各値もProseMirrorの仕様を前提としており、実装とデータ構造が密結合してし まっているような状態だった - エディタ機能を磨いていくことでUXを向上させられる点はチームとしても認識していたが、この負債を解決しないとそういった機能性を磨き込んでいくことができない状況になっていた #### ソリューション - まずエディタ機能が依存していたProseMirrorを有償のFroalaにリプレイスし、仕様の柔軟性や拡張性を担保した - 合わせて、UX改善として着手したかったメンション機能などをリプレイスに合わせてFloalaを用いて実装した - Floalaの機能性だけでは実現できない仕様については、3rdパーティlibraryなども上手く組み合わせて実装した - バックエンドについても、これまでフロントエンドの内部仕様と密結合していた設計を見直し今後は柔軟にlibarryの置き換えや機能の拡張が実現できることを目指した設計に改善した - 既存のデータについては、migrationを実行してより汎用的な表現に変換 #### 成果 - 技術負債の解消により提供価値にフォーカスした取り組みが可能に - 対応が困難なため据え置かれていた技術負債を解消し、エディタ機能というコア機能に一つを磨きこめる状態に持っていけ、ユーザーへの価値をより柔軟かつスピーディに行えるようになった - プロダクト観点からレバレッジを効かせる形でのリアーキテクチャ - リプレイスしたFroalaエディタは汎用的なコンポーネントとして実装したので、新しくエディタ機能を取り込みたい画面や機能にも簡単に導入できるようになった #### 工夫 - 技術的貢献 - ⽐較的難易度の⾼いプロジェクトだったが、主体性を持ってプロジェクトを管理・進捗させることで 1.5ヶ⽉ほどで完了させることができた - キャッチアップ力 - これまでエディタlibraryやフロントエンドを集中的に扱ってきた訳ではなかったが、コニュニケーションや主体的な取り組みをベースに迅速にキ ャッチアップし、スムーズにプロジェクトを進められた