JavaScript Academy · レッスン

テンプレートとスロット

Q: 「テンプレートとスロット」で何を学びますか？

template と slot でコンポーネントを組み立てます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

template と slot でコンポーネントを組み立てます。

「テンプレートとスロット」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

template 要素

<template> 要素には、解析されますがレンダリングされない不活性な HTML を格納します。内容は複製して挿入するまでページに追加されないため、再利用可能なマークアップに最適です。

テンプレートコンテンツへのアクセス

テンプレートの子要素は、DocumentFragment である .content プロパティに格納されます。内部のスクリプト、画像、スタイルは、挿入されるまで実行も読み込みも行われません。

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

テンプレートの複製

importNode または cloneNode(true) を使ってテンプレートの内容をコピーし、その複製を挿入します。複製を使うと、多数のコピーを低コストで作成できます。

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

コンポーネント内のテンプレート

カスタム要素では、テンプレートを 1 回だけ定義し、各インスタンスでシャドールートに複製することがよくあります。毎回 HTML 文字列を再解析するよりも高速です。

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

スロットとは

<slot> は、要素自身の子コンテンツ（light DOM）が投影されるシャドーツリー内のプレースホルダーです。これにより、ユーザーはコンポーネントに独自のコンテンツを渡せます。

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

デフォルトスロットのコンテンツ

<slot> タグの間に配置したコンテンツはフォールバックとして機能します。ユーザーが一致するコンテンツを指定していない場合にだけ表示されます。

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

名前付きスロット

name 属性を使うと、複数のスロットを共存させられます。Light DOM の子要素は、slot 属性を使ってスロットを指定します。

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

デフォルト（名前なし）スロット

name のないスロットがデフォルトスロットです。slot 属性のない子要素はすべてそこに投影されます。1 つのデフォルトスロットと複数の名前付きスロットを組み合わせることもできます。

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

スロットコンテンツのスタイル設定

::slotted() 疑似要素を使うと、シャドースタイルの内部から投影された子要素にスタイルを適用できます。ただし、対象になるのは最上位のスロット要素だけです。

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

slotchange イベント

スロットに割り当てられたノードが変わると、スロットは slotchange イベントを発生させます。ユーザーが投影されたコンテンツを追加または削除したときに反応するには、このイベントを監視します。

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

テンプレートとスロットの組み合わせ

テンプレートは構造を 1 回定義し、スロットは利用者が独自のコンテンツを注入できるようにして、その構造に柔軟性を持たせます。両者を組み合わせることで、整理された再利用可能でカスタマイズ可能な Web Components を実現できます。

簡単な確認

テンプレートとスロットについて、理解度を確認しましょう。

まとめ

テンプレートとスロットについて学びました。

<template> には、.content に不活性で再利用可能なマークアップを格納します。
挿入する前に cloneNode(true) で複製します。
<slot> で Light DOM をシャドーツリーに投影します。
名前付きスロットでは、name と子要素の slot 属性を使用します。
::slotted() で投影されたノードにスタイルを適用し、slotchange で更新に反応します。

Web Components を完了しました。次は Intersection Observer API です。

よくある質問

「テンプレートとスロット」レッスンは無料ですか？

はい。「テンプレートとスロット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「テンプレートとスロット」で何を学びますか？

template と slot でコンポーネントを組み立てます。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「テンプレートとスロット」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る