HTML Academy · レッスン

customElements.defineで要素を定義する

Q: 「customElements.defineで要素を定義する」で何を学びますか？

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

ブラウザーにカスタム要素クラスを登録します

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

カスタム要素とは

カスタム要素を使うと、JavaScriptクラスに紐付いた独自のHTMLタグを作成できます。定義すると、<my-card> は組み込み要素と同じように動作します。HTMLに記述し、検索し、スタイルを適用し、スクリプトから操作でき、フレームワーク内でも変更せずに使用できます。

ハイフンが必要な理由

すべてのカスタム要素名には、少なくとも1つのハイフンを含める必要があります。例: user-avatar、app-button、my-card。ハイフンによってカスタム要素と現在および将来の組み込みHTMLタグを区別でき、この規則は仕様で強制されています。

クラスを定義する

カスタム要素は、HTMLElement（または組み込み要素のサブクラス）を継承するクラスです。クラスにはコンストラクターとライフサイクルコールバックを宣言できます。クラスのパブリックプロパティとメソッドが、その要素のスクリプト用インターフェースになります。

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.textContent = "Hello from MyCard";
  }
}

defineで登録する

customElements.define("my-card", MyCard) は、クラスをタグ名に紐付けて登録します。登録後は、ドキュメント内にすでに存在する <my-card> と、今後追加されるすべての <my-card> が、そのクラスのインスタンスへアップグレードされます。

super()は必須

コンストラクターでは、this に触れる前に、最初の文として super() を呼び出す必要があります。super() を省略すると、「Failed to construct 'HTMLElement'」というエラーが発生します。これは標準的なJavaScriptクラスのコンストラクター規則そのものとして扱ってください。

コンストラクターでDOMを読み取らない

コンストラクターでは要素の属性や子要素を読み取れません。構築時点ではまだ解析されていない可能性があるためです。DOMに触れる初期化処理は、要素がドキュメントに追加された後にだけ実行される connectedCallback に移してください。

登録は永続的

1つのページで要素名を登録できるのは1回だけです。同じ名前を再定義すると NotSupportedError が発生します。開発中に変更をテストする場合はページを再読み込みし、本番環境では各コンポーネントを起動時に1回だけ登録してください。

ポリフィル

カスタム要素は、すべての最新ブラウザーに組み込まれています。非常に古いブラウザー（現在ではほとんど使われていません）向けには、webcomponents.js ポリフィルがフォールバックを提供します。新しいプロジェクトではネイティブ実装を配信し、ポリフィルを完全に省略できます。

定義状態を確認する

customElements.get("my-card") は、定義済みの場合はクラスを返し、それ以外の場合は undefined を返します。customElements.whenDefined("my-card") は、要素が登録されると解決する promise を返します。後から読み込まれる定義を待つ必要があるコードで便利です。

customElements.whenDefined("my-card").then((Class) => {
  console.log("MyCard is ready");
});

要素を使用する

定義後は組み込みタグとまったく同じように要素を使用できます。HTMLに (<my-card></my-card>) と記述する、document.createElement("my-card") で作成する、または new MyCard() でインスタンス化して挿入する方法があります。どの方法でも、同じアップグレード済みインスタンスが生成されます。

命名規則

同じページ上の他のライブラリとの衝突を避けるため、カスタム要素にはプロジェクト名や会社名を接頭辞として付けてください（cd-card、app-modal）。Webコンポーネントのエコシステムは一元管理されていません。ページ上の誰でも任意の名前を登録でき、最初の登録が有効になります。

理解度チェック

すべてのカスタム要素名にハイフンを含める必要があるのはなぜでしょうか。

まとめ

カスタム要素は HTMLElement を継承するJavaScriptクラスであり、名前にハイフンを含めたうえで customElements.define("name", Class) によって登録します。コンストラクターでは最初に super() を呼び出し、DOMを読み取ってはいけません。DOMに関する処理は connectedCallback に遅延させてください。定義済みの要素は、どこでも組み込みタグとまったく同じように動作します。

よくある質問

「customElements.defineで要素を定義する」レッスンは無料ですか？

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

「customElements.defineで要素を定義する」で何を学びますか？

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

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

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

「customElements.defineで要素を定義する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← HTML Academyに戻る