軌道高度から

このセクションでは、「Webコンポーネント」の最新の標準規格について説明します。

今のところ、これらの標準規格は開発中です。一部の機能は十分にサポートされており、最新のHTML/DOM標準に統合されていますが、他の機能はまだドラフト段階です。どのブラウザでも例を試すことができますが、Google Chromeはおそらくこれらの機能を最も最新の状態に保っています。おそらく、Googleの仲間たちが関連仕様の多くを推進しているからでしょう。

共通点は…

コンポーネントのアイデア全体は、何も新しいものではありません。多くのフレームワークやその他の場所で使用されています。

実装の詳細に移る前に、人類のこの素晴らしい成果を見てみましょう。

それは国際宇宙ステーション(ISS)です。

そして、これはその内部が(おおよそ)どのように作られているかです。

国際宇宙ステーション

• 多くのコンポーネントで構成されています。
• 各コンポーネントは、さらに多くの小さな詳細で構成されています。
• コンポーネントは非常に複雑で、ほとんどのウェブサイトよりもはるかに複雑です。
• コンポーネントは、異なる言語を話す異なる国のチームによって国際的に開発されています。

…そして、これは宇宙を飛行し、宇宙で人間を生かし続けているのです！

どのようにしてそのような複雑なデバイスが作成されるのでしょうか？

開発を同レベルの信頼性と拡張性のあるものにするために、どのような原則を取り入れることができるでしょうか？または、少なくともそれに近いものに？

コンポーネントアーキテクチャ

複雑なソフトウェアを開発するためのよく知られたルールは、複雑なソフトウェアを作成しないことです。

何かが複雑になった場合は、それをより単純なパーツに分割し、最も明白な方法で接続します。

優秀な設計者とは、複雑なものをシンプルにできる人のことです。

ユーザーインターフェイスを視覚的なコンポーネントに分割できます。それぞれのコンポーネントは、ページ上の独自の場所を持ち、明確に記述されたタスクを実行でき、他のコンポーネントとは分離されています。

例として、ウェブサイト、たとえばTwitterを見てみましょう。

自然にコンポーネントに分割されます。

1. トップナビゲーション。
2. ユーザー情報。
3. フォローの提案。
4. 送信フォーム。
5. (そして6, 7) - メッセージ。

コンポーネントにはサブコンポーネントを含めることができます。たとえば、メッセージは、より高レベルの「メッセージリスト」コンポーネントの一部である可能性があります。クリック可能なユーザーの画像自体がコンポーネントである可能性があり、以下同様です。

何がコンポーネントであるかをどのように決定するのでしょうか？それは、直感、経験、常識から生まれます。通常、それは、何をするのか、ページとどのように相互作用するのかという観点から記述できる、独立した視覚的エンティティです。上記の場合、ページにはブロックがあり、それぞれが独自の役割を果たしており、これらのコンポーネントを作成するのが論理的です。

コンポーネントは次のものを持っています。

• 独自のJavaScriptクラス。
• DOM構造。そのクラスのみによって管理され、外部コードはアクセスしません(「カプセル化」の原則)。
• コンポーネントに適用されるCSSスタイル。
• API: イベント、クラスメソッドなど、他のコンポーネントと対話するため。

もう一度言いますが、「コンポーネント」全体は特別なものではありません。

それらを構築するための多くのフレームワークと開発方法論が存在し、それぞれに独自の機能があります。通常、特別なCSSクラスと規則を使用して、「コンポーネント感」を提供します。CSSスコーピングとDOMカプセル化です。

「Webコンポーネント」は、そのための組み込みのブラウザ機能を提供するため、もはやエミュレートする必要はありません。

• カスタム要素 - カスタムHTML要素を定義するため。
• シャドウDOM - コンポーネントの内部DOMを作成し、他のDOMから隠すため。
• CSSスコーピング - コンポーネントのシャドウDOM内でのみ適用されるスタイルを宣言するため。
• イベントのリターゲティングと、カスタムコンポーネントを開発に適合させるためのその他の小さなもの。

次の章では、「カスタム要素」の詳細について説明します。これは、Webコンポーネントの基本的で十分にサポートされている機能であり、それ自体で優れています。