VisasQ Dev Blog

ビザスク開発ブログ

ビザスクが Vue Composition API を導入するモチベーション

技術記事 組織・文化

ビザスクlite事業部フロントエンドエンジニアの小柳(@mascii_k)です。

弊社では Vue.js 2.6 を利用していますが、AngularJS や jQuery などで実装された古いフロントエンド実装を Vue.js でリプレイスしている状況です。
そんな状況の中、ビザスクlite の「事前相談画面」のデザインリニューアルと同時にフロントエンド実装もリプレイスすることとなり、フロントエンド設計・実装を担当することになりました。
今回は「事前相談画面」のリプレイスで Vue Composition API を導入するに至った経緯やモチベーションを紹介いたします。

デザインリニューアルの経緯について、デザイナーの長岡の記事(UI/UX改善！事前相談リニューアルの歩み)もぜひご覧ください。

事前相談画面について

事前相談画面とは、ビザスクのアドバイザーと依頼者がスポットコンサルを実施する前にメッセージを送ったり、面談日時の設定や決済等を行うページのことです。

この画面はレスポンシブデザインによる画面設計が難しいため、PC版/SP版を別実装(アダプティブデザイン)としています。
また、ユーザー属性のパターンが3つ(セルフマッチング形式依頼者/セルフマッチング形式アドバイザー/フルサポート形式アドバイザー)あり、見た目はよく似ていますがそれぞれに機能的な差異があります。

事前相談画面の全パターン

つまり、ユーザー属性とデバイス種別の掛け算で6パターンの画面が存在し、UIコンポーネントやロジック等の適切な共通化が必要とされていました。

解決したい問題

以前の事前相談画面には以下のような問題がありました:

  • バックエンドのテンプレートエンジンに依存した実装となっており、バックエンドとフロントエンドが密結合していてメンテナンスしづらい状況だった
  • UIのコンポーネント化がされておらず、デザイン修正がしづらい状況だった
  • PC版/SP版でフロントエンドのロジックが共通化されていない箇所が多かった

上記の1, 2番目の問題は Vue.js で適切にリプレイスすることで解決できますが、3番目の問題も同時に解決する必要がありました。

PC版/SP版でロジックを共通化するには？

Figma で作成された新しい事前相談画面のデザインを眺めていると、「PC版/SP版でコンポーネントの単位がほとんど同じであり、レイアウトやデザインが多少異なるものの機能が同等なコンポーネントをそれぞれに用意する必要がある」ということが判明しました。

このことから、PC版/SP版で対になるコンポーネントのロジックは Vue Composition API を用いて関数として切り出すことで、共通化できるという結論に至りました。
(なお、ミックスインでも同様のことが実現可能かもしれませんが、ミックスインはロジックを変更するためのパラメータを渡せなかったりプロパティ名がコンフリクトしやすいなど使い勝手が良くないため、選択肢から外れました)

計画的に実装を進める

事前相談画面のリニューアルプロジェクトにおいては、まずPC版をリリースし、続いてSP版をリリースすることになっていました。

PC版/SP版を同時にはリリースしないものの、上記の結論に基づいて以下のように実装をしました:

  • PC版の実装時、ロジックは .vue ファイルではなく同名の .ts ファイルに関数(useHoge())として書いておく
  • SP版の実装時、PC版に対応するコンポーネントがある場合はPC版の .vue ファイルをコピーし、SP版向けにマークアップとスタイルを修正する

PC版(左)コンポーネントとSP版(右)コンポーネントの間でロジックを共通化

provide/inject によるストアパターン

ここまでPC版/SP版のロジックを共通化することにモチベーションがあったことを紹介しましたが、Vue Composition API が提供する provide 関数 / inject 関数を利用したストアパターンによって、シンプルかつ TypeScript の型の恩恵があるストアを実装できることもメリットとして挙げられます。

本記事ではストアパターンの紹介はしませんが、これによって props/emits によるコンポーネント間のデータのバケツリレーを気にすることがなくなり、開発体験が大変良いものとなりました。

導入効果

弊社では、今までは「PC版の開発に3ヶ月かかるのならば、SP版の開発も3ヶ月かかるだろう」という感じで工数を見積もることが多かったです。

ですが、今回紹介した方法を取り入れることで、事前相談画面PC版リリース日(2020/06/24)とSP版のリリース日(2020/07/28)のスパンを約1ヶ月に短縮することができました。

まとめ

今回はビザスクにおける Vue Composition API を導入するモチベーションを2つ紹介いたしました:

  • アダプティブデザインで設計しているケースで、PC版/SP版のロジックを共通化したい
  • provide 関数 / inject 関数を利用したストアパターンを利用することで、型の恩恵を受けつつデータのバケツリレーを無くしたい

Vue Composition API を導入すると設計の自由度が高まりますが、開発現場や状況によっては「導入したが何もメリットを得られなかった」ということも発生し得るかと思っています。何らかのモチベーションを持った上で Vue Composition API を導入していただけると良いかと思います。