WebComponentの簡単な使い方（シンプルに第一歩目に）
WebComponentの簡単な使い方（シンプルに第一歩目に）:
わたしが Vue.js や Riot.js やその他を使う１つの大きな理由はHTMLの部品化にあります。
例えば、ヘッダやフッタなど全ページにまたがるやつの共通化です。
以前はSSI（Server Side Include）使ってましたけど、だんだんサーバ多様化してきてどうにも使い勝手がわるく。
ということで、こうなったらWebComponentsです！！！
まだブラウザの実装状況が怪しいところもありますが、今回紹介するもっともシンプルな機能（
本番導入するにはもう少し慎重に調査した方がいいと思いますが十分に検討の余地ある技術です。
コード見た方が早いので見てみましょう。
全体です。
実行結果はこうなります。
まあ、説明不要なほどシンプルなコードですね。。
通常のHTML内をみると
その後の
これでOK、完了です。
簡単に使おうとするとこれだけです。
シンプルですね。
最初にも言いましたがヘッダとかフッタとかは共通部品として複数のページで同じように使いたいですよね？ ということでそれらをカスタムタグ
細かいところはいろいろありますが
今回ちょっとわけあって
WebComponentsの第一歩目はこの記事でいいですが興味ある方は調べてみると面白いと思います。
なに？
わたしが Vue.js や Riot.js やその他を使う１つの大きな理由は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の第一歩目はこの記事でいいですが興味ある方は調べてみると面白いと思います。
コメント
コメントを投稿