mcpField
D
dom-hierarchy

dom-hierarchy

github.com/marius-townhouse開発644 回インストール38 週間前に更新
リポジトリ

dom-hierarchy について

ブラウザーの DOM API を扱う TypeScript 開発者向けのスキルです。DOM の型階層を説明し、安全で明確なコードのために最も具体的な型を使う方法を示します。

主な機能

  1. 01DOM 型階層の解説
  2. 02要素参照に具体的な型を指定
  3. 03DOM イベントとユーティリティの型付け

活用シーン

  1. 01HTML の入力欄やボタンの型付け
  2. 02DOM ユーティリティの作成
  3. 03DOM イベントの処理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/marius-townhouse/effective-typescript-skills --skill dom-hierarchy

インストール後、Claude Code で/dom-hierarchyを入力して読み込まれたか確認します。

詳細

DOM の階層を理解する

概要

TypeScript の DOM 型は、ブラウザーの DOM 階層を正確にモデル化しています。この階層（Element が Node を継承し、HTMLElement が Element を継承するなど）を理解すると、正しい DOM コードを書けるようになります。より優れた自動補完と型安全性のために、できるだけ具体的な型を使用してください。

このスキルを使う場面

  • DOM API を操作するとき
  • 要素の参照に型を指定するとき
  • DOM ユーティリティを作成するとき
  • DOM イベントを処理するとき
  • DOM を操作するとき

絶対的なルール

できるだけ具体的な DOM 型を使用してください。HTML 要素には HTMLElement、入力要素には HTMLInputElement などを使います。

DOM の型階層

EventTarget
  └── Node
       └── Element
            └── HTMLElement
            │    └── HTMLInputElement
            │    └── HTMLButtonElement
            │    └── etc.
            └── SVGElement

例

// BAD: Too general
const el: Element = document.getElementById('input');
el.value; // Error: Property 'value' doesn't exist on Element

// GOOD: Specific type
const input = document.getElementById('input') as HTMLInputElement;
input.value; // OK - value exists on HTMLInputElement

// Even better: Use querySelector with type parameter
const button = document.querySelector<HTMLButtonElement>('button.submit');
button?.disabled; // Typed correctly

参考文献

  • Dan Vanderkam 著『Effective TypeScript』第 2 版
  • 項目 75：DOM の階層を理解する

コメント

Markdown 対応