フロントエンド刷新にあたりなぜ Vue.js を採用したのか?

フロントエンド刷新の理由

Aipoでは長らくDojoというJavaScriptライブラリを利用してフロントエンドの開発を行ってきました。 DojoはjQueryやPrototype.jsに近いライブラリです。

DOM操作、CSS操作、イベントリスナー、Ajax、ドラッグ&ドロップなどを定めたDojo Base、日付ピッカーやドロップダウンをはじめとする拡張性の高いウィジェット、国際化などを定めたDijit、フォームやテーブルなどの拡張機能を定めたDojoXで構成されている全部入りなライブラリになっています。

Dojoはさまざまなコンポーネントを備えており、それらのコンポーネントを拡張して使えることがメリットでしたが、

• コンポーネントを作る際のお作法や手数が多い
• アプリケーションが大きくなるほどコンポーネントの管理が難しくなる
• 大きなライブラリのため、読み込みに時間がかかる
• コーディング規約やフォーマッターがなく潜在的なバグが混入しやすい

などの問題を抱えていました。

特にAipoの中心的な機能であるスケジュールのブロック表示ではDojoのコンポーネントを多用しており、機能追加や改修の対応が複雑になってしまっていました。

そこでDojoからの移行先としていくつかのライブラリを選定しました。

Vue.jsにした決め手

候補としてReactやAngular2があがりましたが、Vue.jsにした決め手は次のとおりです。

部分的に導入が可能

今回の刷新で最も重要視したのは、既存ライブラリと併用が可能という点でした。

AipoのJavaScriptのコードはDojoベースに書かれており、それらを一度にすべて書き替えることは現実的ではありませんでした。カレンダーの機能を中心にコードを書き替えて、徐々に適用範囲を広げて最終的に全体に適用することを目指しました。

SPAとしてプロジェクトの最初からの導入を想定したフレームワークもありますが、Vue.jsは他のライブラリと組み合わせることができ、一部に適用する形で導入することが可能です。

学習コストの良さ

Dojoでは1つのコンポーネントを拡張する際に大きな手間がかかりました。またコンポーネント同士の依存関係も複雑になりコードを読み解くことが難しくなっていました。やりたいことをシンプルに実現できる学習効率の良さはそのまま開発効率にもつながるポイントです。

プロダクトの使い勝手を素早く改善していくためにはデザイナーだけである程度対応できる必要があります。デザイナーにとっても学習コストがおさえられる必要があります。

Vue.jsはHTML、JavaScript記述に近いため、スムーズに書き進めることができます。今までDojoで書いていたものを比較的簡単にVueに置き換えていくことができます。

SPA(Single Page Application)化は必要か？

今回は開発効率の改善を目的としてVue.jsの導入を行いました。SPA化を目的にVue.jsの導入を検討する方もいるかと思いますので、ここでウェブアプリケーションにおけるSPA化の必要性について考えてみたいと思います。

まず結論として、ウェブアプリケーションではSPA化したほうが良いと考えています。

Aipoはスケジュール管理SaaSのため、毎日アクセスする業務システムに近いサービスです。そのようなサービスにおいては以下の点でSPA化のメリットがあると考えています。

より良いユーザー体験を提供できる

Aipoではカレンダー以外にもチャットや掲示板といった機能を提供しています。カレンダーを見ながらチャットのやり取りをしたい、掲示板の内容をもとに予定を登録したい、などSPA化によって機能間の連携を強化した体験を提供できます。

スムーズな画面遷移を実現する

SPAでは一度読み込んだページは、その後画面全体が再描画されるストレスがなくなります。

ユーザーの利用状況を計測したところ、ユーザーは私たちが想定した以上にいろいろな画面を行き来して利用していることがわかりました。これらの画面遷移がスムーズに行われるようになれば、さらに機能を活用していただけると考えています。

ネイティブアプリの代わりとして提供できる

PWA(Progressive Web Apps)と組み合わせてプッシュ通知やオフラインキャッシュに対応することでネイティブアプリならではの機能をウェブアプリケーションで実現できます。AipoではElectronをベースにしたデスクトップアプリ、React Nativeをベースにしたスマホアプリの提供をしてきました。機能追加を行う際にはこれらの対応を踏まえて検討する必要がありますが、ウェブアプリケーションに開発を集中することで機能改善のスピードを上げていきたいと考えています。

まとめ

必要な部分からフロントエンドを刷新することで効率的に開発ができるようになりました。SPA化はブラウザー側の処理負担が増えるため、SSR(Server Side Rendering)も視野に入れつつ対応を進めていき、ユーザーにより良い体験を提供していきたいと思います。