プロダクト開発の現場で使ったVue.js

こんにちは、Viibarエンジニアチームの黒木です。
先日、クリエイティブ業務効率化ツールVyncの開発が一通り完了し、間もなくリリースとなります。Vyncはもともと社内ツールだった既存プロダクトを社外でも利用できるように改良した新しいプロダクトです。社外利用にあたってアーキテクチャも見直し、その中の一つとしてフロントエンドの実装にVue.jsを採用することになりました。

この記事では、実際にプロダクト開発の現場で使ったVue.jsの導入理由と、導入してみて実際どのような利点があったかについて述べています。

Vue.jsとは

Vue.jsドキュメントより引用 (https://jp.vuejs.org/v2/guide/index.html)

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合したりすることはとても簡単です。一方、モダンなツールやサポートライブラリと併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。


導入理由

仮想DOM、コンポーネント指向で実装できるライブラリはいくつか選択肢がありますが、Vyncでは以下の点を長所と見てVue.jsに決定しました。

少しずつ導入することができる

Vue.jsでは、本当に適用したい一部分だけをVue.jsを使って実装する方法が用意されています。実装開始当初は基本的にはRailsのViewで実装し、適所ごとに少しずつVue.jsを導入していく方針でした。実際にそれはうまくいきましたが、プロダクトの開発が進み複雑度が増していくにつれ、自然にVuexの利用に至りました。Vuexは、Vue.jsで利用できるFlux、Reduxの影響を受けた状態管理ライブラリです。Vue.jsはVueの描画の責務を持ち、Vuexは状態管理とデータフローの責務を持ちます。

日本語ドキュメントが充実していた

Vue.jsのドキュメントはほとんどすべてのページが日本語化されています。実装していて壁にぶつかった時、ほとんどの問題はドキュメントを見ることで解決することができました。また、Vue.jsの日本語ドキュメントを共通認識として実装相談をすることができたので、メンバー間でライブラリの解釈に齟齬が出ることもありませんでした。

Railsとの共存ができそうだった

既存のプロダクトがRailsで実装されており、フロントエンドにはCoffeeScriptを利用しています。フロントエンドをES2015以降の記法に刷新する案もでましたが、バックエンドのアーキテクチャの刷新も予定していたこともあり、開発期間との兼ね合いから今回はCoffeeScriptのままで実装することなりました。Vue.jsであればピュアなオブジェクトで実装でき、ES2015記法に依存した記法も少なかったのでCoffeeScriptでも導入ハードルが低いと考えました。また、Vue.jsはx-templateを利用することでSlimで記述できる点も魅力的でした。Railsのヘルパーメソッドもそのまま利用することができます。

Vue.jsを導入してみて

実際にVue.jsを導入してみると、その強力さを実感する場面が多くありました。

アプリケーションの複雑さに応じてスケールできた

最初はVueインスタンスのみで作り始めました。x-templateを用いて、RailsのViewにtemplateを記述し、必要な値はRailsからtemplateに直接渡していました。その後、UIが複雑化してきたため、componentに分け始めました。componentの親子間以外でも連携する値が増え、storeが欲しくなりVuexを導入しました。Vuexでmutationを利用してstoreを更新していましたが、非同期での通信処理やタイミングを制御したいケースが発生したため、actionを利用するようになりました。

このように、アプリケーションがシンプルなうちはシンプルな方法で作ることができ、アプリケーションのスケールに伴って複雑性が増して来れば、違うアプローチが用意されています。最初から過度な最適化を行わずに済み、適切なタイミングでstoreでのstate管理に移行することができます。

算出プロパティが強力

Vue.jsを利用していて便利だと感じていたのが、Vuexのgettersやcomponentのcomputedプロパティなどの算出プロパティが充実していることです。算出プロパティは、stateやpropsから割り出すことができる値を算出し、templateやmethodで利用できる仕組みです。もちろん、propsやstateが更新されると自動的に算出プロパティの値も再計算され、更新されます。これによって、いたずらにstateが肥大化したり、propsが増えたりすることがなく、component内で必要な値はcomponent内で算出して利用する事ができました。各componentで算出ロジックを閉じることができるので、外から受け取る値を最小限にしつつ、componentを疎に保つことができます。

シンプルなデベロッパーツール

Vue.jsにはデベロッパーツールも用意されています。各componentのstateや、トリガーされたイベントを補足できます。stateはシンプルなツリーで表現されるので、簡単に詳細を追うことができます

導入に当たっての工夫

新しいライブラリを導入しても、その学習を個々人で進めるのは効率が悪いと感じていたので、知識を共有しながら開発を進めました。

探った経験を共有する

週に一度「あーだこーだVue.js」というVue.jsに対して思っていることを色々言いあう場を設けました。Vyncの実装や過去の実装経験などで得た経験をシェアし、メンバー全体の経験値を底上げすることが狙いです。
これはうまく作用して、僕が過去に仮想DOMやFluxについて一通り勉強したことがあったのでその知識を共有したり、リードエンジニアがプロトタイプ実装時にハマったところをシェアしてくれたので、同じところでハマらずに済みました。
また、疑問点やわからないことの共有も積極的に行いました。actionとmutationの違いなど、初見ではどう使い分けるべきかわからないような機能を、プルリクエストを交えて説明してもらうことで理解が深まりました。メンバー全員が手探りしつつ実装方法を探っていたのですが、手探りした知識を無駄にせず、全員の経験として共有できたことで、レビュー上のコミュニケーションも円滑になり、ソースコードの品質アップに繋がりました。

まとめ

Vyncは既存プロダクトを元に実装され、その機能を引き継いでいる箇所もあるのですが、Vue.jsで実装したことによってソースコードの行数は圧倒的に少なくなり、状態やイベントも見通しよく管理されているため、安心感があります。まだまだ生まれたばかりのプロダクトなので、これからフロントエンドの基盤も整備し、よりモダンな環境に近づけていきたいと思います。


ViibarではWebエンジニアを募集しています!
ぜひ一度、話を聞きにきてみませんか?
https://www.wantedly.com/projects/155455

株式会社Viibar's job postings
8 Likes
8 Likes

Weekly ranking

Show other rankings