ReactFlow への移行で実現するユーザー体験と開発体験の向上

Transcript

1. ReactFlow への移行で 実現するユーザー体験と 開発体験の向上 吉田純基 2025/03/21 - Muddy Web #11 1
2. 自己紹介 吉田 純基 - Yoshida Junki 2024年株式会社サイバーエージェントに中途入社。 入社後、Web フロントエンドエンジニアとして株式会社 AI Shift に 所属。 AI エージェント構築プラットフォームである AI Worker の開発に従 事。 2
3. アジェンダ 1. 話すこと・話さないこと 2. AI Worker について 3. ReactFlow への移行背景 4. ReactFlow の採用理由と特徴 5. 移行計画 6. 移行後 7. まとめ 3
4. 話すこと・話さないこと 話すこと • 移行背景と計画 • 移行する中での大変だったこととどう乗り越えたか 話さないこと • Rete.js / ReactFlow 詳細な機能、API、仕様 • 生成AI と AI エージェントの詳細 4
5. AI Worker について 企業専用の AI エージェント構築プラットフォーム • 企業ごとの業務ニーズやプロセスに合わせた AI エージェントの構築・運用を 実現するプラットフォーム • サイバーエージェントの独自大規模言語モデルの開発知見と、弊社の生成 AI 導入支援の経験を活かし開発 5
6. ワークフロー機能の紹介 6
7. AI Worker の技術スタック 7 引用: https://speakerdeck.com/cyberagentdevelopers/ai-web-launcher?slide=14
8. 移行前のライブラリの概要と使用していた理由 • Rete.js【riːti】 - 視覚的なノードベースエディタを構築するための TypeScript ファーストのフレーム ワーク ◦ UI以外にも presets、plugin、utility module を提供 • 開発当時、ワークフロー機能の使われ方として、 LLM の精度検証（社内利用のみ）をいち早く行 うために、スピード感を持って開発する必要 があったため採用 8
9. ReactFlow への移行背景 ~ 利用者の変化 ~ • 事業方針の変更により、ワークフロー機能の利用者が変化し、より幅広い お客様が利用するようになった ◦ Before: LLM の精度検証 ▪ 社内利用のみを想定 ◦ After: Before + お客様が自らワークフローを構築 + API として公開し 実行 ▪ 社内だけでなく導入先のお客様でも利用 • → そのため、ユーザー体験をより重視する必要性が出てきた 9
10. ReactFlow への移行背景 ~ 課題 ~ UI / UX （社内でドッグフーディングを行いアンケートを実施） • ピンチズームやマウスホイールによるズーム操作の精度が低い • … などをはじめとした UI / UX に関する改善要望が多かった ◦ （ライブラリを使いこなせなかった自分も悪い） 10
11. ReactFlow への移行背景 ~ 課題 ~ ピンチズームやマウスホイールによるズーム操作の精度が低い 11
12. ReactFlow への移行背景 ~ 課題 ~ dependency 周り • Rete.js の rete-react-plugin が styled-components に 依存していた ◦ AI Worker では Tailwind CSS を採用しており、 Rete.js のために styled-components を追加 ◦ 2025/03/18 に styled-components がメンテナン スモードに移行 ▪ https://opencollective.com/styled-components/updates/thank-you • 複数の plugin を deps として抱えてしまい、dependency update などのメンテナンスが辛い 12
13. ReactFlow への移行背景 ~ 課題 ~ • 既存のライブラリが提供する機能を拡張しつつ独自実装で実現 • 新たにライブラリを採用し、デフォルト提供されている機能を使って実現 • → ReactFlow で実現できそうだったので後者を選択 13
14. ReactFlow の概要と機能 概要 • ノードベースのインタラクティブなダイアグラムやエディタを構築するための React ライブラリ 機能 • 優れた UX ◦ ドラッグ＆ドロップ、ズーム、パンニング、複数選択など直感的な操作性 • 高いカスタマイズ性 ◦ カスタムノードとエッジを React コンポーネントとして自由に実装可能 • 高速レンダリング ◦ 変更ノードのみ再レンダリング、ビューポート内のノードのみ描画し最適化 • 豊富な組み込みコンポーネント ◦ Background、MiniMap、Controls、NodeToolbar、NodeResizer など 14
15. ReactFlow の採用理由 • ReactFlow - Showcase で Dify を始めとしたワークフロー機能を提供しているプロダクトが既にい くつか存在 ◦ https://reactflow.dev/showcase 15
16. ReactFlow の採用理由 • 豊富な Example ◦ shadcn/ui での構築例があり、技術的にマッチ ▪ https://reactflow.dev/components 16
17. ReactFlow の採用理由 • 豊富な Utility Custom Hooks を提供 ◦ React ベースに ReactFlow 内部の状態を Custom Hooks 経由で取得 ▪ useNodesState(), useEdgeState() など... • 当社の他事業部での採用実績があり、困った時に相談しやすい 17
18. • MUST ◦ 約 1 ヶ月で移行が完了していること ◦ 既存の UI、ワークフロー構造を維持しつつ移行すること ◦ ReactFlow 移行による恩恵をうけるために、 UI/UX 体験が改善されること • TODO ◦ UI の再実装 ◦ データのマイグレーション ◦ 段階的に移行する手段 移行計画 18
19. • ReactFlow 用にコンポーネントを再実装する必要がある ◦ AI Worker では提供するノードが複数存在し、手で作り直すと手間がかかる • ダウンタイム 0 でデータのマイグレーションを行う ◦ Rete.js → ReactFlow の構造を変換し DB に保存する必要があった • 段階的に移行していく ◦ 主要機能であるワークフロー機能を一気に全てのユーザーに解放するのは怖かった Muddy な話 19
20. 移行計画 ~ UI の再実装 ~ • rete-react-plugin の Preset を使い UI を構築し ていたため、まずはその Preset から ReactFlow 用のコンポーネントを作成 • AI Worker では提供するノードが複数存在し、手 で作り直すと手間がかかる ◦ → Cursor の Agent Mode を使い、 ReactFlow 用のノー ドコンポーネントを素早く実装 ◦ @docs を用いて、ReactFlow のドキュメントサイトから example や仕様をコンテキストに詰める ◦ @files & folders で明示的に既存コンポーネントのディレ クトリを指定 20
21. 移行計画 ~ データのマイグレーション ~ • Rete.js が出力する構造 （JSON）をそのまま DB に格納していた • Rete.js → ReactFlow の構造にマイグレーション するスクリプトを作成 • 移行前にあらかじめ Rete.js → ReactFlow に変 換する処理をリリースしておき、移行後すぐに最 新状態の ReactFlow の構造が提供できるように 下準備 ◦ 移行前では、 Rete.js / ReactFlow どちらの構造もデータと して永続化しておく 21
22. 移行計画 ~ 段階的に移行する手段 ~ • 主要機能であるワークフロー機能を一気に全てのユーザーに解放するのは怖かった • Feature Flag Management サービスである DevCycle を使い、段階的に移行後の UI を解放して いく方針に ◦ 開発者 → 特定のテナント → 全てのテナントとステップを踏んで移行 22
23. 1ヶ月を予定していたところ、約 2週間で移行が完 了 🎉 ユーザー体験 • ミニマップを簡単に追加 • ピンチズームやマウスホイールによるズーム操作 の精度が改善 開発体験 • onNodeChange, onEdgeChange などのコール バックが豊富で便利 • Example の豊富さとカスタマイズ性で柔軟にコン ポーネント作成や機能追加が可能になった 移行後 23
24. ReactFlow への移行で実現するユーザー体験と開発体験の向上 • AIエージェント構築プラットフォーム「AI Worker」において主要機能であるワークフ ローのライブラリを ReactFlow へ移行 • Cursor の Agent Mode や DevCycle の Feature Flag を使いつつ、UI の再実装の工 数削減や段階的リリースを実現 • ユーザー体験の側面では、ReactFlow に移行することでピンチズームやマウスホ イールによるズーム操作の精度を改善 • 開発者体験の側面では、豊富な Utility Custom Hooks やコンポーネント、 Example を参考に素早く実装とリリースを実現 まとめ 24
25. 25 ありがとうございました！