JavaScript Academy · レッスン

カスタム要素を定義する

Q: 「カスタム要素を定義する」で何を学びますか？

customElements API で要素を登録します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

customElements API で要素を登録します。

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

カスタム要素とは

カスタム要素を使うと、JavaScriptクラスに基づく独自のHTMLタグを定義できます。divを継ぎ合わせるのではなく、<user-card>のような再利用可能で自己完結したコンポーネントを作成できます。

Web Components標準の一部です。
フレームワークを必要とせず、ブラウザーでネイティブに動作します。
カスタム要素の名前にはハイフンを含める必要があります（例：my-button）。

customElementsレジストリ

ブラウザーはwindow.customElementsにグローバルレジストリを公開しています。customElements.define(name, constructor)を呼び出して新しいタグを登録します。

登録されると、ドキュメント内の一致するすべてのタグがクラスのインスタンスにアップグレードされます。

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElementを拡張する

カスタム要素はextends HTMLElementするクラスです。基底クラスによって、標準的なDOMの機能（属性、イベント、スタイル）がすべて要素に備わります。

要素を正しく初期化するため、コンストラクターでは必ず最初にsuper()を呼び出してください。

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

コンテンツを描画する

要素の内部では、this.innerHTMLを設定するか、DOMメソッドを使ってコンテンツを構築できます。要素がページに接続されたときに描画するのが一般的なパターンです。

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

HTMLで要素を使う

登録後は、組み込み要素と同じようにタグを使えます。マークアップに直接配置することも、document.createElementで作成することもできます。

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

コンストラクターのルール

コンストラクターはインスタンスが作成されたときに実行されます。いくつかの厳格なルールがあります。

super()を最初に呼び出します。
ここで属性や子要素を調べたり追加したりしないでください。
DOM操作はconnectedCallbackまで先延ばしにします。

コンストラクターでは、初期状態の設定とイベントリスナーの登録だけを行います。

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

動作の追加

要素は実際の DOM ノードなので、イベントリスナーを登録し、操作に応じて内容を更新できます。

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

ハイフンの要件

カスタム要素の名前にはハイフンを含める必要があります。これにより、現在または将来の組み込み HTML 要素と名前が衝突することはありません。

my-widget は有効です。
mywidget は無効で、エラーが発生します。
名前では大文字と小文字は区別されませんが、小文字で記述します。

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined と get

便利なレジストリメソッドが 2 つあります。

customElements.get(name) はコンストラクターを返します。登録されていない場合は undefined を返します。
customElements.whenDefined(name) は、要素が定義されると解決する Promise を返します。

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

一度だけ定義する

各名前は 1 回しか登録できません。すでに使用されている名前を指定して define を呼び出すと、エラーが発生します。共有モジュールでは、二重登録を防止してください。

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

カスタム要素が重要な理由

カスタム要素を使うと、フレームワークに依存せず、カプセル化された再利用可能な UI を作成できます。カスタム要素には次の特徴があります。

どの技術スタックでもコンポーネントの再利用方法を標準化できます。
ブラウザー独自のライフサイクルと統合できます。
Shadow DOM やテンプレート（後で説明します）と自然に組み合わせられます。

簡単な確認

カスタム要素の定義について、理解度を確認しましょう。

まとめ

カスタム要素の定義方法を学びました。

customElements.define(name, class) でタグを登録します。
クラスは extends HTMLElement を使い、最初に super() を呼び出します。
名前にはハイフンを含める必要があります。
コンテンツはコンストラクターではなく、connectedCallback でレンダリングします。
get と whenDefined を使うと、登録状態を確認できます。

次は、カスタム要素の完全なライフサイクルについて見ていきます。

よくある質問

「カスタム要素を定義する」レッスンは無料ですか？

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

「カスタム要素を定義する」で何を学びますか？

customElements API で要素を登録します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「カスタム要素を定義する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← JavaScript Academyに戻る