EC事業部でエンジニアをしているがっちゃんといいます。より良いショップ運営体験を提供するために、これまでモダンなフロントエンド開発環境の整備が遅れていた「管理画面」に薄くVue.jsを導入している話をします。
管理画面の現状と解決したいこと
カラーミーショップでは、ショップの運営や管理をサポートするための「管理画面」を提供しています。商品を追加したり、ショップのデザインをしたり、カラーミーショップの契約を管理したり…と、多岐にわたる機能があります。 ショップオーナーさまに快適にショップ運営を行っていただくために日々改善を行っている、カラーミーショップの中では歴史の長いプロダクトの一つです。
管理画面の開発の様子は概ね以下のとおりです。
- コードのベースはPHPで、画面の主なレンダリングはPHPのテンプレートエンジンによって行われている
- 開発に関係するチームが多く、様々なエンジニア・デザイナーがコミットしている
- 一部JavaScriptで記述されたUI関連のコードもあるが、JavaScriptフレームワークは採用していない
ショップ運営の体験をさらに良くするために、これからの管理画面にはリッチなUIの提供も求められていますが、モダンなフロントエンド開発を行う環境を整えられていませんでした。CSS、DOM、JavaScriptがそれぞれ独立して存在する上にコードベースが大きいので、開発速度の低下や開発難易度の増加といった問題を抱えていました。 そこで、今回はVue.jsを活用したWebComponentライブラリを開発する環境を整え、ショップの管理画面でリッチなUIを以前より高速に開発可能にしました。
Vue CLI のWeb Component Buildを活用したUIコンポーネントの開発
カラーミーショップでは、カラーミーショップ アプリストア や、カラーミーショップ デベロッパー で、Vue.jsを採用しています。このような背景から比較的多くのエンジニアやデザイナーがVue.jsによる実装経験がありました。 管理画面は多くのチームがコーディングに関わるので、事業部内にすでに技術的な下地のあるVue.jsを採用することにしました。
はじめに触れましたが、管理画面は多くの機能を提供しており、これらすべての画面をJavaScriptフレームワークに載せることは開発工数の観点から現実的ではありません。そこで、必要なUIコンポーネントだけVue.jsを用いて開発できるように、Vue CLIのWeb Component Build機能を活用することにしました。
たとえばドキュメントに記載の通り、以下のようなコマンドを実行すると、my-element.vue をWebComponentでラップしたものが成果物として得られます。
vue-cli-service build --target wc --name my-element my-element.vue
さらに、Async Web Componentでビルドすると、指定ディレクトリ以下のすべてのVueファイルをターゲットに、エントリポイントとなるファイル及びいくつかの分割されたファイルが成果物として得られます。
vue-cli-service build --target wc-async --name colorme 'src/components/*.vue'
このようなディレクトリ構成のとき
src
├── assets
└── components
├── Button.vue
├── Label.vue
└── Container.vue
以下のようなファイルが生成されます。エントリポイントとなるファイル（この場合 dist/colorme.min.js）を読み込むだけで、ビルドしたWebComponentを使うことができます（スタイルはShadow DOMの中に展開されるので、CSSの読み込みを気にする必要もありません）。
dist
├── colorme.0.js
├── colorme.0.min.js
├── colorme.1.js
├── colorme.1.min.js
├── colorme.2.js
├── colorme.2.min.js
├── colorme.3.js
├── colorme.3.min.js
├── colorme.js
└── colorme.min.js
生成された colorme.min.js を読み込むことで、標準のHTMLタグと同様に、開発したUIコンポーネントを設置できます。利用するWebComponentに対応する分割ファイルを必要に応じてFetchしてくれるので、バンドルサイズをさほど気にせずに使うことができます。
<!-- Button.vue は colorme-button として提供される -->
<colorme-button></colorme-button>
<!-- ビルドした成果物の読み込み -->
<script src="/dist/colorme.min.js"></script>
Vue CLIの導入だけでこの仕組みを利用できるので、とてもお手軽で便利です。
ビルドしたUIコンポーネントは、HTMLタグを設置するだけで使えるので、コンポーネントを利用するだけならJavaScriptの知識がなくてもコーディングを行うことができます。この点は、JavaScriptのコーディングに明るくないエンジニア・デザイナが容易にUIコンポーネントを設置できるという点で利点になります。
いくつかの注意事項もあります。記事の執筆時点(2021/03/23現在)ではWeb Component BuildはVue 3をサポートしていません。 また、Internet ExplorerはWeb Componentに非対応です（公式ドキュメントにも記載があります）。少なくともVue CLIのAsync Web Componentでビルドするときは、Polyfillを導入してもコンポーネントの読み込みに失敗します。
カラーミーショップの管理画面には一定数のInternet Explorerからのアクセスがありましたが、今後新しい技術を導入してより良い管理画面を提供するために、2021/02/25 に Internet Explorerのサポートを終了しました。（この対応のおかげで開発がずっと行いやすくなりました。Internet Explorerサポートのクローズ対応メンバーに感謝〜）
まとめ
WebComponentを活用してVue.jsでUIコンポーネントをコーディングできる環境を整えました。カラーミーショップの管理画面のように、比較的規模の大きく、かつモダンなフロントエンド開発環境を導入できていなかったプロダクトにも導入しやすい手法を採用しました。プロダクトをまるごとJavaScriptフレームワークに載せなくても、それなりに良い開発体験を提供してくれそうです。
今後は、構築した開発環境に対するフィードバックを得た上で、「開発に関係するチームが多い」ことに起因する様々な問題（コンポーネントの再利用や、管理のしやすいテスト環境の導入など）について解決していき、持続して開発可能な環境の構築を進めていきたいと考えています。
管理画面のUIをより良くしていくことで、ショップオーナーさまがショップの運営をなめらかに、気持ちよく行える環境を目指していきます。