Machbase NeoがVue.jsからReactへ移行した理由
フロントエンドの技術選定
Webベースのフロントエンドを設計・開発することは、複雑で難しい仕事です。同時に、ユーザーが直接触れるインターフェースを担う重要な領域でもあります。そのため、開発組織がUIの基盤を選ぶ際には、メンバーの知識、製品の要件、組織文化、個人の特性、会社の方針など、多くの要素が関わります。
UI開発の基盤を決めることは、単純な選択ではありません。明確な理由がないまま採用される場合もありますが、多くは組織の目標や要件を慎重に評価した結果です。
3年間のVue.js活用を振り返る
Machbaseの開発チームは、本稿執筆までの3年間、フロントエンドの主な基盤としてVue.jsを使ってきました。特にエッジコンピューティングを基盤とするクラウド製品CEMSのUIでは中心的な役割を担っており、多くの開発者が設計・実装を通じて学び、使い慣れていました。
Vue.jsで開発したCEMSの画面
しかし、新しいデータベース製品Machbase Neoを約1年かけて開発する中で、Vue.jsが今の要件に最適なのかを改めて考えるようになりました。
Machbase Neoでの新たな取り組み
まず、Machbase Neoを紹介します。Neoは時系列データベースに加え、データの収集、変換、保存、取得をまとめて扱うオールインワン製品です。MQTT、SSH、HTTP、gRPCなどのサーバー機能を内蔵し、追加プロセスの導入・管理にかかる負担を減らすことを目指しています。
Neoのサーバー部分はオープンソースとして公開され、構造や動作を確認できます。内部には、TPCの時系列処理ベンチマークで高い性能を示したMachbaseのTSDBエンジンを組み込んでいます。
ソースコード：Machbase NeoのGitHubリポジトリ
Neoでは、別の可視化ツールを用意しなくてもチャートを描き、Web画面から作業できるようにするため、当初Vue.jsを採用していました。
ところが開発が進むにつれて、私たちの用途では課題が目立つようになりました。当時のチームが感じていた長所と短所を整理します。
Vue.jsの長所
1. 学びやすさ：比較的緩やかな学習曲線で、さまざまな経験レベルの開発者が取り組みやすい。
2. 柔軟性：既存プロジェクトへ組み込んだり、必要な部分だけを利用したりできる。
3. リアクティブなデータバインディング：モデルと画面の同期を簡潔に扱える。
4. コンポーネントベースの構成：機能を分割し、再利用しやすい。
Vue.jsで感じた課題
1. エコシステム：当時の私たちの要件では、Reactに比べて目的に合うライブラリーやツールの選択肢が少なく、高度な機能を自作する場面があった。
2. 企業による支援：ReactやAngularと比較した支援体制の違いを、長期的な継続性や更新方針を考える上で気にしていた。
3. 性能：アプリが大きくなり、複雑に入れ子になったコンポーネントを扱う中で、UIの応答性が課題になった。
4. コミュニティ：チームが必要とする問題解決の情報を探す際に、利用できる資料が限られる場面があった。
長所はあるものの、こうした課題が目立ってきたことで、変化するNeoの要件にVue.jsが引き続き最適かを検討し直しました。
特に、ライブラリーの選択肢と性能の課題が、開発期間やコストに影響していました。新機能に合う既存コンポーネントが見つからず、自作することが増え、複雑さと必要なリソースが大きくなっていました。
機能の追加に伴い、Web UIの応答性にも低下を感じるようになりました。体感には個人差がありますが、さらに機能を増やしたときも快適さを保てるのかが懸念でした。
次に、代替候補としたReactについて、当時のチームが評価した点を紹介します。
Reactの長所
1. 活発なコミュニティ：さまざまな要件に対応するライブラリーの選択肢が豊富。
2. 描画の効率：仮想DOMを使う構成で、私たちのUIの描画・応答速度を改善できる可能性があった。
3. 継続的な改善：更新や改善が活発で、機能と性能の向上を期待できた。
Reactで感じた課題
1. 学習の負担：Vue.jsに慣れたチームにとって、習得に時間がかかった。
2. 設計の複雑さ：構成や実装方法によっては、個々の開発作業が複雑になる。
3. 学び続ける必要：設計手法や推奨される使い方の変化を継続して追う必要がある。
習得には時間がかかるものの、慣れれば豊富なライブラリーによって開発期間とコストを減らせる点は魅力的でした。実際に置き換えて試したところ、応答速度を大幅に改善できる可能性も見えてきました。
Machbase Neo 8.0でVue.jsからReactへ
社内での技術調査を終え、Reactを採用したUIの大規模な再開発を行いました。作業はおよそ1〜2か月で、外観はかなり変わりましたが、基本機能に大きな違いはありません。
従来のMachbase Neo 1.7のUI
Machbase Neo 1.7のUI
新しいMachbase Neo 8.0のUI
Machbase Neo 8.0のUI
Reactへの移行で何が良くなったか
以下は開発者から聞いた改善点です。私自身も操作してみて、応答が以前の2〜3倍以上速くなったように感じました。これは厳密なベンチマークではなく体感ですが、セダンからスポーツカーへ乗り換えたような印象でした。
描画性能：今回の実装では、仮想DOMを使った描画の応答が軽快になりました。
開発期間：プロジェクトが大きくなる中で、必要な開発時間を抑えやすくなりました。
コミュニティ：参考資料が豊富で、問題の解決策を探しやすくなりました。
実装の自由度：開発者の経験に応じて、短く簡潔なコードを書く選択肢が増えました。
再利用：Hooksを活用して、ロジックやコンポーネントを効率よく再利用できるようになりました。
開発のしやすさ：チームにとって、コンポーネントの状態やライフサイクルに関わる処理を整理しやすくなりました。
まとめ
ここで紹介したのは、Machbase Neo開発チームの主観を含む経験です。組織や用途によって評価は変わり、それぞれの技術に長所と短所があります。本稿だけで判断せず、実際に開発・検証して、自分たちに合う結論を出してください。Neoチームは、開発が速くなり、何より操作時の応答が快適になったことに満足しています。
この経験が、ほかの開発コミュニティの参考になれば幸いです。
お読みいただき、ありがとうございました。
