ウェブコンポーネントを使用すると、カスタムHTML要素を作成することができます。最近のフロントエンドJavaScriptフレームワークでは、Webコンポーネントが最もよく使われているのを見かけます。しかし、「ウェブコンポーネント」は、実はw3cwebの規格であり、フレームワークを使わなくても利用できるものなのです。

ウェブコンポーネントは何ですか？

ウェブコンポーネントは、HTMLのレゴと同じように機能し、HTMLをより便利で再利用しやすくするための技術の集合体である。より詳細な背景情報については、w3web コンポーネント仕様および Mozilla Developer Network の Web コンポーネントに関するページを参照してください。

これらのテクニックは以下の通りです。

• カスタム要素
• HTMLテンプレート
• キングダム・オブ・シャドウズ
• ESモジュール

これらを順番に見ていきましょう。

カスタム要素

カスタム要素とは、JavaScriptがより機能的にするための特別なHTML要素です。コールバックなしで常に最新のデータを表示するのに最適な方法です。また、好きな名前をつけることができます。

ハイパーテンプレート

テンプレートは、再利用可能なHTMLのブロックです。ヘッダー、フッター、メニューなど、複数の場所や複数のページに配置されるアイテムに最適です。

キングダム・オブ・シャドウズ

DOMは、ブラウザで見るコンテンツとHTMLコードを結びつける接着剤です。shadowdomは、マークアップ、スタイル、機能を分離しておくDOMの部分です。

shadowdomを使用すると、各カスタム要素が独自のDOMを取得します。これにより、スタイルやJavaScript関数が、影響を受けたくない要素を変更するのを防ぐことができます。

エスモジュール

これらは、Webコンポーネントを動作させるための特別なJavaScriptライブラリです。

ウェブコンポーネントの主な利点の一つは、カスタムHTMLをどこでも再利用できることです。ウェブコンポーネントは純粋なHTMLとJavaScriptなので、フレームワークだけでなく通常のJavaScriptアプリケーションとの互換性があります。webcomponents.orgで見ることができます。

フレームワークによるWebコンポーネント

Webコンポーネントを使い始める最も簡単な方法は、フレームワークを使用することです。Webコンポーネントが登場する以前、angle.jsはディレクティブと呼ばれる同様の機能を提供していました。標準化される前の部品と同じような仕事をしていたのです。

コンポーネントが標準となった今、Webコンポーネントの概念に基づいたフレームワークは他にもあります。ウェブコンポーネントの使用をよりシンプルで合理的なものにし、低レベルのJavaScriptを使用する複雑さの多くを抽象化するものです。

株式会社ブイ・コーポレーション

VirtualUser.jsは、開発者に人気のあるコンポーネントベースのフロントエンドフレームワークです。vueは、学習とプログラミングが容易です。また、このフレームワークでは、基本的な HTML ウェブサイトに簡単なコンポーネントを追加することができます。

関連：Vue.jsとは？

反応

Reactは、フロントエンドのフレームワークとして広く採用されています。このフレームワークは開発者の間でも人気があり、ReactはHTML、CSS、JavaScriptを1つのスクリプトにまとめ、Web開発を簡素化することで知られています。

詳しくは、Learn how to **web application tutorial overviewをご覧ください。

フレームワークを使わないWebコンポーネント

純粋なJavaScriptでWebコンポーネントを記述することができます。しかし、これは特に初心者の方には難しいことです。しかし、既存のコードに追加できる軽量なライブラリがあります。これにより、フレームワーク全体の高いオーバーヘッドなしに、最新のJavaScriptのプラクティスを簡単に使用することができます。

高分子材料

Aggregateは、ウェブコンポーネントの動きに対するGoogleの貢献です。通常のJavaScriptを使用するよりも簡単にカスタム要素を作成できる軽量なライブラリの集合体です。カスタムエレメントやテンプレートを作成するためのライブラリーを備えています。

Polymerは、古いブラウザとの互換性を確保するために、ポリフィルライブラリを用意しています。また、プレーンなHTMLにマテリアルデザインを追加できるマテリアルデザインコンポーネントの初期バージョンも用意されています。

スリム

また、シンプルなWebサイトに簡単に追加できるオールインワン・ライブラリのslim.jsも選択肢の一つです。カスタムエレメントの作成プロセスを簡素化し、シャドウダムへの直接アクセスを提供します。

テンプレート

最後になりますが、優れた金型は、両方の長所を発揮してくれます。Reactと似ていて、同じような機能を多く備えています。しかし、重箱の隅をつつくようなフレームワークに縛られることなく、フレームワークレベルの機能性を提供します。

また、金型は部品をプリコンパイルすることで、より軽量化することができます。これに対し、Reactのようなフレームワークは、フレームワーク全体をブラウザに読み込み、コンポーネントを動的にコンパイルします。モールドコンポーネントがブラウザに入るときは、余分な負荷のかからない、ただのJavaScriptとHTMLです。

ウェブコンポーネントとウェブデザイン

コンポーネントの利用を阻む大きな要因のひとつに、Bootstrapのようなデザインフレームワークが失われたことが挙げられます。技術的には、コンポーネントベースのウェブサイトと組み合わせてBootstrapを使用することができます。しかし、StencilやVueなどを使いたい場合、コンポーネントやフレームワーク間の互換性**がないことが不満になるかもしれません。

従来のウェブデザインフレームワーク

幸いなことに、デザインフレームワークは複数から選択することができます。和田は、いい部品を提供しています。コーポレートスタイルでは、OpenUI5があります。 また、前述の通り、GoogleのPolymerもマテリアルインターフェースのコンポーネントを提供しています。

悪いニュースは、これらのフレームワークでは、ブートストラップから得られるような経験は得られないということです。タイポグラフィなど、多くのデザインフレームワークに見られる要素が欠けているのです。

コンポーネントベースドデザインフレームワークアプローチは何ですか？

ウェブコンポーネントなど、異なる技術は異なる方法で使用する必要があります。ハイパールミネッセンスが最適なアプローチです。デザイナーにとっては使いやすいですが、開発者にとっては堅実でクリーンなベースを提供することができます。FTLパーティクルはモバイルファーストで、微妙なデザインの統一感を出しながらも、美しい結果を出しています。

Hyperluminescenceは、CSSのクラスを最小限の用途に分解します。例えば、buttonを使ったボタンの作成方法は次の通りです。

多くのデザインフレームワークでは、リンクにボタンクラスと角丸クラスを与えるでしょう。FTLパーティクルでは、フィル、ボーダー、カラーなどを素早く選択することができます。どの略語も最初は複雑に見えるかもしれませんが、一貫した命名パターンに従っているので、簡単に覚えられます。

ミニマムクラスは、HTMLクラスをブロックするため、従来のWebサイトには適用できないアプローチです。しかし、コンポーネントベースのアーキテクチャでは、アプリケーション全体で同じボタンを何度も使用することがあります。つまり、サイト全体で一度だけボタンを作成すればよいのです。

コンポーネント思考

もう一つの障害は、従来のウェブサイトのレイアウトから、コンポーネントベースの構造へと脳を移行させることです。コンポーネントで考えることを学ぶために、2つのテクニックがあります。

アトミックメソッド

ウェブページをひとつの有機体に見立てて考えてみましょう。ヒーローコーナーやプライスガイド、ユーザーレビューなどのパーツは、生物の細胞のようなものです。再利用するかどうかは別として、これらの部品は安全にそれぞれの部品に移動させることができます。

ボタン、見出し、逆さカンマは原子のようなものです。原子は、可能な限り小さな部品です。これ以上成分を分解しても意味がない場合、それがアトムです。これらは通常、プロジェクトを通じて、また場合によってはプロジェクト間で繰り返し使用するコンポーネントです。

ドライ方式

あるいは、生物、細胞、原子などという無意味なものはすべて忘れて、ドライのままにしておく。

大小にかかわらず、何でも部品になるのです。だから、いつも通りHTMLを書けばいいのです。ギャラリーやフッターなど、再利用したいものが見つかったら、それを独自の構成要素に分解します。

次のプロジェクトでは、Webコンポーネントを使うべきですか？

考慮すべきポイントは、チームとWeb標準です。

主要ブラウザはすべてWebコンポーネントを採用しています。canIUseはカスタムコンポーネントで93％、テンプレートで95％の採用率なので、安心です。また、Webコンポーネントをサポートしない散在するプログラムのためのポリフィルも存在する。これは、コンプライアンスが問題にならないことを意味する。

フレームワークやJavaScriptの経験がないチームにとって、この新しい技術を採用するのは難しいかもしれません。しかし、そうであれば、どのような**技術も採用することは難しいかもしれません。一人なら、頑張れ!常にスキルアップを図ることができるのです。

ウェブコンポーネントの導入で最も難しいのは、デザインのフレームワークがないことと、コンポーネントで考えることを覚えることです。しかし、我々は両方の側面をカバーしました。ウェブコンポーネントは2014年から存在しており、新しい技術ではありません。しかし、より優れた技術であることは確かです。