Components」という言葉に興味を持たれた方がほとんどだと思います。Components」、一体どんなものなんでしょうか。※今回は様々な記事を参考にさせていただきました。Components」とは一体何者なんでしょうか?まずはどんなものなのか、概要の把握からまいりたいと思います!公式のイントロダクションを読んでみましょう。Componentとはなんですか?Webコンポーネントは、WebページとWebアプリケーションで使用する新しいカスタム、再利用、カプセル化されたHTMLタグを作成できるWebプラットフォームAPIのセットです。Component標準をベースに構築され、最新のブラウザで動作し、HTMLで動作するJavaScriptライブラリやフレームワークで使用できます。Webコンポーネントは、既存のWeb標準に基づいています。Webコンポーネントをサポートする機能は現在、HTMLおよびDOM仕様に追加されており、Web開発者がカプセル化されたスタイリングとカスタム動作を備えた新しい要素でHTMLを簡単に拡張できるようにします。※引用文はGoogle翻訳を通しています。紹介文だけではなかなか想像できませんね。突っ込んでみてみましょうってことで仕様について調べてみます。Componentsとは以下4つの仕様を組み合わせたものを指します。DOMという要素を提供し、HTMLにスコープ(有効範囲のこと)を形成するTemplatesHTMLのテンプレート機能を利用できるようになる。imports分割したHTMLファイルを読み込む仕様としては以上です。「これら組み合わせて、Webサイト、WebアプリケーションのUI群を分離された部品(コンポーネント)という単位で、作ることができる」ということを指します。上記4つの仕様を使って行う構築手法、概念を指すと言えるでしょう。importsの順番にwebサイトの部品(ここではボタン)を作成していきましょう!ブラウザの対応状況まずブラウザが対応していないと何もできません。ComponentsはWeb標準での策定を目指しており、ブラウザ上で動作するものだからです(マジすごい)。Componentsの実装について各ブラウザの対応状況はどんな感じなのでしょう?記事執筆時点での公式サイトを覗いてみます。WEBCOMPONENTS.ORG(トップページにあります)https://www.webcomponents.org/※上記画像は執筆時点でのキャプチャー画像です。緑のチェックが付いている箇所に「STABLE」とあります。Chromeを使って試してまいりましょう!※Polyfillと書かれているものは「未対応ブラウザ向け実装によって可能」という意味で、Polyfillと呼ばれるライブラリを使うことで実装可能だよという意味です。Elementを試してみます。htmlファイルを1つ用意しましょう。こいつをここからグリグリ動かしてみます。以下の記述を書き込みます。Elementを発行するソースです。Chromeのdeveloperツールで見てみましょう。画面にはなんも表示されてませんが、developerツールのElementsタブで確認してみると先ほど追加した「sample-test」というDOMが追加されているのが確認できます!scriptタグ内のdocument.registerElementがミソで、これで要素を登録しています。登録した要素を次行のcreateElementで生成し、生成したDOMをbodyの最後に追加する。Elementを使うとオリジナルのカスタムHTMLタグを発行できます!★注意点(詳しくはこちら)名前に必ず「-(ハイフン)」が必要これはすでに用意されているHTMLタグと区別するため必要です。スローされますのでできません。生成したカスタムHTMLタグは普通のdivと変わりませんので閉じタグが必要です。document.registerElementの第二引数また記述したスクリプトタグ内のコード、document.registerElement('sample-test')には第二引数でプロトタイプを設定できます。実は先ほどのコード、の上記部分は、実際このような記述になります。document.register()を使うことで独自のHTML要素をブラウザが認識することができるようになるんですね。elementは使えません。戻り値はコンストラクタで、sample-testのインスタンスを生成しています。Elementを使えば、既存のhtmlタグを拡張することができます。Elementを使えばbuttonタグに機能を追加して拡張することができます。Elementとして登録することが可能です。Elementは独自タグの追加や、既存要素の拡張といったものでした。id="ID名"><template>で囲うだけです。それでテンプレートを作成することができます。作成したテンプレートを使う時にはID名で呼び出して使います。以降、呼び出さない限りtemplateタグで囲われた箇所は何もしません。templateタグで囲われた箇所はロードされても実行されません。呼び出されない限り表示もされなければ、反応もありません。いうことなのか、先ほど書いたファイルを少し書き換えてアップロードしてみましょう。templateタグの中にhtmlのbuttonに関するスタイルとhtmlソースを記入し、アップロードします。いままでのhtmlなら「これはカスタムボタンです。」というテキストとともにスタイルがあたったボタンが表示されるはずですが、表示されません。developerツールで確認してみても記述はあります。このtemplate、どのように呼び出して使うのでしょうか。呼び出しはjavascriptを使って呼び出します。Rootに登録して呼び出すのです。DOMについて簡単にご紹介いたします。DOMとは簡単にいうと、作成したパーツのカプセル化を行えるものです。DOMでスコープを形成できる)。外部からアクセスが遮断されるということは、既存のスタイルやJavaScriptでもアクセスできないようになるので、影響されることがないということになります。やってみましょう!先ほどのソースをちょっと書き換えます。templateとして「スタイル付きのカスタムボタン」を定義。body内にはtemplateの出力先として「test-shadowdom」という空のdiv要素を用意しました。DOMの記述をしていきます。結果、test-shadowdomのdivの中には「#shadow-root(open)」というテキストが現れました。このopenというテキストですが、shadow-rootにはopenモードとclosedモードがあり、openモードはshadow-rootにアクセス可能。closedでアクセス不可という、より強固なカプセル化を行えます(アクセスはjavascriptで行います)。これではカプセル化できてるのかできてないのか判然としません。試しに「test-shadowdom」というdivにテキストを入れ、通常のコーディングのようにstyleタグで色を指定してみましょう。なんだか不思議ですね。「test-shadowdom」のdiv要素の中には「テキスト」というテキストがあり、すぐ上に追加したstyleタグの指定があるのに、まったく読み込まれていません。あった要素も表示されません。Rootが表示されています。ある要素は汚さずにそのまま上書きされているのです。DOMの仕組みを使うと、要素を変更するか否かなど、細かい調整が可能になり、かつ、よくあるstyle上書かれちゃう事故なども起きないようになります。DOMに追加してみます。詳しくはscriptタグのコメントをご覧ください。Rootに追加され、表示されました。Rootに追加して表示することが可能になります。imports最後に4つ目の仕様をご紹介します。imoportsを使うとそれができるようになります。DOMの部分を別のhtmlファイルに移し、いままでのhtmlファイルを空にしてそこへimportsしてみるということをやってみましょう。無事読み込まれました!追記したのはlink属性です。href="template.html">headの閉じタグすぐ前に追加した部分でtemplate.htmlを読み込んでいます。DOMの記述のみ記載されており、それが実行されてこのように表示されています。importsとは「このパーツ(例えばボタンやSNSの表示だったり)、他のページでも使うんだよねー」という時に、そのコンポーネントだけ別のhtmlファイルに分けて記述することで、よりすっきりとしたわかりやすい構築ができるようになるメリットがあります。ここまでやってみて感想とまとめここまでWEBCOMPONENTSの解説をおこなってきましたが、なかなかこれを使ったコーディングをイメージするのは従来の方法からはなかなか想像しにくいですよね。twitterカードのデザインなんてものを想像してみましょう。いろんなページにそれを設置する時、今までのコーディング手法なら、いちいちそのソースコードをそのhtmlに埋め込まなくてはなりません。今回紹介しきれなかったShadowDOMの表要素と影のShadowRootのハイブリッド型を使うと、さらに柔軟なコーディングが可能になります。させていただきましたのでそちらをご紹介してむすびとさせていただきます。ケイジャニストやまだこの記事が気に入ったら「いいね!」ブログを購読する更新時にプッシュ通知にてお知らせします。ケイジャニストやまだこんにちは。ゴリラから人間に転職しました。フロントエンドエンジニア、コーダー、マークアップエンジニア受け持つあたりを主な守備範囲としながら、デザイン業務も兼任(最近めっきり)しております。コミックイラストも得意です。