Web Componentsを使いやすくするためのライブラリまとめ

まだ今ひとつ流行りきらないですが、Web Componentsは今後のWebにおいて広まっていく技術の一つです。コンポーネント化することで再利用性を高めるのはもちろん、各コンポーネントの独立性が高くなることでデザインの影響範囲を限定したり、公開されているWeb Componentsを利用しやすくなります。

今回はWeb Componentsを使いやすくするためのライブラリを紹介します。

Stencil

StencilはIonicによって開発されています。TypeScriptとJSXを組み合わせているのが特徴になります。ブラウザはIE11からサポートしています。以下のようなTypeScriptを書きます。

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-first-component',
  styleUrl: 'my-first-component.scss'
})
export class MyComponent {

  // Indicate that name should be a public property on the component
  @Prop() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

そして利用する際のタグは以下のようになります。

<my-first-component name="Max"></my-first-component>

Stencil

MUI

Googleのマテリアルデザインガイドラインに沿ったCSSフレームワークです。React/Angular/Web Componentsに対応しています。例えばボタンは以下のようなタグになります。

<mui-btn color="primary">Button</mui-btn>

MUI – Material Design WebComponents Framework

Bosonic Web Component

ダイアログやドロップダウン、タブ、ツールチップなど様々なUIコンポーネントをWeb Componentsとして提供しています。実用性の高いコンポーネント集となっています。

Bosonic Web Component

Polymer Project

Polymerを使うとShadow DOMやマテリアルデザインを使ったWeb Componentsを手軽に使えるようになります。 Polymer.Element を継承して作ることで、Web Componentsを用いた処理が書きやすくなるようです。

Welcome – Polymer Project

SkateJS

PreactやReact、LitHTMLなどと組み合わせて使えるライブラリになります。コード例は以下のようになります。

import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h } from 'preact';

class WithPreact extends withComponent(withPreact()) {
  static get props() {
    return {
      name: props.string
    };
  }
  render({ name }) {
    return <span>Hello, {name}!</span>;
  }
}

customElements.define('with-preact', WithPreact);

skatejs/skatejs: SkateJS is a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint.

X-Tag

Microsoft社がサポートするWeb Componentsライブラリです。Web Components APIに準拠して使えます。タグをラッピングすることでイベントハンドリングやフラグメント作成なども行えるようになります。

X-Tag – Web Components

Web ComponentsはUIフレームワークでは使われ始めていますが、個々の部品というレベルにおいて提供されることは希なようです。使えるWebブラウザは広まっていますが、レガシーなブラウザへの対応で躊躇してしまうことが多いでしょう。そうした点において、Web Componentsライブラリを採用すれば、IE9あたりから対応できるようになります。

また、素のWeb Componentsでは良い書き方が分かりづらいかも知れません。ライブラリの提示する方法に則っておくことで利用しやすいWeb Compnentsが書けるようになるでしょう。