HTML/Web Component

Web Components

Web Componentsは、モジュール化された再利用可能なUIコンポーネントを作成するためのHTML標準のセットです。これにより、複雑なWebアプリケーションでも、個々の要素を独立して開発・管理できます。Web Componentsは以下の3つの主要な技術で構成されています。

Custom Elements: 独自のHTML要素を作成する仕組み
Shadow DOM: DOMのカプセル化により、スタイルや構造を他の部分から分離する仕組み
HTML Templates: 再利用可能なテンプレートを定義する仕組み

この章では、それぞれの技術を詳細に解説し、具体的な使用例を示します。

Custom Elements

Custom Elementsを使用すると、独自の名前空間を持つ新しいHTML要素を定義できます。以下は、カスタム要素を作成する基本的な例です。

// カスタム要素を定義する
class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = "<p>これはカスタム要素です。</p>";
    }
}

// 要素を登録
customElements.define('my-element', MyCustomElement);

このスクリプトをHTML内に組み込むと、<my-element>要素が使用可能になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Custom Elementsの例</title>
</head>
<body>
    <my-element></my-element>
</body>
</html>

このコードをブラウザで開くと、「これはカスタム要素です。」というテキストが表示されます。

Shadow DOM

Shadow DOMは、DOMのカプセル化を実現する技術です。これにより、コンポーネント内の構造やスタイルが外部に影響を与えず、また外部からの影響も受けません。

以下は、Shadow DOMを使用してスタイルをカプセル化する例です。

// カスタム要素にShadow DOMを追加
class ShadowElement extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>
                p {
                    color: red;
                }
            </style>
            <p>これはShadow DOM内のテキストです。</p>
        `;
    }
}

customElements.define('shadow-element', ShadowElement);

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Shadow DOMの例</title>
</head>
<body>
    <shadow-element></shadow-element>
    <p>これは通常のDOMのテキストです。</p>
</body>
</html>

このコードでは、<shadow-element>内のスタイルはカプセル化され、外部の<p>要素には影響を与えません。

HTML Templates

HTML Templatesは、再利用可能なテンプレートを定義する仕組みです。TEMPLATE要素と組み合わせて使用されることが多く、動的コンテンツの生成に役立ちます。

以下は、HTMLテンプレートを使用した例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTML Templatesの例</title>
</head>
<body>
    <template id="template">
        <div class="item">
            <h2></h2>
            <p></p>
        </div>
    </template>
    <div id="content"></div>
    <script>
        const template = document.getElementById('template');
        const content = document.getElementById('content');

        const items = [
            { title: 'アイテム1', description: 'これはアイテム1の説明です。' },
            { title: 'アイテム2', description: 'これはアイテム2の説明です。' }
        ];

        items.forEach(item => {
            const clone = template.content.cloneNode(true);
            clone.querySelector('h2').textContent = item.title;
            clone.querySelector('p').textContent = item.description;
            content.appendChild(clone);
        });
    </script>
</body>
</html>

このコードでは、テンプレートを複製して動的にDOMに追加する方法を示しています。

Web Componentsの統合例

ここでは、Custom Elements、Shadow DOM、およびHTML Templatesを組み合わせた実践例を示します。

// カスタム要素の定義
class UserCard extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });

        const template = document.createElement('template');
        template.innerHTML = `
            <style>
                .card {
                    border: 1px solid #ccc;
                    padding: 1rem;
                    border-radius: 5px;
                }
                .name {
                    font-weight: bold;
                }
            </style>
            <div class="card">
                <p class="name"></p>
                <p class="email"></p>
            </div>
        `;

        const content = template.content.cloneNode(true);
        shadow.appendChild(content);

        shadow.querySelector('.name').textContent = this.getAttribute('name');
        shadow.querySelector('.email').textContent = this.getAttribute('email');
    }
}

customElements.define('user-card', UserCard);

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Web Components統合例</title>
</head>
<body>
    <user-card name="山田太郎" email="taro@example.com"></user-card>
    <user-card name="佐藤花子" email="hanako@example.com"></user-card>
</body>
</html>

このコードでは、<user-card>要素を使い、ユーザー情報をコンポーネント化しています。

まとめ

Web Componentsは、再利用可能でカプセル化されたコンポーネントを作成するための強力なツールです。Custom Elements、Shadow DOM、HTML Templatesを適切に組み合わせることで、モジュール化されたWebアプリケーションを効率的に開発できます。