WebComponentsを利用した次世代Web開発を始める前に、現行のブラウザでWebComponentsを利用できるようにする必要があります．その方法をまとめました．

0．なぜWebComponentsを使うのか

WebComponentsは伝統的なWeb開発にパラダイムシフトをもたらします．

WebComponents.orgの記事「Why Web Components?(なぜWebComponentsを使うのか)」にその細かい利点は記載されています．

拙訳を末尾に記載したので、興味がある方はご一読ください．

 

1．WebComponentsを現行のブラウザで利用する方法(webcomponents.jsの導入)

現行ブラウザのWebComponentsサポート状況はまちまちです．

Chrome/Operaが完全なサポートをしている一方で、SafariやInternetExplorerは機能のサポートを殆どしていません．

このギャップを埋める(polyfill)のがwebcomponents.js(旧platform.js)です．

javascriptで作られたライブラリのため、性能等含め完全にネイティブ同等の機能を提供できるわけではないですが、各ブラウザがサポートを行うまでの繋ぎとしては十分かと思われます．

 

2．実際の作業

a．webcomponents.jsの取得

以下3つの方法がありますが、どれも取得できるものは同じなので好きな方法を利用してください．

1. Bowerでのインストール(bower install webcomponentsjs)
2. npmでのインストール(npm install webcomponents.js)
3. ファイルのダウンロード

1、2はそれぞれBower・npmのインストールが必要です．

3．はhttp://webcomponents.org/の Download webcomponents.js を押してダウンロードするだけなので一番わかりやすいかと思います．

取得したwebcomponentsには以下のファイルが含まれていますが、利用するのは赤字にした4つのファイルだけです．

• bower.json
• build.log
• CustomElements.js
• CustomElements.min.js
• HTMLImports.js
• HTMLImports.min.js
• MutationObserver.js
• MutationObserver.min.js
• package.json
• README.md
• ShadowDOM.js
• ShadowDOM.min.js
• webcomponents-lite.js
• webcomponents-lite.min.js
• webcomponents.js
• webcomponents.min.js

b．利用するファイルの選定

赤字で表現した4つのファイルの中にはlite/minバージョンが存在します．

この中から適切なものを選んでください．

(特にわからなければ、webcomponents.jsでよいかと思います)

liteについて

liteがついているものはShadowDOMを含まないバージョンになります．

ShadowDOM部分で5000行程のコードがあるため、ShadowDOMを利用しない場合はlite版をご利用ください．

minについて

minがついているものはminified版になります．

開発中はデバッグができるよう通常版を利用した方が便利ですが、プロダクトとしてリリースする際にはファイルサイズの圧縮・難読化がされているminの方が適切です．

c．HTMLからの参照

利用するファイルを選んだら、WebComponentsを利用したいアプリケーションに導入しましょう．

導入方法は簡単で、アプリケーションのHTMLファイルに以下のSCRIPTタグを追加してください．

webcomponents.jsまでのパスはデプロイ先の構成に合わせてください．

ここではjsフォルダにデプロイしている想定で記載しています．

これでwebcomponentsの導入は完了です．

＜注意点＞

アプリケーションの環境によってはwebcomponents.jsを他のJavaScriptとまとめてひとつのファイルにしてデプロイすることが有るかと思います．

この場合、webcomponents.jsに手を加える必要があるので注意してください．

webcomponents.jsのソースを見ると、15行目付近に以下のコードが存在します．

ご覧の通り、webcomponents.jsを参照するSCRIPTタグをquerySelectorで探し、その後の処理に利用しています．

そのため一つのファイルにまとめた場合、この部分で正しくタグが取得できずにエラーとなってしまいます．

修正方法は簡単で、変数fileの値をまとめた後のファイル名に変更するだけです．

minified版であってもファイル名の文字列は変わらないため、簡単に修正できます．

 

拙訳: Why Web Components?

WHY? – なぜ？

Webが始まったとき、私たちには利用可能なタグの種類は少ししか有りませんでした．fromタグやselectタグといったタグを利用してページを構築していましたが、これらには意味がありました．カプセル化してくれたり、デフォルトのUIを持っていたり、何か面白いことが起こったときにイベントを発生させたりしていました．殆どの場合、単純にマークアップするだけで済みました．

 

今日私たちがWebページを作成する方法は、少し異なっています．私たちはHTMLフォームやBootstrapのようなCSSライブラリをコピー＆ペーストしたり、色々なJavaScriptのライブラリ・プラグインをまき散らすようになりました．それに加え、同じページで異なったフレームワークのコンポーネントを再利用することができない場合もでてきました．これは、私たちのページのCSS・JavaScriptが肥大化してしまっていることを意味しています．

 

もしHTMLの表現力が優れていて、私たちの独自タグとのギャップを埋めるようにHTMLが拡張できればどうでしょうか．これを可能にするのがWeb Componentsです．

HOW? – どうやって？

厳密にいうと、Web Componentsとは4つの異なるW3C仕様をまとめた用語です．

その4つは以下のものです．

• Custom Elements は独自のHTMLタグの定義を可能にします
• HTML Templates は動的にコンテンツを挿入できるマークアップの固まりを定義可能にします
• Shadow DOM はマークアップとスタイルのスコープを異なるDOMツリー内に限定できるようにします
• HTML Imports はHTMLドキュメントのインクルードと再利用方法を提供します

個々の仕様は単体でも便利です．しかし、これらを組み合わせることによって全体として次のことが可能になります．

• Composability (組合せによる構築可能性: 要素を組み合わせることでWebサイトやWebアプリ全体を構築できるようになります．);
• Encapsulation (カプセル化: マークアップ・スタイル・振る舞いのロジックを独立させ、ページの他の部分に漏れださないようにすることができるようになります);
• Reusability (再利用性: 既存の要素を拡張して新しい要素を作成できるようにすることで車輪の再発明を防ぐとこができるようになります).

これが意味することは、プラットフォームの差異を意味のある形で埋められることができるようになったと言うことです．また、コンポーネントの相互運用が可能な、より統一されたエコシステムを構築する機会が開かれたということです．

MORE? – もっと知りたいですか？

私たちはこのガイドがWebComponentsを学び始め、独自のカスタム要素を試すきっかけとなることを望みます．

もしもっと学びたいのであれば、この場所こそ最適です．私たちの導入記事(英語)を読みや概要のビデオ(YOUTUBE)を見てみてください．