なに?
わたしが Vue.js や Riot.js やその他を使う1つの大きな理由はHTMLの部品化にあります。
例えば、ヘッダやフッタなど全ページにまたがるやつの共通化です。
以前はSSI(Server Side Include)使ってましたけど、だんだんサーバ多様化してきてどうにも使い勝手がわるく。
ということで、こうなったらWebComponentsです!!!
WebComponentsとは?
Webコンポーネントは、再利用可能なカプセル化された新しいカスタムタグを作成して、WebページやWebアプリで使用できるようにするためのWebプラットフォームAPIです。
ということで、再利用するために「カスタムタグ」というのを作ることができる技術です。
まだブラウザの実装状況が怪しいところもありますが、今回紹介するもっともシンプルな機能(customElements
)であればわたしが見てる限りでほとんどのモダンなブラウザでは実装済みでした(なんならIE11でも)。
本番導入するにはもう少し慎重に調査した方がいいと思いますが十分に検討の余地ある技術です。
さっそく
コード見た方が早いので見てみましょう。
全体です。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<my-header></my-header>
<h1>hello WebComponents!!</h1>
<my-footer></my-footer>
<script>
class MyHeader extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<div>
<p>ヘッダー</p>
</div>
`;
}
}
customElements.define("my-header", MyHeader);
class MyFooter extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<div>
<p>フッター</p>
</div>
`;
}
}
customElements.define("my-footer", MyFooter);
</script>
</body>
</html>
実行結果はこうなります。
まあ、説明不要なほどシンプルなコードですね。。
通常のHTML内をみると my-header
や my-footer
という見覚えのないタグがあります。
その後の script
内で HTMLElement
を継承したカスタムタグクラスを実装して、 customElements.define
によって、カスタムタグとカスタムタグクラスを結び付けています。
これでOK、完了です。
簡単に使おうとするとこれだけです。
シンプルですね。
どう使うの?
最初にも言いましたがヘッダとかフッタとかは共通部品として複数のページで同じように使いたいですよね? ということでそれらをカスタムタグ my-header
や my-footer
として定義しておきます。その定義を外部のjs
として定義しておいてすべてのページからscript
タグとかで読み込めばいいのです。
注意点
カスタムタグの名前は - が入ったモノにする
myheader
とかだとエラーになります。 my-header
とかにしてください。
スクリプトの実行順序に気を付ける
細かいところはいろいろありますが customElements.define
を呼び出すのは body
の最後にしておく方が安全です。 もし外部の .js などにまとめたとしても script
での .js の読み込みは最後に書いておきましょう。
蛇足・補足
今回ちょっとわけあって Vue.js
が使えなくて、サーバ側処理も実装したくなくて、ひさびさに WebComponentsを調べました……が……すごい色々拡張されていて驚きました。
WebComponentsの第一歩目はこの記事でいいですが興味ある方は調べてみると面白いと思います。