JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16：DOM操作②

JavaScript JavaScript
スポンサーリンク

Day16 前半のゴール

Day16 では、いよいよ「HTMLをあとから増やす」世界に入ります。
これまでの document.getElementById / textContent は「既にある要素をいじる」だけでしたが、
createElement / appendChild を使うと「新しい要素を自分で生み出して、ページに追加」できます。

前半のゴールはこの2つです。

Day16 前半でつかみたい感覚

createElement＝「新しいDOM要素を“工場”で作る」

appendChild＝「作った要素を“親要素の子どもとして”画面に参加させる」

この2つを理解すると、
「最初は空っぽの領域に、JavaScriptでどんどん要素を増やす」
という、Webアプリらしい動きが一気に広がります。

DOMを「木」としてイメージし直す

既存の要素をいじるだけから「枝を増やす」へ

DOM は「木構造」として表現される、と前に話しました。
今までは、その木の「葉っぱの文字を変える」ことをしていました。

<p id="message">こんにちは</p>

これを JavaScript で書き換えるのは、
「既にある枝の葉っぱを書き換える」イメージです。

const messageElement = document.getElementById("message");
messageElement.textContent = "こんばんは";
JavaScript

createElement / appendChild を使うと、
「新しい枝（要素）を生やして、木にくっつける」ことができます。

createElement とは何か

「タグ名を指定して、新しい要素オブジェクトを作る」

createElement は、document に対してこうお願いする関数です。

「指定したタグ名の要素を、新しく1個作ってください」

const newParagraph = document.createElement("p");
JavaScript

これで、まだどこにも表示されていない
<p> 要素が1つ、メモリ上に生まれます。

この時点では、
画面には何も変化がありません。

「工場で部品を作っただけ」で、
「まだ組み立てていない」状態です。

作った要素に中身をセットする

作った要素は、他の要素と同じように扱えます。

newParagraph.textContent = "これは新しく作られた段落です。";
JavaScript

ここまでで、

<p> 要素を作る
その中の文字を textContent でセットする

というところまで進みました。

でも、まだ画面には出てきません。
「作っただけで、どこにも置いていない」からです。

appendChild とは何か

「親要素の“子ども”として、最後にくっつける」

appendChild は、
「この要素の子どもとして、別の要素を追加してください」
という命令です。

const container = document.getElementById("container");
container.appendChild(newParagraph);
JavaScript

こうすると、

container の「子ども」として newParagraph が追加され、
画面にも表示されるようになります。

流れとしては、

createElement で要素を作る
必要なら textContent や属性を設定する
appendChild で、どこかの親要素にぶら下げる

という三段階です。

createElement ＋ appendChild の基本例

シンプルなサンプル：ボタンを押したら段落を1つ追加

まずは、最小構成の例を見てみます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day16 DOM操作② 前半</title>
  </head>
  <body>
    <h1>メモ追加サンプル</h1>
    <button id="addButton">メモを追加</button>
    <div id="memoContainer"></div>

    <script>
      const addButtonElement = document.getElementById("addButton");
      const memoContainerElement = document.getElementById("memoContainer");

      addButtonElement.addEventListener("click", () => {
        const p = document.createElement("p");
        p.textContent = "新しいメモです。";
        memoContainerElement.appendChild(p);
      });
    </script>
  </body>
</html>

動きとしては、

ボタンを押す
→ p 要素を新しく作る
→ textContent をセットする
→ memoContainer の子どもとして追加する

という流れです。

ここで大事なのは、
「createElement しただけでは画面に出ない」
「appendChild された瞬間に DOM ツリーに参加する」
という感覚です。

追加される場所をイメージする

appendChild は「子どもの一番最後」に追加する

appendChild は、
「その親要素の子どもリストの一番最後」に追加します。

例えば、HTML がこうだったとします。

<div id="list">
  <p>1つ目</p>
  <p>2つ目</p>
</div>

ここに appendChild すると、

const listElement = document.getElementById("list");
const p = document.createElement("p");
p.textContent = "3つ目";
listElement.appendChild(p);
JavaScript

結果として、DOM はこうなります。

<div id="list">
  <p>1つ目</p>
  <p>2つ目</p>
  <p>3つ目</p>
</div>

「どこに追加されるか」がイメージできると、
DOM操作が一気に分かりやすくなります。

createElement と textContent の安全な組み合わせ

ユーザー入力を新しい要素として追加する

少しだけ実用的な例を見てみます。

テキストボックスに入力した内容を、
新しい p 要素としてリストに追加するイメージです。

<input id="memoInput" type="text">
<button id="addButton">追加</button>
<div id="memoContainer"></div>

JavaScript はこう書けます。

const memoInputElement = document.getElementById("memoInput");
const addButtonElement = document.getElementById("addButton");
const memoContainerElement = document.getElementById("memoContainer");

addButtonElement.addEventListener("click", () => {
  const text = memoInputElement.value;

  if (text === "") {
    return;
  }

  const p = document.createElement("p");
  p.textContent = text;
  memoContainerElement.appendChild(p);

  memoInputElement.value = "";
});
JavaScript

ここで重要なのは、
ユーザー入力を textContent に入れている点です。

textContent は「文字として扱う」ため、
ユーザーが <script>...</script> のような文字列を入れても、
それはただの文字として表示され、実行されません。

innerHTML を使ってしまうと、
それが「HTMLとして解釈」され、
XSS攻撃の入り口になってしまいます。

createElement ＋ textContent ＋ appendChild
という組み合わせは、
「新しい要素を安全に追加する」ための基本パターンです。

よくあるつまずきポイント

createElement しただけで「出てこない」

初心者がよくやるのが、
createElement だけ書いて満足してしまうパターンです。

const p = document.createElement("p");
p.textContent = "出てこない…";
JavaScript

これだけでは、画面には何も出ません。
「作っただけで、どこにも置いていない」からです。

必ず、

どの親要素にぶら下げるかを決める
appendChild で追加する

というステップが必要です。

appendChild する親を間違える

例えば、
本当は <div id=”memoContainer”> に追加したいのに、
document.body に appendChild してしまうと、
意図しない場所に表示されます。

document.body.appendChild(p); // 画面の一番下に出てしまう
JavaScript

「どの要素の子どもにするか」を
意識して設計することが大事です。

Day16 前半のミニサンプル

「ボタンを押すたびに番号付きのメモを追加する」

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day16 DOM操作② 前半</title>
  </head>
  <body>
    <h1>メモリスト</h1>
    <button id="addButton">メモを追加</button>
    <div id="memoContainer"></div>

    <script>
      const addButtonElement = document.getElementById("addButton");
      const memoContainerElement = document.getElementById("memoContainer");

      let count = 0;

      addButtonElement.addEventListener("click", () => {
        count += 1;

        const p = document.createElement("p");
        p.textContent = `メモ ${count} 件目です。`;
        memoContainerElement.appendChild(p);
      });
    </script>
  </body>
</html>

ここでは、

createElement で p 要素を作る
textContent で中身を設定する
appendChild で memoContainer に追加する
count 変数で「何件目か」を管理する

という流れが全部つながっています。

Day16 前半のまとめ

createElement は「新しい要素を作る工場」。
appendChild は「作った要素を、親要素の子どもとしてDOMツリーに参加させる」操作。

前半では、

DOMを「木」としてイメージし直す
createElement で要素を生成する流れ
appendChild でどこに追加されるかを理解する
createElement ＋ textContent ＋ appendChild の安全な組み合わせ
ユーザー入力を新しい要素として追加するイメージ
よくあるつまずき（作っただけで出ない／親を間違える）

までを押さえました。

後半では、
複数の要素を組み合わせたカード風UIを作ったり、
削除やクリアなどの操作も絡めながら、
「動的にDOMを組み立てる」感覚をさらに深めていきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました