Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for azuki azuki
February 17, 2022
85

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

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

Avatar for azuki

azuki

February 17, 2022
Tweet

Transcript

  1. 18 どうしたのか vue-cli-service build \ -–name ‘colorme’ \ -—inline-vue \

    -–target wc-async \ ‘src/components/**/*.vue’ 実際に使ってみる 例えば以下の構成でコンポーネントを作る src ├── assets └── components ├── Button.vue ├── Label.vue └── Container.vue 以下を実行する
  2. 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
  3. 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>
  4. 25 どうしたのか Web Component Buildを使うことで部分的に手軽に Vue.jsを導入することができた! • 単一ファイルコンポーネントにより DOM, JS,

    CSS周りの記述が統一され秩序が生 まれた • Shadow DOMにより既存の画面にコンポーネントを設置する場合に、 CSSの影響を 気にしなくて良くなった • コンポーネントで共通化出来ることで、抽象的なコンポーネントが使い回せて画面の 改修コストが低くなった
  5. 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がない様に適切なコーディングする必要がある ◦ コードレビューで品質を担保している