Web Components と Vue.js ゆきしば SHIBASAKA Hiroyuki v‒kansai Vue.js/Nuxt.js meetup #7 22nd June 2019

ゆきしば SHIBASAKA Hiroyuki 株式会社エクザム フロントエンドエンジニア　＠京都 受託でWEBサイトの構築と、業務アプリの開発 数年前までWebデザイナ（コーダー寄り）でした AtCoder始めました（まだ茶色です） Web Components と Vue.js

Web Components と Vue.js ゆきしば SHIBASAKA Hiroyuki 株式会社エクザム フロントエンドエンジニア　＠京都 受託でWEBサイトの構築と、業務アプリの開発 数年前までWebデザイナ（コーダー寄り）でした AtCoder始めました（まだ茶色です）

Web Components と Vue.js 株式会社エクザム フロントエンドエンジニア　＠京都 受託でWEBサイトの構築と、業務アプリの開発 数年前までWebデザイナ（コーダー寄り）でした AtCoder始めました（まだ茶色です） で使える、Vue.jsのお話。

Web Components と Vue.js Web Components について Vue.js における、ふたつのライブラリ Webサイトでの利用 目次

Web Components と Vue.js Web Components について Web Components は、再利用可能なカスタム要素を作成し、 ウェブアプリの中で利用するための、一連のテクノロジーです。 コードの他の部分から独立した、カプセル化された機能を使って実現します。 MDN Web docs ‒ https://developer.mozilla.org/ja/docs/Web/Web̲Components

Web Components と Vue.js Web Components について Web Components は、再利用可能なカスタム要素を作成し、 ウェブアプリの中で利用するための、一連のテクノロジーです。 コードの他の部分から独立した、カプセル化された機能を使って実現します。

Web Components と Vue.js Web Components について …

Web Components と Vue.js Web Components について Custom Elements HTML CSS JavaScript HTML Template / Shadow DOM …

Web Components と Vue.js Web Components について Vue.js のコンポーネントみたいなもの！ HTML CSS JavaScript …

Web Components と Vue.js Vue.js における、ふたつのライブラリ Vue Custom Element こっちを使っています。 公式。Web標準の「カスタムエレメントレジストリ」でコンポーネントを登録。 位置づけ的には後継なので、こちらに移行することになりそう。 IE9以降やEdgeにかんたん対応！ @vue/web‒component‒wrapper https://github.com/karol‒f/vue‒custom‒element https://github.com/vuejs/vue‒web‒component‒wrapper

Web Components と Vue.js Vue.js における、ふたつのライブラリ Vue Custom Element デフォルトで shadow DOM を使わないので、サイトのスタイルをそのまま適用できる。 もちろんshadowDOMも使える。 コンポーネントは shadow DOM として登録される。 Vue Custom Element からの移行時は、shadow DOM 前提の設計になってるか要確認。 @vue/web‒component‒wrapper https://github.com/karol‒f/vue‒custom‒element https://github.com/vuejs/vue‒web‒component‒wrapper

Web Components と Vue.js Vue.js における、ふたつのライブラリ Vue Custom Element import vueCustomElement from ‘vue‒custom‒element’; import CustomElement from ‘customElement.vue’; Vue.use(vueCustomElement); Vue.customElement(‘v‒custom‒element’, customElement); import wrap from ‘@vue/web‒component‒wrapper’ const CustomElement = wrap(Vue, () => import(̀customElement.vuè)) window.customElements.define(‘v‒custom‒element’, CustomElement) @vue/web‒component‒wrapper

Web Components と Vue.js Vue.js における、ふたつのライブラリ Vue Custom Element import vueCustomElement from ‘vue‒custom‒element’; import CustomElement from ‘customElement.vue’; Vue.use(vueCustomElement); Vue.customElement(‘v‒custom‒element’, customElement); import wrap from ‘@vue/web‒component‒wrapper’ const CustomElement = wrap(Vue, () => import(̀customElement.vuè)) window.customElements.define(‘v‒custom‒element’, CustomElement) @vue/web‒component‒wrapper 入力形式（Vue.js コンポーネント）と 出力形式（Custom Elements）が同じなので、 基本的にはそのまま移行できる。

Web Components と Vue.js Webサイトでの利用 ‒ コンテンツのソースはシンプルなまま、JSで機能を付加したい。 ‒ jQueryで書いていたようなところで、便利に使える。 ‒ 依存関係がコンテンツ上のカスタム要素と1対1なので、管理がしやすい。 ‒ 弊社内ではここ1年くらい Vue Custom Element を使用してきた。

Web Components と Vue.js Webサイトでの利用 イラストマップ上にピンを立てて、クリックしたら写真を開きたい 同時にピンを立てた場所の一覧を表示し、そこからも写真を開きたい CMSの記事内で使うので、WYSIWYGエディタ作業で項目を増減したい たとえば、こんな依頼がありました

Web Components と Vue.js Webサイトでの利用 イラストマップ上にピンを立てて、クリックしたら写真を開きたい 同時にピンを立てた場所の一覧を表示し、そこからも写真を開きたい CMSの記事内で使うので、WYSIWYGエディタ作業で項目を増減したい たとえば、こんな依頼がありました デモを用意しました！ デモを用意しました！ https://yukishiba.github.io/demo‑vue‑custom‑element/dest/ https://yukishiba.github.io/demo‑vue‑custom‑element/dest/ あとでURL共有します！ あとでURL共有します！ デモを用意しました！ https://yukishiba.github.io/demo‑vue‑custom‑element/dest/ （あとでURL共有します！）

Web Components と Vue.js 今後 Web Components とどう付き合っていくか 小規模サイト、既存サイトへの導入も簡単。 CMS内のコンテンツにも使える。 Vue.js の単一ファイルコンポーネントを作る感覚ですぐ作れる。

Web Components と Vue.js