概要

JavaScriptによるDOM操作は「document.querySelectorで要素を取って、何かする」だけではない。
それは**“ビューとロジックを安全かつ効率的に繋ぐための抽象化された制御構造”**である。

UIの複雑化、再描画の多発、イベントの動的登録が増える中で、直感的で安全なDOMアクセス戦略と、操作の責務分離が求められる。

本稿では、セレクタ戦略、操作の抽象化、イベントの委譲、状態同期などを踏まえたDOM操作設計の原則を解説する。

1. セレクタ設計：依存性を最小限に

const button = document.querySelector('.submit-button');

✅ クラス名はスタイル変更で壊れるリスクあり
✅ 理想は data-* 属性の使用

const button = document.querySelector('[data-action="submit"]');

✅ 明示的に役割が分かる属性を付与することで、設計に意味を持たせる

2. DOM操作の抽象化：ロジックを関数に分離

function setText(el, text) {
  if (el) el.textContent = text;
}

function showError(message) {
  const el = document.querySelector('[data-error]');
  setText(el, message);
}

✅ 再利用可能な関数単位で定義し、操作をロジックから切り離す
✅ DOMの取得 → 操作 → 状態反映の流れを明示

3. 動的要素への対応：イベント委譲の活用

document.addEventListener('click', (e) => {
  if (e.target.matches('[data-action="delete"]')) {
    const id = e.target.dataset.id;
    deleteItem(id);
  }
});

✅ 動的に生成された要素にも対応可能
✅ イベントをルートで拾い、必要な要素だけ処理する構造

4. DOMと状態の同期制御

function toggleVisibility(el, show) {
  el.style.display = show ? 'block' : 'none';
}

function updateStateUI(state) {
  const loader = document.querySelector('[data-loader]');
  toggleVisibility(loader, state.loading);
}

✅ アプリケーション状態とUI状態を明確に同期
✅ display / aria-hidden など、アクセシビリティにも配慮

5. DOMキャッシュとパフォーマンス戦略

const DOM = {
  form: document.querySelector('form'),
  input: document.querySelector('[data-input]'),
  result: document.querySelector('[data-result]')
};

// 再取得せずキャッシュ経由で操作
DOM.result.textContent = 'Done!';

✅ 再取得コストを削減
✅ 大規模UIではDOM参照の統合管理を検討（例：ViewModel）

設計判断フロー

① DOM操作が散らばっていないか？ → 操作関数にまとめる

② セレクタは意味のあるものか？ → クラス名以外の構造で取得する

③ 状態とUIがズレていないか？ → 同期関数を設計する

④ 動的要素への対応はできているか？ → イベント委譲を検討する

⑤ DOM参照の重複取得が頻発していないか？ → キャッシュ構造を設ける

よくあるミスと対策

❌ `.querySelector()` を毎回呼び出してコスト過多

→ ✅ 初期化時に取得 → キャッシュして再利用

❌ クラス名でDOM操作 → スタイル変更で破壊

→ ✅ data-* 属性でセマンティックに管理

❌ 状態更新とUI変更がバラバラに記述されて同期が崩壊

→ ✅ UI変更処理を状態変更トリガーの中に統一する

結語

DOM操作は「要素をいじる手段」ではない。
それは**“構造・意味・状態を一貫した形で反映し、ユーザーインターフェースの信頼性を設計するための制御構造”**である。

セレクタは意味で選び、変更に強い構造へ
操作はロジックから切り離し、責務を明示
状態とDOMを同期させ、UIの整合性を保つ

JavaScriptにおけるDOM設計とは、
“UIをコードとして制御可能にするための構造的戦略”である。