コラム・豆知識
id属性の基本ルールを再確認
HTMLにおけるid属性は、文書内で一意でなければなりません。つまり、同じid値を持つ要素が2つ以上存在してはいけません。
これはDOM操作やスタイル適用、アンカーリンクなどの処理において衝突を引き起こす原因になります。
小規模なファイルでは気付きやすくても、大規模なプロジェクトや動的に生成された要素では見落とされがちなポイントです。
JavaScriptによるバグの温床
DOMの取得にdocument.getElementById()を使用する場合、重複したidが存在すると、最初にマッチした要素しか取得されません。
意図せず異なる要素を操作してしまい、動作不良や予期せぬバグに繋がるリスクがあります。
特にモーダルやタブなどのUIコンポーネントが複数出現する場面では、idの再利用が起こりやすいため、厳密な管理が重要です。
CSSにおける選択ミスを防ぐ
#id名でスタイルを適用している場合、idの重複により複数の要素に同じスタイルがかかってしまう可能性があります。
あるいは、ブラウザによって適用対象が異なるという不安定な状況も発生します。
クラス名の多用と異なり、idはスタイルの特異性（specificity）が非常に高いため、思わぬスタイル競合を招く点にも注意が必要です。
アクセシビリティにも悪影響
ARIA属性（例：aria-labelledby、aria-describedby）はidで特定の要素を参照します。
このとき、参照先のidが重複していると、支援技術が正しいラベル情報を取得できなくなり、アクセシビリティの観点で重大な問題を引き起こすことがあります。
HTMLの構造とIDの一貫性を保つことは、誰にとっても使いやすいWebを実現する基本となります。
idの命名規則と管理のベストプラクティス
プロジェクト内でidの命名ルールを設け、役割や文脈を識別しやすくすることが、重複防止の第一歩です。
たとえば、section-introやform-contactのように接頭語をつけたり、スネークケース・ケバブケースなどで統一することで可読性と保守性が向上します。
また、フロントエンドの自動ビルド環境では、idをユニーク化するスクリプトやLintの導入も有効です。
ツールの仕組み解説
ユーザーが入力欄にHTMLを入れたとき、空欄じゃなければチェックを実行します。
const htmlContent = document.getElementById('htmlInput').value.trim();
空の入力なら解析を中止してメッセージを表示します。意図しない実行を防ぐ安全策です。
🧹 コメントを除外してからIDを抽出HTML内のコメントには分析対象外のコードが含まれることもあるので、まずそれを取り除いてから処理を始めます。
const content = html.replace(//g, '');
コメントの中にあるid="..."を誤って検出しないようにするためです。
次に、すべてのid="...”を正規表現で抽出して、何回出てきたかをカウントします。
const idPattern = /id\s*=\s*["']([^"']+)["']/gi;
このパターンでHTML全体からIDを抽出し、Mapに入れて重複数を数えていきます。
出現回数が2回以上のIDだけを抽出して、新しいMap（duplicates）に入れます。
if (count > 1) { duplicates.set(id, count); }
これで「重複IDだけ」をリストアップできるようになります。
重複IDがなければ「重複はありません」と表示、あればリスト形式でどのIDが何回使われているかを表示します。
resultsDiv.innerHTML = '重複するIDはありません';
これにより、ユーザーがすぐに問題箇所を特定できます。