もう迷わない！JavaScriptでリストを自由自在に操る魔法の呪文【DOM操作入門】

Webサイトでよく見かける「項目が並んだリスト」ってありますよね？
例えば、商品の一覧や、ブログ記事の目次、やることリストなんか、本当にたくさん使われています。
普段はHTMLで決まった内容を表示しているけれど、「あれ？もっと動的にリストの中身を変えられないかな？」とか「ユーザーの操作に合わせて項目を追加したり、消したりしたいんだけど…」なんて思ったことはありませんか？

そう、まさにその「動的にリストを操る」のが、今回のお話のテーマです！
JavaScriptを使えば、あなたのWebサイトのリストは、まるで生きているかのように、自由自在に形を変えることができるようになります。

「なんか難しそう…」と感じたあなた、大丈夫ですよ！
今回は、Web制作や開発を始めたばかりの皆さんでも、つまずくことなく理解できるように、身近な例え話を交えながら、優しく丁寧に解説していきます。一緒に、リスト操作の魔法を習得してみましょう！

リストってなんだっけ？（軽く復習してみましょう！）

まずはおさらいです。HTMLでリストを作るには、主に以下のタグを使いましたよね。

• `
  `（Unordered List）：順序のないリスト。箇条書きによく使います。
  • `
    `（Ordered List）：順序のあるリスト。番号付きリストですね。
    1. `
    2. `（List Item）：リストの各項目。`
       `や`
       `の子要素として使います。

       例えば、こんな感じ。

       • 牛乳
       • 卵
       • パン
       1. 朝食を食べる
       2. 仕事に取り掛かる
       3. お昼休憩

       これらのリストは、HTMLに書かれた内容がそのまま表示されます。でも、もし「牛乳」を買い忘れて、後から「チョコレート」を追加したくなったら？「パン」はもう買ったから消したいな、と思ったら？

       そんな時にJavaScriptの出番です！

       JavaScriptでリストを「作り出す」魔法：`createElement()` と `appendChild()`

       まずは、リストに新しい項目を追加する方法から見ていきましょう。
       JavaScriptで新しいHTML要素を作り、それを既存のリストにくっつける、という流れになります。

       1. 新しい要素を「作り出す」：`document.createElement()`

       JavaScriptで新しいHTML要素を作るには、`document.createElement()`という魔法の呪文を使います。
       これは「はい、新しい要素を作りますよ！」と宣言するようなものです。

       例えるなら、「新しいお皿を用意する」ようなイメージです。まだ何も盛られていない、空のお皿ですね。

       // 新しいリストアイテム（

    3. ）要素を作ってみましょう
       const newItem = document.createElement(‘li’);
       console.log(newItem); // 結果:

    (まだ空っぽの

    5. 要素ができました)

       この時点では、新しい`

    6. `要素はメモリの中に存在しているだけで、まだWebページには表示されていません。
       

       2. 要素に「中身を入れる」：`textContent` や `innerHTML`

       作ったお皿に料理を盛るように、`

    7. `要素にも表示したいテキストを設定します。

       // 作った

    8. 要素にテキストを設定してみましょう
       newItem.textContent = ‘新しいアイテム’;
       // または、HTMLを含めたい場合は innerHTML を使います（今回はテキストのみでOK！）
       // newItem.innerHTML = ‘新しいアイテム‘;
       console.log(newItem); // 結果:

    9. 新しいアイテム

    (中身が入りましたね！)

    3. リストに「くっつける」：`appendChild()`

    最後に、作った`

    10. `要素を、表示したい`
        `や`
        `の「子要素」として追加します。この時に使うのが`appendChild()`です。

        例えるなら、「用意したお皿に料理を盛り付けて、食卓に出す」ようなイメージです。これで初めて、Webページに表示されるようになります。

        どのリストにくっつけるかを指定するために、まずはそのリスト要素（親要素）を取得する必要があります。

        // まずは、HTMLにある特定のリスト要素を取得します
        // 例えば、idが “my-list” の

        要素を取得する場合
        const myList = document.getElementById(‘my-list’);

        // そして、作ったnewItemをmyListの最後に追加してみましょう
        myList.appendChild(newItem);

        これで、`myList`の一番最後に「新しいアイテム」という項目が追加されました！

        実際に動かしてみましょう！

        それでは、これらの魔法を組み合わせて、ボタンを押すとリストに項目が追加されるシンプルな機能を作ってみましょう。

        HTML:

        
        
        
        
        
        

        
        

        お買い物リスト

        • 牛乳
        • 卵

        項目を追加する

        
        
        

        JavaScript (`script.js`):

        // HTMLからリスト要素とボタン要素を取得します
        const shoppingList = document.getElementById(‘shopping-list’);
        const addButton = document.getElementById(‘add-item-button’);

        // 何番目の項目を追加するかを数えるための変数
        let itemCounter = 1;

        // ボタンがクリックされた時の処理を設定します
        addButton.addEventListener(‘click’, () => {
        // 1. 新しい

        • 要素を作成します（空のお皿を用意するイメージ）
          const newItem = document.createElement(‘li’);

          // 2. 作成した

        • 要素にテキストを設定します（お皿に料理を盛るイメージ）
          newItem.textContent = `新しいお菓子 ${itemCounter}`;

          // 3. リストの最後に追加します（食卓に出すイメージ）
          shoppingList.appendChild(newItem);

          // 次に追加する項目名を変更するためにカウンターを増やします
          itemCounter++;
          });

          このHTMLファイルとJavaScriptファイルを同じフォルダに保存してブラウザで開いてみてください。「項目を追加する」ボタンを押すたびに、新しいお菓子がリストの最後に追加されていきますよね！感動的です！

          リストから「消し去る」魔法：`removeChild()`

          追加した項目は、もちろん削除することもできます。不要になった項目をリストから取り除くには、`removeChild()`という魔法を使います。

          これは例えるなら、「食べ終わったお皿を片付ける」ようなイメージです。

          `appendChild()`と同じように、削除したい要素（子要素）が、どのリスト（親要素）の子どもなのかを知っている必要があります。

          // まずは、HTMLからリスト要素を取得します
          const myList = document.getElementById(‘my-list’);

          // myListの最初の子要素（一番上の項目）を削除したい場合
          if (myList.firstElementChild) { // リストが空でないか確認
          myList.removeChild(myList.firstElementChild);
          }

          // myListの最後の子要素（一番下の項目）を削除したい場合
          if (myList.lastElementChild) { // リストが空でないか確認
          myList.removeChild(myList.lastElementChild);
          }

          ポイントは、親要素に対して`removeChild()`を呼び出し、引数に削除したい子要素を指定するという点です。

          実際に動かしてみましょう！

          今度は、リストの項目をクリックすると、その項目が削除されるようにしてみましょう。

          HTML: (先ほどのHTMLを少し変更します)

          
          
          
          
          
          

          
          

          今日のタスクリスト

          クリックするとタスクが完了（削除）します。

          • 牛乳を買う
          • ブログ記事を書く
          • JavaScriptの勉強

          
          
          

          JavaScript (`script.js`):

          // HTMLからタスクリスト要素を取得します
          const taskList = document.getElementById(‘task-list’);

          // リスト内のどこかがクリックされた時に動くイベントリスナーを設定します
          taskList.addEventListener(‘click’, (event) => {
          // クリックされた要素が

        • 要素かどうかを確認します
          // event.target は実際にクリックされた要素を指します
          if (event.target.tagName === ‘LI’) {
          // クリックされた

        • 要素を親要素（
          ）から削除します
          // event.target.parentNode はクリックされた
          • の親要素（今回の場合は
            ）を指します
            event.target.parentNode.removeChild(event.target);
            }
            });

            このコードを実行すると、リストの項目をクリックするたびに、その項目がスッと消えていきます。まるで魔法みたいですよね！

            リストの途中に「差し込む」魔法：`insertBefore()`

            「リストの一番最後に追加するだけじゃなくて、特定の項目の前に差し込みたいな…」
            そんな願いを叶えてくれるのが、`insertBefore()`です。

            これは例えるなら、「行列の途中に割り込む」ようなイメージです。
            「この人の前に並ばせてください！」と指定するのと同じですね。

            `insertBefore()`を使うには、以下の2つの情報が必要です。

            1. 挿入したい新しい要素（新しいお皿）
            2. その新しい要素を「どの要素の前に」挿入したいのか（割り込みたい人の情報）

            そして、これも`appendChild()`や`removeChild()`と同じく、親要素に対して呼び出します。

            // 1. 親要素（リスト全体）を取得します
            const myList = document.getElementById(‘my-list’);

            // 2. 新しい

            • 要素を作成し、中身を設定します
              const newLi = document.createElement(‘li’);
              newLi.textContent = ‘新しい真ん中のアイテム’;

              // 3. どこに挿入するか、目印になる要素（「この人の前」となる要素）を取得します
              // 例えば、リストの2番目の要素の前に挿入したい場合
              const targetLi = myList.children[1]; // children[1] は2番目の子要素を指します (0から始まるので)

              // 4. insertBefore()を使って、新しい要素を差し込みます
              // 第一引数に「挿入したい要素」、第二引数に「その要素の前に挿入したい目印の要素」
              myList.insertBefore(newLi, targetLi);

              もし、`insertBefore()`の第二引数に`null`を指定すると、`appendChild()`と同じようにリストの最後に挿入されます。これは豆知識として覚えておくと便利ですよ！

              実際に動かしてみましょう！

              ボタンを押すと、リストの特定の場所に新しい項目が挿入されるデモです。

              HTML:

              
              
              
              
              
              

              
              

              料理のレシピ

              • 材料を準備する
              • 野菜を切る
              • 炒める
              • 味付けをする
              • 盛り付ける

              「炒める」の前に「煮込む」を追加！

              
              
              

              JavaScript (`script.js`):

              // HTMLからリスト要素とボタン要素を取得します
              const recipeSteps = document.getElementById(‘recipe-steps’);
              const insertButton = document.getElementById(‘insert-step-button’);

              // ボタンがクリックされた時の処理を設定します
              insertButton.addEventListener(‘click’, () => {
              // 1. 新しい

            • 要素を作成し、中身を設定します
              const newStep = document.createElement(‘li’);
              newStep.textContent = ‘煮込む’;

              // 2. 「炒める」というテキストを持つ

            • 要素を探します
              // childrenプロパティは、子要素のHTMLCollection（配列のようなもの）を返します
              let targetStep = null;
              for (const step of recipeSteps.children) {
              if (step.textContent === ‘炒める’) {
              targetStep = step;
              break; // 見つかったらループを抜けます
              }
              }

              // 3. もし「炒める」が見つかったら、その前に新しいステップを挿入します
              if (targetStep) {
              recipeSteps.insertBefore(newStep, targetStep);
              // ボタンを無効化して、何度も追加されないようにします
              insertButton.disabled = true;
              insertButton.textContent = ‘追加済み！’;
              } else {
              alert(‘「炒める」のステップが見つかりませんでした！’);
              }
              });

              「炒める」の前に「煮込む」というステップが追加されましたね！これであなたのレシピも自由自在です！

              `dl`, `dt`, `dd` でも同じようにできるの？

              ここまで`

              `や`
              `を例に解説してきましたが、HTMLの記述リストである`

              `（Description List）、`

              `（Description Term）、`

              `（Description Details）でも、基本的な考え方は同じです！

              `createElement(‘dt’)`で用語を作り、`createElement(‘dd’)`で説明を作り、それらを`

              `要素に`appendChild()`や`insertBefore()`で追加していけばOKです。

              例えば、用語と説明のペアを動的に追加したい場合、以下のように要素を作成して追加します。

              const myDl = document.getElementById(‘my-description-list’);

              const newDt = document.createElement(‘dt’);
              newDt.textContent = ‘新しい用語’;

              const newDd = document.createElement(‘dd’);
              newDd.textContent = ‘新しい説明です。’;

              myDl.appendChild(newDt);
              myDl.appendChild(newDd);

              このように、今回学んだ`createElement()`, `appendChild()`, `removeChild()`, `insertBefore()`は、さまざまなHTML要素の動的な操作に応用できる、とても強力な魔法なんですよ！

              ちょっと待って！パフォーマンスって何？（賢いテクニック）

              ここまでで、リストを動的に操作する方法はバマスターできたはずです！素晴らしいですね！
              でも、JavaScriptでWebページを操作するDOM操作には、ちょっとだけ「賢い使い方」があるんです。

              Webページは、あなたがJavaScriptで要素を追加したり削除したりするたびに、「見た目を再計算して、描き直す」という処理を行っています。この処理は、実は結構な手間がかかるんです。

              例えるなら、「食卓にお皿を一つ一つ出しては片付け、出しては片付け…を繰り返す」ようなもの。これって効率が悪いですよね？

              もし、たくさんの項目を一気にリストに追加したい場合、一つずつ`appendChild()`を繰り返すと、その度にWebページの再描画が何度も発生してしまい、処理が遅くなったり、画面がカクついたりする原因になります。

              賢いテクニック：`DocumentFragment`を使ってみよう！

              そこで登場するのが、`DocumentFragment`という、ちょっと聞き慣れないけれどとっても便利な要素です！
              これは例えるなら、「大きなお弁当箱」のようなものです。

              1. まず、このお弁当箱（`DocumentFragment`）をJavaScriptで作ります。
              2. そのお弁当箱の中に、追加したい料理（新しい`

              `要素）をどんどん詰めていきます。この時点では、まだ食卓（Webページ）には出していません。
              3. お弁当箱に全ての料理を詰め終わったら、最後にそのお弁当箱ごと食卓（Webページ）に出します。

              こうすることで、Webページの再描画は「お弁当箱を出す」というたった1回だけで済むので、処理が格段に速くなるんです！

              const shoppingList = document.getElementById(‘shopping-list’);

              // 1. 大きなお弁当箱（DocumentFragment）を作成します
              const fragment = document.createDocumentFragment();

              // 2. お弁当箱の中に、新しいお菓子を10個詰めてみましょう
              for (let i = 1; i <= 10; i++) { const newItem = document.createElement('li'); newItem.textContent = `まとめて追加したお菓子 ${i}`; // お弁当箱に詰めます（Webページにはまだ表示されない） fragment.appendChild(newItem); } // 3. 全ての料理を詰め終わったら、お弁当箱ごと食卓に出します // これで、Webページの再描画は1回で済みます shoppingList.appendChild(fragment); どうですか？`DocumentFragment`を使うと、スマートにたくさんの要素を追加できるのが分かりますよね。 パフォーマンスは、ユーザー体験に直結する重要な要素なので、ぜひこのテクニックも覚えておいてくださいね！

              まとめと次のステップ！

              お疲れ様でした！今回は、JavaScriptでHTMLのリストを動的に操作するための、基本的ながらも強力な魔法の呪文たちを学びました。

              • `document.createElement()`: 新しい要素を作り出す
              • `element.appendChild()`: 要素の最後に子要素を追加する
              • `element.removeChild()`: 子要素を削除する
              • `element.insertBefore()`: 特定の子要素の前に新しい要素を挿入する
              • `document.createDocumentFragment()`: 多数のDOM操作を効率化する（パフォーマンス改善）

              これらの知識があれば、あなたのWebサイトのリストは、ユーザーの操作やサーバーからのデータによって、生き生きと変化するようになるはずです。

              「Webサイトの動的な動きって、こんな風に作られてるんだ！」と、Web開発の面白さを感じていただけたなら嬉しいです。

              さらにステップアップしたいあなたは、

              • イベントリスナーをもっと深く学ぶ（クリック以外の操作でどう動かすか？）
              • Ajax/Fetch APIを使って、サーバーからデータを取得し、そのデータでリストを生成する
              • ReactやVue.jsといったフレームワークが、どのようにDOM操作を効率化しているのか調べてみる

              といったテーマに挑戦してみるのも良いでしょう。

              これからも、一つずつ着実に知識を増やして、素晴らしいWebサイトをたくさん作ってくださいね！
              あなたのWeb制作・開発ライフを、心から応援しています！