「WebComponents」の記事 - Crieit

@ionic/angularがWebComponentsでテンプレートチェックを効かせるためにやっていることを調べる

2019-12-22T23:20:13+09:00

AngularでWebComponetsライブラリを使う時の基本

CustomElementsは基本的にはHTMLElementです（正確にはHTMLElementを継承して作ったもの）。customElements.define()することでグローバルに存在するようになるので、なんらかの方法でライブラリをインクルードすれば、あとはtemplateに書いておけば動きます。Angularから見れば、inputタグでもcustom-inputタグでも同じ話なわけです。

ただし、Angularのテンプレートチェックにはわかるけどは知らないやつだなあと怒られるので対策が必要です。

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],  ←templateチェックを無効にする
})
export class SomeModule {}

これで自由にHTML要素を書いてもよくなりますが、テンプレートの事前チェックが無効化されて実行時の存在判定に後送りされるため、他のタイポなども道連れで検出できなくなります。

 ←どこにも定義されてないがビルド時にエラーにならない

このようにAngularでWebComponetsを使うには誓約と制約があります。

@ionic/angularがやっていること

さて、ionicのv4はWebComponentsベースで書き直され、Angularだけでなくreactやvueでもできるようになりましたが、Angularは引き続きテンプレートチェックがビシッと効いています。

不思議なので中身を調べてみましょう。

なんと、同じ名称のAngularComponentが定義されていました❗️

ソースを読むとプロキシという扱いのようなので、これをプロキシコンポーネントと呼びます。
どうやらこいつがビルド時にAngularに差し出されているから、テンプレートの型チェックが効いてるようです。

を例に引っ張ってきました。現バージョンだと@ProxyCmpという新デコレータが作られていて、proxyMethodsやproxyInputsの記述は省力化されていますが、構造がわかりやすいので旧スタイルで掲載しています。

export declare interface IonInput extends StencilComponents<'IonInput'> {}
@Component({
  selector: 'ion-input',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '',
  inputs: [
    'accept',
    'autocapitalize',
    'autocomplete',
    'autocorrect',
    'autofocus',
    'clearInput',
    'clearOnEdit',
    'color',
    'debounce',
    'disabled',
    'inputmode',
    'max',
    'maxlength',
    'min',
    'minlength',
    'mode',
    'multiple',
    'name',
    'pattern',
    'placeholder',
    'readonly',
    'required',
    'size',
    'spellcheck',
    'step',
    'type',
    'value',
  ],
})
export class IonInput {
  ionInput!: EventEmitter;
  ionChange!: EventEmitter;
  ionBlur!: EventEmitter;
  ionFocus!: EventEmitter;
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
  }
}
proxyMethods(IonInput, ['setFocus', 'getInputElement']);
proxyInputs(IonInput, [
  'color',
  'mode',
  'accept',
  'autocapitalize',
  'autocomplete',
  'autocorrect',
  'autofocus',
  'clearInput',
  'clearOnEdit',
  'debounce',
  'disabled',
  'inputmode',
  'max',
  'maxlength',
  'min',
  'minlength',
  'multiple',
  'name',
  'pattern',
  'placeholder',
  'readonly',
  'required',
  'spellcheck',
  'step',
  'size',
  'type',
  'value',
]);

全体構造

通常のAngularComponentに則ったデコレータとclassです。proxyOutputs、proxyMethods、proxyInputsはionicが用意しているユーティリティ関数です。

生のWebComponentsに対してバインドする方法

接続

コンポーネントデコレータのselectorをcustomElementと同じ名称にしています。相当ハックだと思ったのですが、Angularのコンポーネントはカスタム要素としてHTMLにそのまま出力するので、selectorをHTMLに存在している要素名にするとHTMLではHTMLに存在している要素として解釈するわけなんですよね。もちろん_nghost-wke-c2のような属性は付きます。良い子は真似するな案件ですが、customElementに限らず標準HTML要素のinputとかspanとかでも同じことできます。

プロキシ

コンポーネントでは、elementRefから引っ張ったnativeElementの生DOM参照をクラスプロパティに保持しています。
proxyInputsとproxyMethodsは、そのクラスプロパティに保持したnativeElementを通して生のionic-inputに対して、HTML属性のget/setやionic内部に用意されているメソッドを生やしています。

export const proxyInputs = (Cmp: any, inputs: string[]) => {
  const Prototype = Cmp.prototype;
  inputs.forEach(item => {
    Object.defineProperty(Prototype, item, {
      get() {
        return this.el[item];
      },
      set(val: any) {
        this.z.runOutsideAngular(() => (this.el[item] = val));
      }
    });
  });
};

export const proxyMethods = (Cmp: any, methods: string[]) => {
  const Prototype = Cmp.prototype;
  methods.forEach(methodName => {
    Prototype[methodName] = function () {
      const args = arguments;
      return this.z.runOutsideAngular(() =>
        this.el[methodName].apply(this.el, args)
      );
    };
  });
};

proxyOutputsは、rxjsのfromEvent（中でaddEventListenerやremoveEventListenerしながらObservable化するやつ）を、コンポーネントの各EventEmitter型のプロパティにセットしているものです。コンポーネントclassに同名のクラスプロパティが用意されています。

export const proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
}

まとめ

プロキシするコンポーネントを用意することで、グローバルに存在しているWebComponentsライブラリでも、Angularのテンプレートの中でまるでAngularComponentかのように扱えるようになり、テンプレートの型チェックが効くようになっています。

VueでWeb Componentsミニゲーム認証サンプル有り

2018-07-25T06:25:34+09:00

Vue.jsでWeb Componentsが作れるようになっているようですね。VueがWeb Componentsっぽい、ということではなく、本物のWeb Componentsを生成できます。試しにちょっとしたミニゲームを含めたサンプルを作ってみましたので実際にどのように作成できるのかを解説してみます。

今回はvue-cli3で作成したプロジェクトで実装しています。

成果物

下記のようなものを作りました。これは何かというと、よくWebサイトのお問い合わせフォームなどに「私はロボットではありません」のようなチェックを入れないと送信できない機能がありますが、あれです。

画像の下にあるのは単なるSubmitボタンで、上部画像はよくある一般的な15パズルです。15パズルを解かないとSubmitボタンが有効にならないようになっています。

引き続き解説していきますが、記事の最後に動かせるGitHubページへのリンクがあるので読むのが面倒な方がいれば、僕は全然気にしませんのでそちらを見てしまってください（泣きながら）

普通のVue.jsのコンポーネントと何が違うの？

普通のVue.jsのコンポーネントであればHTMLは下記のようになっていると思います。

id="app"のdivでVueコンポーネントを動作させる形ですね。

これと違って、Web Componentsは自分で独自タグを定義するものなので、このdivが不要になります。

どうやるの？

今はもうVueに@vue/web-component-wrapperというものが含まれているため、基本的にはそれを使うだけです。vue-cliを使う前提で作られているようですが、直接webpackでも可能なようです。

vuejs/vue-web-component-wrapper: Wrap a Vue component as a web component / custom element.

通常Vueを起動する際はVueのインスタンスを作成すると思いますがその作業は不要で、代わりに上記でWeb Componentsを生成してそれを登録するだけになります。

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import PuzzleButton from './components/PuzzleButton.vue?shadow'

window.customElements.define('puzzle-button', wrap(Vue, PuzzleButton));

これだけでpuzzle-buttonタグが使えるようになります。

通常のVue.jsによる開発と違う点

いくつかちょっと通常のVue.jsによる開発方法とは違う点があるため、解説してきます。

プロパティの型

Vue.jsのコンポーネントの場合、プロパティに型が指定されている場合は下記のようにしてbindする必要があります。

上記のような感じで、valueがNumberの場合はbindして直接数値を指定してあげる必要があります。ただ、Web CompoentsはVue.jsの構文とは関係がないため、コロンを付けてbindすることはできません。普通に属性を指定するだけになります。

前述した@vue/web-component-wrapperのREADMEにも書かれていますが、ちゃんとプロパティの定義に型が指定されていれば、コンポーネント内ではその型の値として初期化され使用することができるようになっています。

CSSの定義

Vue.jsではvueファイル内にてCSSを定義することができます。ところが、Web ComponentsにはShadow DOMという概念があり、これによってWeb ComponentsのDOM内を大元の呼び出し元のDOMと隔離することができるようになっています。これによりscopedの有無に関わらず、vueファイル内で定義したCSSが反映されなくなってしまいます。なぜかというとこのstyleタグが呼び出し元のHTMLのhead内に挿入されるためです。

そのため、下記のような設定により、styleタグがShadow DOMの内側に挿入されるように設定して上げる必要があります。

（vue.config.jsというファイルを作成）

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.shadowMode = true;
          return options;
        });

    config.module
      .rule('css')
      .oneOf('vue')
      .use('vue-style-loader')
        .tap(options => {
          options.shadowMode = true;
          return options;
        });
  }
}

serveしてホットロードする時は問題ないのですが、productionビルドの時はちょっとCSSのビルド方法が変わってしまうためエラーになります。そのため、VUE_CLI_CSS_SHADOW_MODEという環境変数をtrueにしてビルドする必要があります。

僕はcross-envを使ったので、同じようにするのであればまずcross-envをインストールします。

yarn add cross-env

あとはpackage.jsonのbuildのscriptsにcross-envの記述を追加します。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "cross-env VUE_CLI_CSS_SHADOW_MODE=true vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

これでbuildも正常にできるようになります。

成果物

ソースはGitHubに公開してあります。

vue-web-components-sample - GitHub

動かせるサンプルもあります。polyfillは入れていませんので、対応しているブラウザで試す必要があります。僕はChromeとかAndroidとかでは確認できました。

動かせるサンプル

まとめ

Web Componentsは細かいパーツとか機能を使い回すのに非常に適していると思いました。ビルドして配布すれば、誰でも読み込んでタグを設定するだけでその機能を利用することができます。

よくWebサイトの制作でjQueryを読み込んで、jQueryのプラグインを読み込んで色々な機能を実装できますが、Web Componentsがどのブラウザでも標準的に動作するようになれば、こういったものはすべてWeb Componentsに置き換えられていく可能性もありそうです。設置も非常に楽ですし、プロパティで自然に設定できるのでわざわざscriptを書かなくてもよく直感的ですし。

ちらっと調べたところ他にも色々とWeb Components開発のフレームワーク的なものはあるようですが、Vueは元々使える人が多いと思うのでそういう意味でも選択肢にあがる可能性は高そうな気がします。

あとはクローラがどう解析してくれるのか、Vuexのstoreで複数のコンポーネントにて共通のstateを使ったりできるのか（Web Componentsとしてのメリットとは矛盾していそうですが）、色々まだ試してみると面白そうです。