`appendChild()`でDOMツリーに組み込む

`parentNode.appendChild()`は、指定された要素の末尾に、作成した要素を追加するメソッドだ。ここで初めて、新しく作った要素がブラウザの表示に影響を与えるようになる。

// 追加先の

要素を取得
const myList = document.getElementById(‘myList’);
// 新しいアイテムをリストの末尾に追加
myList.appendChild(newItem);

サンプルコード：ULリストへのアイテム追加

この基本を組み合わせると、以下のように簡単にリストアイテムを追加できる。











動的リスト操作の基本

• 既存アイテム 1
• 既存アイテム 2

新しいアイテムを追加





ブラウザの処理の裏側：DOMツリーとレンダリング

ここで少し、ブラウザが裏側で何をしているのかを覗いてみよう。

1. DOMツリーの更新: `appendChild()`が呼ばれると、ブラウザの内部的なDOMツリー構造が更新される。これは単なるデータ構造の変更だ。
2. リフロー（Reflow / Layout）: DOMツリーが変更され、要素のサイズや位置に影響が出る可能性がある場合、ブラウザはレイアウト計算を再度行う。これを「リフロー」と呼ぶ。例えば、新しい要素が追加されたことで、他の要素の配置がずれる可能性があるよね。
3. リペイント（Repaint / Paint）: リフローの後、または要素の視覚的なプロパティ（色、背景など）だけが変更された場合、ブラウザは画面にその変更を描画し直す。これを「リペイント」と呼ぶ。

これらの処理は、特にリフローはコストが高い。後ほど「パフォーマンスの最適化」のセクションで詳しく触れるが、DOM操作の回数や種類によっては、これがWebサイトの表示速度に大きく影響するんだ。

既存要素の削除：`removeChild`

次に、リストから特定のアイテムを削除する方法だ。これには`parentNode.removeChild()`を使う。

`removeChild()`は、親要素から子要素を削除するメソッドだ。削除したい子要素とその親要素が分かっていれば、簡単に削除できる。

// 削除したい

• 要素を取得（例: 最初のアイテム）
  const firstItem = document.querySelector(‘#myList li’);
  // その親要素（
  ）を取得
  const parentList = firstItem.parentNode;
  // 親要素から子要素を削除
  parentList.removeChild(firstItem);

  サンプルコード：ULリストからのアイテム削除

  ユーザーがクリックしたらそのアイテムを削除する、といった実用的な例を見てみよう。

  
  
  
  
  
  

  
  

  動的リスト操作：削除

  • クリックして削除 1
  • クリックして削除 2
  • クリックして削除 3

  全てのアイテムを削除

  
  
  

  補足: 上のコード例では`item.dataset.hasClickListener`を使ってイベントリスナーの重複登録を防いでいる。これはこれで動くが、リストアイテムが大量にある場合や頻繁に追加・削除される場合は、各アイテムに個別にイベントリスナーを設定するのは効率が悪い。「イベントデリゲーション」というテクニックを使うと、親要素一つにイベントリスナーを設定するだけで済む。これは後述するパフォーマンス最適化のセクションで解説するよ。

  リストの途中に賢く挿入：`insertBefore`

  `appendChild()`は常に末尾に追加するが、「特定の位置に要素を挿入したい」というニーズも当然出てくる。例えば、TODOリストで優先度の高いタスクを先頭に追加したい、なんて場面だね。そんな時に使うのが`parentNode.insertBefore()`メソッドだ。

  `insertBefore()`は2つの引数を取る。

  1. `newNode`: 挿入したい新しい要素。
  2. `referenceNode`: 挿入したい位置の「直前にある要素」。新しい要素はこの`referenceNode`の前に挿入される。

  もし`referenceNode`が`null`の場合、`insertBefore()`は`appendChild()`と同じ動作になり、末尾に追加される。

  // 新しい

  • 要素を作成
    const newItem = document.createElement(‘li’);
    newItem.textContent = ‘途中に挿入されたアイテム’;

    // 挿入先の

    要素を取得
    const myList = document.getElementById(‘myList’);
    // 参照要素（例: 2番目のアイテムの前に挿入したい場合）
    const secondItem = myList.children[1]; // childrenプロパティは子要素のHTMLCollectionを返す

    // secondItemの前にnewItemを挿入
    myList.insertBefore(newItem, secondItem);

    サンプルコード：ULリストへの特定位置への挿入

    
    
    
    
    
    

    
    

    動的リスト操作：挿入

    • 最初のアイテム
    • 二番目のアイテム
    • 三番目のアイテム

    2番目の前に挿入
    先頭に挿入
    末尾に挿入 (appendChildと同じ)

    
    
    

    記述リスト（dl）の動的操作も忘れずに

    `ul`や`ol`だけでなく、用語とその定義を表現する`dl`（記述リスト）も動的に操作する機会がある。`dl`は`dt`（用語）と`dd`（定義）のペアで構成されるため、これらをセットで操作することが多い。

    基本的な考え方は`ul`/`li`と同じだ。`createElement`で`dt`と`dd`を作成し、`dl`の子要素として追加していく。

    
    
    
    
    
    

    
    

    記述リスト (dl) の動的操作

    HTML

    HyperText Markup Languageの略。Webページの構造を定義します。

    CSS

    Cascading Style Sheetsの略。Webページの見た目を装飾します。

    新しい用語と定義を追加

    
    
    

    `dl`要素の子要素は`dt`と`dd`の他に、`div`を子要素として持ち、その`div`の中に`dt`と`dd`を入れることもできる（ただし、これはHTML5以降の仕様で、以前は直接`dt`と`dd`を子に持つ必要があった）。複数の定義を一つの用語に関連付ける場合などに便利だ。

    パフォーマンスの落とし穴と最適化戦略

    さて、ここからが本題だ。JavaScriptでDOMを操作する際、多くのエンジニアが陥りがちな落とし穴がある。そう、「パフォーマンス」だ。リストアイテムを一つ追加するくらいなら大した問題にはならない。でもね、これが100個、1000個となった時、あるいはユーザーのアクションごとに頻繁にDOMが書き換わるようなケースでは、あっという間にブラウザの描画がガタガタになってしまうんだ。

    リフローとリペイントのコストを意識する

    先ほど少し触れた「リフロー」と「リペイント」。これらはブラウザにとって非常にコストの高い処理なんだ。

    • リフロー (Reflow / Layout): 要素の形状や配置が変更されたときに発生。ツリー内の他の要素にも影響を及ぼす可能性があり、その影響範囲に応じて再計算の負荷が変わる。
    • リペイント (Repaint / Paint): 要素の視覚的なスタイル（色、背景、影など）だけが変更され、レイアウトには影響しない場合に発生。リフローよりは軽い。

    頻繁なDOM操作は、そのたびにリフローやリペイントを引き起こし、Webサイトの応答性を著しく低下させる可能性がある。特にループ内で大量のDOM操作を行うのは、最も避けるべきアンチパターンの一つだ。

    救世主：`DocumentFragment`を活用する

    ここで頼りになるのが、`DocumentFragment`という影の立役者だ。これは、DOMツリーの一部を一時的にメモリ上で構築するための軽量なコンテナで、実際のDOMツリーには属さない。

    つまり、このフラグメントの中でいくら要素を追加・削除・変更しても、ブラウザはリフローやリペイントを発生させないんだ。そして、最後に`DocumentFragment`を実際のDOMツリーに`appendChild()`で追加すると、フラグメント内の全ての要素が一度にDOMツリーに組み込まれる。結果として、一回のリフローとリペイントで済むため、劇的にパフォーマンスが向上する。

    サンプルコード：`DocumentFragment`による最適化

    例えば、1000個のリストアイテムを一気に追加するケースを考えてみよう。

    
    
    
    
    
    

    
    

    DocumentFragmentによるDOM操作の最適化

    1000個のリストアイテムを追加する際のパフォーマンスを比較します。

    DocumentFragmentで1000個追加
    直接DOMに1000個追加 (非推奨)
    リストをクリア

    処理時間: — ms

    
    
    

    このコードを実行して比較すると、`DocumentFragment`を使った方が圧倒的に速いことが体感できるはずだ。特にアイテム数が増えれば増えるほど、その差は顕著になる。現場では、特に検索結果の表示や無限スクロールのような機能で、このテクニックが非常に役立つはずだ。

    イベントデリゲーション（イベント委譲）

    リストアイテムが多数あり、それぞれにクリックイベントなどを設定したい場合、各`li`要素に個別にイベントリスナーを追加するのは非効率だ。これもパフォーマンスのボトルネックになる可能性がある。

    そこで「イベントデリゲーション」の出番だ。これは、子要素で発生したイベントが親要素に伝播する（イベントバブリング）性質を利用し、親要素一つにイベントリスナーを設定し、どの特定の子要素でイベントが発生したかを判定するテクニックだ。

    
    
    
    
    
    

    
    

    イベントデリゲーションの活用

    リストアイテムをクリックすると削除されます。

    • アイテム 1
    • アイテム 2
    • アイテム 3

    新しいアイテムを追加

    
    
    

    この方法なら、新しいリストアイテムが追加されても、イベントリスナーを再設定する必要がない。リスナーは常に親要素に一つだけ存在するため、メモリ効率も良く、パフォーマンスが向上する。

    実践的なTIPSとベストプラクティス

    ここまでは基本的なDOM操作とパフォーマンス最適化について話してきたが、さらに現場で役立つ実践的なTIPSをいくつか紹介しよう。

    データとDOMの分離

    モダンなWeb開発では、UIの状態（データ）とそれを表示するDOM構造を明確に分離することが推奨される。つまり、直接DOMをゴリゴリ操作するのではなく、JavaScriptのデータ構造（配列やオブジェクト）を更新し、そのデータに基づいてDOMを「再描画」するアプローチだ。

    例えば、TODOリストの場合。

    // データ（配列）でTODOリストの状態を管理
    let todos = [
    { id: 1, text: '牛乳を買う', completed: false },
    { id: 2, text: 'ブログ記事を書く', completed: true }
    ];

    // このデータを元にDOMを生成・更新する関数
    function renderTodos() {
    const todoListElement = document.getElementById('todoList');
    // まず既存のリストをクリア
    while (todoListElement.firstChild) {
    todoListElement.removeChild(todoListElement.firstChild);
    }

    // DocumentFragmentを使って効率的にDOMを構築
    const fragment = document.createDocumentFragment();
    todos.forEach(todo => {
    const li = document.createElement('li');
    li.textContent = todo.text;
    if (todo.completed) {
    li.style.textDecoration = 'line-through';
    }
    // 他にも削除ボタンなどを追加できる
    fragment.appendChild(li);
    });
    todoListElement.appendChild(fragment);
    }

    // TODOを追加する関数
    function addTodo(text) {
    todos.push({ id: Date.now(), text: text, completed: false });
    renderTodos(); // データを更新したら再描画
    }

    // 初期表示
    renderTodos();

    このようにデータとDOMを分離することで、コードの見通しが良くなり、デバッグもしやすくなる。ReactやVue.jsといったモダンなJavaScriptフレームワークは、この「データ駆動型UI」の考え方を強力にサポートしている。これらのフレームワークを使うと、DOMの直接操作から解放され、より宣言的にUIを記述できるようになるよ。

    アクセシビリティへの配慮

    動的に内容が変化するリストは、視覚障がいを持つユーザーやスクリーンリーダーを利用するユーザーにとって、情報が伝わりにくくなる可能性がある。

    • `aria-live`領域の活用: 重要な情報が動的に追加・変更される場合、その領域に`aria-live="polite"`や`aria-live="assertive"`属性を設定することで、スクリーンリーダーにその変更を自動的に読み上げさせることができる。
    • 適切なセマンティクス: `ul`, `ol`, `dl`といったHTMLのセマンティックな要素を適切に使うことが、アクセシビリティの基本だ。単に見た目だけで`div`を並べるのではなく、意味のある構造を与えるように心がけよう。

    まとめ

    今日の話は、ただのDOM操作のAPI解説に留まらず、その裏側で何が起きているのか、そしてどうすればより洗練されたコードを書けるのか、といった視点も交えてみた。

    • `createElement`, `appendChild`, `removeChild`, `insertBefore`でリストを動的に操作できる。
    • ブラウザはDOM操作のたびに「リフロー」や「リペイント」を行い、これがパフォーマンスに影響する。
    • 大量の要素を操作する際は、`DocumentFragment`を使ってDOMへのアクセス回数を減らすことで、パフォーマンスを劇的に改善できる。
    • 多数の要素にイベントを設定する場合は、`イベントデリゲーション`を活用してメモリ効率とパフォーマンスを向上させよう。
    • データとDOMの分離、そしてアクセシビリティへの配慮も忘れずに。

    DOM操作はフロントエンドの基礎中の基礎でありながら、その奥は深く、パフォーマンスやアクセシビリティといった多岐にわたる側面と密接に絡み合っている。これらの知見を日々の開発に活かして、ユーザーにとって快適で、かつ堅牢なWebアプリケーションを構築していってほしい。

    何か疑問があれば、いつでも聞いてくれ！ 現場からは以上だ！