Web Components の世界を開こう! ~ Custom Elements 編 ~

Web Components!

こんにちは!
江嵜です。

今回は少し前から盛り上がりそうな雰囲気をかもし続けている、 Web Components について取り扱ってみましょう!

軽く Web Components が何ぞやというお話をしますと、

  • Web の世界で
  • カプセル化された要素を作れるようにして
  • 再利用可能な要素を作れるようにすることで
  • 分かりやすい Web プログラミングを実現する API

といったところですね。

つまり、「アプリを作るときに、全体を一気に作るんじゃなくて部品ごとに作れたら楽じゃね?」みたいなことですね。

この Web Components は 2018 年 9 月現在はさらに

  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • ES Modules
  • HTML Module

の、 5 つの仕様に分かれています。

今回は、この中から、最も核になる Custom Elements についてみていきましょう!

Custom Elements とは何ぞや?

Custom Elements、日本語にするとカスタム要素・独自要素といったところですね。
(以下、カスタム要素と呼びます)

HTML で言うところの要素というのは <h1> のような、タグの事です。

h1 のように定められている要素だけで Web アプリケーションを作ろうとすると、どうしても div (意味を持たない、CSS や JS での制御をしやすくするための要素) などが多くなって、ソースが見にくくなります。

シンプルに見える Google のページでも、開発者コンソールで見ると div だらけですね。

こういった問題に対して、分かりやすく部品化し、部品を再利用しやすくするために独自のタグを設定できるようにしよう!というのが カスタム要素なのです!

Custom Elements はどうやって設定して使う?

実は設定なしでも使えなくはない

実は、特別設定せずともカスタム要素を使用できない、という事はないのです。
カスタム要素を追加するときのルールとして一つだけ知っておいていただきたいのが、 タグ名はハイフンを一つ以上含むものにする というものがあります。
これは今後 HTML に新しいタグが追加された場合に、既に誰かが使用しているカスタム要素の名前と重複しないようにですね。

以下の例では特に特別な設定なしで、 test-element という名前のタグを含むページを Google Chrome で表示してみた結果です。

普通に表示されていますね。

コンソールを見ていただくと分かりますが、自動的に HTMLElement を継承しています。
即ち、 Chrome は知らないタグについてもとりあえず HTML の要素だと判断して良しなに処理してくれているのですね。

ちなみに、 Internet Explorer では HTMLUnknownElementPrototype というものが継承されています。

理解できない名前のタグについて、専用のオブジェクトをあてて対応しているのですね。

正しい設定の仕方

先程の例はブラウザ側がうまく処理してくれたとはいえ、あまり良い設定とは言えません。

新しく用意するカスタム要素は、ブラウザ側に正しく教えてあげるべきです。

幸い、 Web Components ではカスタム要素をブラウザ側に設定するための方法が用意されています。
それが、以下で使用している customElements.define() です。

ソースコードの方に customElements.define() が追加されているのが確認できるでしょうか。

ちなみに、 customElements は window に定義されていますよ。

先程の定義なしの場合と比べて見た目に違いはないですが、 Web Components のカスタム要素を使用することを明確に宣言できます。

既存の要素を継承させる

一応、上の方法だけでもカスタム要素は使用できます。
しかし、例えば「独自の挙動をするボタンを部品として実装したい!」など、既にブラウザ側に用意されている要素 (この場合は button) を継承して、その上に独自のコードを載せた方が都合がいいことがありますよね。

そういったことも簡単にできて、例えば 押されたときに clicked! とログに出力するボタンを実装するには以下のようにします。

この例では JavaSctip でのボタンの追加・HTML への記述の二通りでボタンを表示していますが、
どちらもやっていることは同じです。

  1. 継承したい要素 (今回は HTMLButtonElement ) を継承したクラスを作成し、その中にカスタム要素の挙動等を記述する
  2. customElements.define() を書く。この時、第三引数に {extends: '要素名'} として、継承するタグを明示する
  3. タグを HTML に記述する。この時、タグ名は継承するタグの名前を設定し、 is 属性に自分で定義したタグの名前を設定する

こうすることで、特定のタグの要素を継承したカスタム要素を作ることができました。

スタイルシートなどは全く設定していませんが、作成したカスタム要素に button のデフォルトのスタイルが適用されていることが分かるかと思います。

こうすることで簡単にカスタム要素を定義していくことができますね!

今後活躍の場が広まりそうな Web Components

Web Components はまだ新しい技術であり、多くのブラウザでサポートされ始めてはいますが、まだまだ発展途上の技術です。
実際に、Web Components について調べると、今回紹介したのは V1 というバージョンですが、 V0 という以前のバージョンについて書かれた記事も良く検索に引っかかってきますね。

是非皆さんも触ってみて下さい。
Web 開発がとても楽になる可能性を秘めている技術ですので、みんなで盛り上げていきたいところですね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2018-10-18

    第9回テーブル部(ボードゲーム)~少人数でまったり~

    2018年8月25日に第9回となるテーブル部活動を開催しました! この日もいつも通り「ボードゲーム…
  2. 2018-10-17

    2018年10月度・第28回 福岡社員総会 & 懇親会

    はじめに 早いものでもうすっかり秋模様ですね🍁 のちほどお伝えする総会&懇親会の様子を見ていただ…
  3. 2018-10-15

    2018年9月度社員総会&懇親会@Tokyo 〜良い表情がいっぱいだね(o゜▽゜)o〜

    遅くなってしまったけれども…… 2018年10月度の社員総会&懇親会@Tokyoが今週末に控えてい…
  4. 2018-10-15

    第7回ボルダリング部 ~いざ! 大根おろしチャレンジ!~

    2018/10/7(土)にボルダリング部の活動がございました! どういう活動内容だったのかご紹介い…
  5. 2018-10-15

    JS で Canvas を操作するときは Konva が結構便利に使えます!

    HTML5 の canvas 使ってますか? こんにちは! 江嵜です。 みなさん、html5 の…
ページ上部へ戻る