Ne:Code道場~JavaScript DOM⑦(イベント④)の巻~


Ne:Code道場~JavaScript DOM⑦(イベント④)の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMのイベントの学習ポイントについて紹介します。

目次
  1. はじめに
  2. HTML上に存在しないDOM要素を作れるのニャ?
  3. createElementをどう使うニャ?
  4. 要素を追加するサンプルコードを確認するニャ
  5. appendChildで追加した後に追加要素に設定を加えられるのニャ?
  6. 最後に

はじめに

image この記事ではJavaScriptのDOMのイベントの4回目としてイベント実行時におけるDOM要素の追加について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、DOMのイベントについて理解を深めてゆきましょう。

HTML上に存在しないDOM要素を作れるのニャ?

前回の記事では、イベントの実行タイミングについてとりあげました。今回は主題はDOM要素の追加なので、イベントは副題的なポジションになりますが、動的に(イベント実行時に)要素を追加するという用い方も多いため、イベントの延長として取り上げました。
存在しているDOM要素を取得する際には、「getElementById」や「querySelector」などで、引数に指定した条件のものを見つけ出して来ましたね。
新たにDOMを作成する例として、「createElement」を用いて説明してゆきます。
image

createElementをどう使うニャ?

createElementを用いてDOM要素を作成する際には、最低限2つのステップが必要になります。まずは、①新たにDOM要素を作成するステップ(ここでcreateElementを用います)、そして、②①で作成したDOM要素をHTMLに追加して実体化するステップです。
最初はこの二点に注目して、JavaScriptをみてゆきましょう。

// 新しくdiv要素を作り出しているニャ
// この瞬間はまだHTML上には存在しない、JavaScriptのメモリ上だけにある要素だニャ
let div = document.createElement("div");

createElementの引数に「div」を指定しているので、上記のdivという変数には、新たに作られたdiv要素が入っています。
ですが、コメントにもあるように、このdiv要素はまだJavaScriptの作業スペースにだけ存在しています。この処理だけならば、要素をHTMLに「追加」したことにはなりません。
なので2つ目のステップが必要になります。

// ここでは例としてbody要素に、子供の要素としてdiv要素を追加しているニャ
document.body.appendChild(div);

createElementで作成した要素を、HTMLの既存の要素に追加(ここでは末尾に追加するappendChildを用いています)することで、HTMLに新たな要素を追加しました。
では、ポイントとなる部分を抑えたところで、具体的なサンプルコードを見てゆきましょう。
image

要素を追加するサンプルコードを確認するニャ

サンプルコードでは、画面上のクリックした位置に「ニャ」という文字を語尾やフォントサイズをランダムに変えて追加しています。
イベントとして、「画面上のクリックイベント」を用い、且つ、イベント引数を利用してクリックされた位置情報を取得し、その値を利用することで、クリック位置に文字(が書かれた新しい要素)を追加しているのです。
コメントと合わせて確認してゆきましょう。
まずはHTMLとCSSからです。(コメントにもありますが、簡略化のため、CSSはHTMLのstyle要素に記載しています)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
  <!-- 今回のサンプルコードではスタイルの設定も必要になるためstyle要素を追加しているニャ -->
  <!-- サンプルとしての記載なのでCSSはHTMLに直書きにしているニャ -->
  <style>
    body {
      /* bodyどこでもクリックできるように画面いっぱいに広げているニャ */
      height: 100vh;
      margin: 0;
    }
    /* サンプルコードではdivを追加してゆくので、ザックリdivに共通のスタイルを設定しているニャ */
    /* ここまでザックリな書き方は、あくまでサンプルだからだニャ */
    div {
      /* クリックした位置にdivを固定するためのスタイルが記載されているニャ */
      /* 実際にクリックされた場所自体のスタイルはJavaScript側で動的に設定してゆくニャ */
      position: fixed;
    }
  </style>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

次にJavaScriptの処理を確認してゆきましょう。

// body上でクリックされた場合のイベントを登録しているニャ
// 今回はクリック位置を取得するためにイベント引数を受け取っているニャ
document.body.onclick = (e) => {
  // 抜粋にもあった【ステップ1】ニャ。新しくdiv要素を作り出しているコードニャ
  let div = document.createElement("div");
 
  // これは少しお遊びのコードだニャ♪
  // 「ニャ」という文字を出力する際の末尾のバリエーションを配列で持っているニャ
  // また、その際の文字の大きさもランダム(1rem〜3rem)に変更しているニャ
  let list = ["!", "?", "☆", "♪"];
  div.innerHTML = `ニャ${list[Math.floor(Math.random() * list.length)]}`;
  div.style.fontSize = `${Math.floor(Math.random() * 3) + 1}rem`;
 
  // イベント引数からクリックされた位置を特定し、CSSのプロパティで上・左からの座標位置を指定しているニャ
  // イベント引数にはこういう情報も入っていて、活用することができるニャ
  div.style.top = `${e.clientY}px`;
  div.style.left = `${e.clientX}px`;
 
  // JavaScriptのメモリでセッセと作っていたdivを、body要素に追加しているニャ
  // この処理が実行されると、画面上に文字が表示されてゆくニャ。抜粋の【ステップ2ニャ】
  document.body.appendChild(div);
};

事前に取り上げた、ステップ1とステップ2が実行されているのを確認できるでしょう。
その際に追加するdiv要素に対する設定が、ステップ1とステップ2の間でなされています。最初はこの書き方のほうが直感的になるだろうとあえてこの順番で書きましたが、ステップ1とステップ2を実行した後に、div要素に対する設定を行っても動きは全く変わりません。最後にその点を見てゆきましょう。
image

appendChildで追加した後に追加要素に設定を加えられるのニャ?

まずは具体的にどういう順番での記載になるのかを見てゆきましょう。(順番が主題になるため適時コードは省略します)

// ステップ1は最初と同じでトップに書いてあるニャ
let div = document.createElement("div");
// さっきは一番最後に書いてあったステップ2をステップ1のすぐ後で書いているニャ
// これで、空っぽのdivがbodyに追加されたニャ
document.body.appendChild(div);
 
// そして、bodyに追加したdivの変数に対して設定を加えてゆくと、それはステップ2で追加された要素にどんどん適用されてゆくニャ
  div.innerHTML = `フォントサイズ以降の設定は省略ニャ!`;

同じ変数を用いている故に、bodyに追加したものと、それ以降のdiv変数への設定は、「同じ要素」に対して適用されてゆくのですね。
image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

イベント実行時のDOM要素の追加について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. 要素はJavaScript上で作っただけではHTMLには反映されないニャ
    1. この記事ではcreateElementでのやり方を用いたニャ
    2. その際には、要素を作成した後、HTML上の要素に追加するという二段構えだったことを確認したニャ
  2. 新しく作成した要素もDOM要素として色々設定できるニャ
    1. 「getElementById」や「querySelector」などで取得した結果も、「createElement」で新たに作成した結果も、どちらも同じDOM要素として利用することができるニャ
    2. また、設定するさいに、イベント引数から情報を取り出して設定する処理をみてみたニャ。イベント引数には色々便利な情報が入っているというのもポイントニャ
  3. 新しく作ったDOM要素に対する設定は、追加する前でも後でも有効ニャ
    1. これは「参照」という概念が絡んでくるニャ(参照は別の機会に取り上げるニャ)
    2. ここでは、出来合いのものを追加しなくても、あと付けでの設定も可能というイメージを抑えておくニャ

DOMに関連して、7つ目の記事として、イベント実行時のDOM要素の追加について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp