概要

DOM設計とは「HTMLを操作する」ことではない。
それは**構造・意味・操作・効率を統合する「UIの根幹設計」**である。

JavaScriptによってDOMを生成・制御する際、再描画、構造破壊、イベントの過剰結合といった問題が頻発する。
本稿では、それらを未然に防ぐための責任あるDOM設計戦略を提示する。

1. DOM構築は「意味単位」で行う

function createUserCard(user) {
  const card = document.createElement('div');
  card.className = 'user-card';

  const name = document.createElement('h2');
  name.textContent = user.name;

  const email = document.createElement('p');
  email.textContent = user.email;

  card.append(name, email);
  return card;
}

✅ 「UIパーツ」をコンポーネント関数で定義
✅ DOMの直接生成でも意味単位で分離する

2. 動的要素の責務を「構築・挿入・破棄」に分離

function insertUserList(users) {
  const list = document.createElement('ul');
  for (const user of users) {
    const item = document.createElement('li');
    item.textContent = user.name;
    list.appendChild(item);
  }
  document.querySelector('#container').replaceChildren(list);
}

✅ 「生成」と「挿入」は別関数に → テストしやすくなる
✅ replaceChildren() でフラッシュ的更新に

3. DOMイベント設計との分離

function bindButton(el, callback) {
  el.addEventListener('click', callback);
}

✅ UI構築とイベント登録を分離して設計
✅ 複数イベント登録を構造化できる

function bindEvents(el, events) {
  for (const [type, handler] of Object.entries(events)) {
    el.addEventListener(type, handler);
  }
}

4. パフォーマンス設計：再描画と再検索の最小化

✅ DOMツリー更新はまとめて1回
✅ DocumentFragmentを活用して仮想構築 → 挿入

const frag = document.createDocumentFragment();
for (const data of items) {
  const el = document.createElement('li');
  el.textContent = data;
  frag.appendChild(el);
}
list.appendChild(frag);

5. 意味と構造の分離：データ属性の活用

<button data-user-id="u01">詳細</button>

btn.dataset.userId; // → "u01"

✅ DOMに意味を埋め込むのではなく、data- で分離*
✅ アプリ構造とUI構造の結合を緩やかに保てる

6. DOMの破棄とガーベジ設計

✅ 必ずイベントリスナーを解除する

function destroy(el) {
  el.remove();
}

✅ Webアプリでは DOM残存 + イベント残存 → メモリリークを引き起こす

→ ✅ 「構築」「破棄」「再利用」のライフサイクル関数を分離して設計

設計判断フロー

① そのDOMは意味単位で構成されているか？ → UI部品化へ

② DOMの構築とイベントが混在していないか？ → 分離して責務明確化

③ 再描画を毎回DOMに適用していないか？ → Fragment化 or replaceChildren

④ UIとロジックが結合していないか？ → data-*で分離、ロジックは別層に

⑤ 破棄処理を忘れていないか？ → destroy関数とremoveEventListener

よくあるミスと対策

❌ `innerHTML +=` を多用して毎回再評価・再構築が発生

→ ✅ DOM APIを用いた構築と挿入に分離

❌ 1つの関数でDOM構築・挿入・イベント登録・削除まで一括処理

→ ✅ 責務ごとの分離によりテスト性と再利用性を向上

❌ 破棄したはずのDOMにイベントが残留

→ ✅ removeEventListener + remove() を忘れずに

結語

DOMとは「UIの器」ではない。
それは意味・操作・振る舞いの集合体であり、構造そのものである。

生成は意味単位にし
振る舞いは責務で分離し
表示は一括で最小化し
破棄まで設計する

JavaScriptにおけるDOM設計とは、
“UIの構造を保ち、意味を壊さず、振る舞いを統合する”という設計戦略である。