PHP+jQueryのカラーミーショップ管理画面にVueを導入した際の課題と工夫

【iCARE Dev Meetup #30】歴戦の企業が乗り越えてきたリプレイスの真実
PHP+jQueryのカラーミーショップ管理画面にVueを導入した際の課題と工夫
https://icare.connpass.com/event/237019/

Transcript

1. PHP+jQueryのカラーミーショップ 管理画面にVue.jsを導入した際の 課題と工夫 小倉 和人 / GMO PEPABO inc. 2022.02.16 iCARE Dev Meetup #30 1
2. 2 自己紹介 GMOペパボ株式会社 EC事業部 2018年 中途入社 あずき RubyでのWEBアプリケーション開発に長く携わってお り、現在はカラーミーショップのサーバサイドのエンジニ アとして活躍。 • Ruby、PHPなどサーバサイド • ゲームが好き（格闘ゲーム、FPSなど） • Twitter : @nyantech0207
3. 3 アジェンダ 1. カラーミーショップについて 2. 困っていたこと 3. どうしたのか 4. まとめ
4. 1. カラーミーショップについて 4
5. セクションタイトル カラーミーショップ URL: https://shop-pro.jp • 国内最大級のネットショップ作成サービス • フリープランなら初期費用・月額費用０円 • 登録時間はたった3分！ • 2005年2月から開始したサービス 5
6. セクションタイトル 管理画面 ショップオーナーさまが商品登録、決済方法など ネットショップに必要な設定を行います。 6
7. 7 カラーミーショップについて 管理画面の構成について • サーバサイドはPHP • 画面のレンダリングはPHPのテンプレートエンジン • JSはjQueryやVanillaで書かれることが多い
8. 8 困っていたこと “ ショップオーナーさまが最小限の 労力で最大限のリターンを見込め るようにする” 私の所属するチームの達成したいこと
9. 2. 困っていたこと 9
10. 10 困っていたこと 管理画面をより良い物にしていく上で、統一されたデザインやリッチな UIを提供していきたい。 しかし多くのエンジニアやデザイナが関わっている中で、 UIコンポーネントを実装する上でのルー ルが曖昧だった為、秩序のない環境となってしまっていた。 • JSがインライン・ファイルに分離するなど人により実装方法が異なる • JSファイルやCSSファイルを読みこむ条件分岐がテンプレートに多く書かれており、 記述箇所も統一されていない • CSSの命名規則などが曖昧で、影響範囲もわかりにくい
11. 11 困っていたこと 秩序がないことによる辛いポイント • UIコンポーネントを実装、再利用する際に、必要な JS、CSSを把握し、対象のペー ジへの読み込み状況を気にする必要がある • CSSやJSファイルの読み込みによる他の UIコンポーネントへの影響を気にする必 要がある
12. 12 困っていたこと “ フレームワーク入れて、この環境に 秩序をもたらすぞ”
13. 13 困っていたこと 管理画面は既に多くの機能を提供しており、すべてをフレームワークに乗せ換 えることは工数的に厳しい
14. 3. どうしたのか 14
15. 15 どうしたのか 要件を整理する • UIコンポーネントを実装する上でDOM、JS、CSSの書き方を統一できるフレー ムワークを導入したい • CSSやJSの依存関係を解決したい • フレームワークを利用する場合は、全てを乗せ替えるのではなく、段階的に導入 していけるものを選定したい
16. どうしたのか Vue CLIのWeb Component Build機能 16 https://cli.vuejs.org/guide/build-targets.html#web-component Vue.jsのコンポーネントをラップしてWebコンポーネントとして登録する単一の JSファイル作成できる。 概要
17. 17 困っていたこと なぜVue.jsなのか？ • プログレッシブフレームワークであり、段階的に必要な部分だけ導入していけるフ レームワークをうたっており、要件とマッチしている • 事業部内にVue.jsのコミュニティ精通しているメンバーがおり、問題がおきた際に アップストリームへ還元し、コミュニティに貢献できる • 事業部内にVue.jsの実装経験のあるエンジニア・デザイナが多くいたこと
18. 18 どうしたのか vue-cli-service build \ -–name ‘colorme’ \ -—inline-vue \ -–target wc-async \ ‘src/components/**/*.vue’ 実際に使ってみる 例えば以下の構成でコンポーネントを作る src ├── assets └── components ├── Button.vue ├── Label.vue └── Container.vue 以下を実行する
19. 19 どうしたのか 以下のようなファイルが生成される 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
20. 20 どうしたのか ビルド時に-–target wc-async のオプションを付けることで jsファイルはcolorme.0.js、 colorme.1.jsの様に分割してビルドされる。 colorme.min.jsは分割ファイルを必要に応じて Fetchしてくれる為、コンポーネントの数が増え てもバンドルサイズをさほど気にせずに使うことができる。
21. 21 どうしたのか 生成されたjsファイルをscriptタグで読みこむことで、標準の HTMLタグと同様にVue.jsで作ら れたコンポーネントを設置することができる。 <!-- ビルドした成果物の読み込み --> <script src="/dist/colorme.min.js"></script> <!-- Button.vue は colorme-button として提供される --> <colorme-button></colorme-button>
22. どうしたのか 22 実際の実装例を紹介します。 口座情報を入力するフォームを想定してください。
23. どうしたのか 23 Web Component Build使うことで、既存のページに対 しても、部分的にVue.js使ったWebコンポーネントを設 置することができる
24. 24 どうしたのか Vue.jsの単一ファイルコンポーネントにより、 DOM, CSS, JSも統一される <template> <!-- ここにHTMLを書く –> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ }) </script> <style scoped lang="scss"> </style>
25. 25 どうしたのか Web Component Buildを使うことで部分的に手軽に Vue.jsを導入することができた！ • 単一ファイルコンポーネントにより DOM, JS, CSS周りの記述が統一され秩序が生 まれた • Shadow DOMにより既存の画面にコンポーネントを設置する場合に、 CSSの影響を 気にしなくて良くなった • コンポーネントで共通化出来ることで、抽象的なコンポーネントが使い回せて画面の 改修コストが低くなった
26. どうしたのか ちょっと苦しいポイントもある・・・ 26
27. 27 どうしたのか 段階的に移行している状態な事もあり、値を取得する APIの環境が確立できていない。 その為、HTML属性で指定することで、コンポーネントに動的な値を引き渡している。 <colorme-button url="{$url}"></colorme-button>
28. 28 どうしたのか 連想配列の様な数が不定の値を渡すときは Objectを JSON.stringify した値を属性値として 渡し、Vue.js側で JSON.parse して利用する使い方をしている。 <colorme-button id="hoge"></colorme-button> <script type="text/javascript"> var hogeObject = {$hogeJson}; var buttonElement = document.getElementById("hoge"); buttonElement.setAttribute('params', JSON.stringify(hogeObject)); </script> • JavaScriptのObjectに変換できるような連想配列の文字列をサーバサイドで組み立てる必要 がある ◦ 現状はシンプルな連想配列を json_encode した値を利用しているので問題ない • XSSがない様に適切なコーディングする必要がある ◦ コードレビューで品質を担保している
29. 4. まとめ 29
30. 30 まとめ “ Vue.jsを利用することでJS環境に 秩序が生まれた！”
31. 31 まとめ “ ショップオーナーさまがもっと最小 限の労力で最大限のリターンを見込 めるようにしていくぞ！”