WebComponents.kyoto Meetup #2 で「Web Components で社内 UI ライブラリを作っている話」について発表しました

フロントエンドエンジニアの jimbo です。

2018年3月4日、WebComponents.kyoto Meetup #2 にて「Web Components で社内 UI ライブラリを作っている話」というテーマで発表しました。

Web Components を実戦投入した事例は、2018年に入ってポツポツと出てきた印象ですが、まだそれほど多くはないと思います。Kaizen Platform でも 2017年12月から社内向け UI ライブラリの開発に Web Components が使えないかという話がチーム内であがり、いろいろと可能性を探りながらプロジェクトを進めている最中です。

今回の発表では、

プロジェクトの概要紹介
なぜ Web Components を採用しようと思ったのか
実装時に出くわした問題点と解決方法

などについて紹介しました。少しでも知見を共有できたらということで発表させてもらいましたが、発表後に「ちょうどこれから create-react-app を使ったアプリで Web Components を試そうとしていたので助かりました」という感想をいただけてありがたかったです。

また、発表後の質疑応答では、

customElements.define() を Custom Elements の内部ではなく利用する側で呼んでいる理由は？

という質問がありました。

import * as ReactDOM from 'react-dom';
import { KzAvatar } from '@kaizenplatform/kaizen-app-elements';

// Register custom elements
window.customElements.define('kz-app-toolbar', KzAppToolbar);
window.customElements.define('kz-app-title', KzAppTitle);
window.customElements.define('kz-avatar', KzAvatar);

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <kz-app-toolbar>
      <kz-app-title version={this.version} release-stage={this.releaseStage}>
        {this.appName}
      </kz-app-title>
    </kz-app-toolbar>
    document.getElementById('root') as HTMLElement,
  );
});

確かに Custom Elements 内部で customeElements.define() を呼んでいるケースはよく見かけます。当初はそのように実装していたのですが、途中で利用側で呼ぶように変更しました。これは、

Custom Elements を登録するタイミングは、利用側でコントロールできたほうがよい
タグ名も利用側がコントロールできたほうがよい

という理由からです。様々なフレームワーク、ライブラリでの利用を前提にすると、このほうが使い勝手がよいのではないかと考えています。

プロジェクト自体はこれからというところなので、恐らくまだまだトラップが待ち受けているような気がしますが、それも楽しみながら進めていこうと思います。