詳解！ボタン増殖プログラム〜DOM、イベントハンドラ、関数〜

watanabe_kf1983

2021年10月22日 12:55

プログラム自学案内の11回目です。今回は、前回の記事で使ったJavaScriptのコードから、DOMとイベントハンドラについて紹介します。過去の記事はこちらです。

DOMとは：JavaScriptで参照・作成・変更できる入れ子のHTML要素

DOM (Document Object Model) とは、ブラウザに表示されている入れ子のHTML要素が、JavaScriptで参照、作成、変更できる「オブジェクト」として表現されたものです。

では、「オブジェクト」とは何でしょう？　気になるところだとは思いますが、その説明は次回にゆずって、今回の記事ではDOM操作の実例を追って説明していきます。

ボタン増殖プログラムからDOM操作を見る

前回の記事であげたJavaScriptコードのうち、前回解説したconsole.log操作をを除いたものを再掲します。そのほとんどが、DOM操作なのです。

document.getElementById('myFirstButton').onclick = function() {
   addButton('追加されたボタン');
   addButton('迷ったあげくに追加されたボタン');
}

function addButton(name) {
   const button = document.createElement('button');
   button.textContent = name;
   document.querySelector('body').appendChild(button);
}

DOM要素の取得とイベントハンドラの設定

冒頭から見ていきましょう。

document.getElementById('myFirstButton').onclick = function() {
   ...
}

この部分だけでいろんなことをやっています。すべて、DOMの操作です。

1) document
　ブラウザで表示されている文書全体を示し、これ自体が「DOMのオブジェクト」。

2) .getElementById('myFirstButton')　
　1)から id="myFirstButton" が指定されたHTML要素(DOM要素)を取得。

3) .onclick = function() {...}
　2)で取得したDOM要素がクリックされたときの作用を設定。

3) で設定している、DOM要素がクリックされたときの作用のことを、イベントハンドラと言います。クリックされた！という「イベント（＝event＝出来事）」を「ハンドルする（＝handle(動詞)＝取り扱う）」から、イベントハンドラ。

「イベント」に対する「ハンドラ」を書いていくというのは、動きのある画面をプログラミングするときに、よくあるパターンなのです。

function（またの名を「関数」）とは

上のコードに出てきた function というキーワードについてコメントしておきます。

英和辞典でfunctionという単語を引くと、「機能」「働き」「作用」という意味が真っ先に出てきます。プログラミングで使われるfunctionという語も、そのとおりの意味で理解してください。つまり、「.onclick = function() {...}」というコードでは、「クリックされたときの機能、働き、作用」を定義しているわけです。

ところで、日本のITの世界ではこのfunctionを「関数」と訳す慣習があります。これは、ただの慣習です。数学の関数について語っているわけではないのです。この記事でも、この慣習に従って、これから関数という言葉を使っていきます。数学の関数について語っているわけではないということを、覚えておいてください。

イベントハンドラの中身：ボタン追加を2回

イベントハンドラの中を見てみましょう。

   addButton('追加されたボタン');
   addButton('迷ったあげくに追加されたボタン');

2回のaddButton(...)だけですね。
このaddButtonはDOM操作ではなくて、すぐ下の、この別の関数を使っているだけです。

function addButton(name) {
   ...
}

この関数が使われるとき、nameの部分がそれぞれ '追加されたボタン', '迷ったあげくに追加されたボタン' になるところがミソです。

では、さらにこの中を見てみましょう。

ボタン追加関数の中身：DOM要素の作成と追加

   const button = document.createElement('button');
   button.textContent = name;
   document.querySelector('body').appendChild(button);

この部分もすべてDOM操作です。

1) document.createElement('button')
新しいbuttonタグのHTML要素(DOM要素)を作成。

2) const button =
1)で作成したDOM要素にbuttonという名前を付与。

3) button.textContent = name
2) の名前のDOM要素の内容としてname（’追加されたボタン’ だったり ’迷ったあげくに追加されたボタン’ だったりする）を設定。

4) document.querySelector('body')
HTML文書からbodyタグのDOM要素を選択。

5) .appendChild(button)
4) で選択したDOM要素の子供として 2) の名前のDOM要素を追加。

雰囲気はつかめたでしょうか。

DOMをどう勉強するのか？

さて、DOMが操作されているらしいことは分かりましたが、ではその使い方をどう勉強すればいいでしょうか。DOMの仕様は膨大で、かつ説明は難解。

私は、MDNのこのリンクの場所から学ぶのを薦めたいと思います。

DOM の中で核となるインターフェイス
(https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction#core_interfaces_in_the_dom)

リンク先には、DOM操作で良く使うフレーズの一覧が書かれています。いわば例文集。一覧のフレーズの1つ1つにはさらに詳細な説明のページへリンクされており、そこではそのフレーズの意味が利用例とともに解説されています。

以下は、 DOM を使うウェブや XML ページのスクリプトでよく使われる API の簡単な一覧です。
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload (en-US)
window.scrollTo()

詳細な説明のページの解説の文章はとっつきにくく、難しいかもしれません。ですが、その各フレーズの利用例を自分のHTMLファイルやJavaScriptファイルにコピペして、動きを確かめることで、解説の文章も徐々に理解できてくるはずです。

このさきの学習の進め方：語彙に触れたあとで、文法を学ぶ

今回の記事では、JavaScript学習の2回目でDOMの案内をしました。これは、チマタの入門書や入門コースには無い、急激なハードルの上げ方でしたので、不安になった読者は多いと思います。しかし、次回以降はハードルを下げるつもりです。今後の案内の進め方を書いて、不安を取り除きたいとおもいます。

今回の記事ではJavaScriptをその語彙の側面から案内しました。

一般に、プログラミングの勉強であれ、外国語の勉強であれ、言語の学習には語彙学習の側面と文法学習の側面があります。これらは並行して学習していくものであって、どちらを先に学ぶべきとかいうものでは無いと思います。

ですが、初学者にとって楽しい学びのとっかかりは、提示された文例を口真似することで、まずは語彙を学び、最初はブロークンな片言ではあっても、喋りたいことを喋ることではないでしょうか。

私がまずDOMを紹介したのには、その楽しさに触れてもらいたいという理由がありました。DOMこそが、JavaScriptで最もよく使われる語彙の集まりと言えるからです。

しかし、次回以降はJavaScriptの文法的側面に案内のフォーカス移していく予定です。

なぜなら、外国語などの自然言語の学習と、JavaScriptなどのプログラミング言語の学習では、勝手が違うところがあるからです。それはこうです。

自然言語は、文法が間違っていても語彙が合っていれば大体話は通じます。たとえ文法的にブロークンでも、ＲとＬの発音の違いができていなくても、「てにをは」や「前置詞」を間違えても、状況と文脈と語彙が共有できれば、会話が通じてしまうのが人間同士のコミュニケーションです。

一方プログラミング言語は、文法を間違えると話が相手に全く通じません。大文字小文字の違い、セミコロン1つ有る無しの違いで、言葉が全く通じなくなるのがプログラマと計算機との間のコミュニケーションです。

ネットでググって見つかった文例や、先ほど紹介したDOMのページを、センテンスごと、フレーズごとコピペして動かす。こういった語彙のみにフォーカスを当てた学習だけでは、早々に行き詰ります。その語彙を自分なりに組み合わせたくなったとき、文法が身についていないと、ブラウザはブロークンな文法の命令をまったく理解してくれないからです。これはツライものです。

まとめと次回予告

今回は、ボタン増殖プログラムの簡単な説明と、DOM、イベントハンドラ、関数というキーワードを紹介をしました。次回は、今回説明を素通りした「オブジェクト」と「変数」について案内します。あわせて、「デバッガ」についても紹介する予定です。

#コラム #プログラミング #初心者 #独学 #JavaScript #DOM #イベントハンドラ #関数

この記事が気に入ったらサポートをしてみませんか？