プログラマーへの道 #24 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

HTMLにid, class, data属性を指定する

前回の動画では tbody, tr, td, input というHTMLのタグを順番に辿っていくことでチェックボックスの状態をチェックし、 チェックされているメモに対応するtrを特定するためにtdの親要素をparentElementにて取得していました。 HTMLのタグ構造をそのまま利用するというのは考え方としてはシンプルですが、手間がかかる（プログラムが複雑になる）ので、 今回の動画で説明したように id, class, data属性を上手く使ってプログラムをシンプルに保つことが重要になります。

data属性について

data属性については以下で解説されています。 data属性のアクセスはdatasetを利用するのが標準のようなので、動画中でもdatasetを利用しています。 developer.mozilla.org

id, class, data属性の使い分けについて

idとclassはHTMLの装飾に利用されるものなので、主にCSSのための属性です。 一方でdata属性はJavaScriptによる操作にために利用される属性です。

動画中では削除対象のメモを識別するために data-memo-id というdata属性を定義し、 チェックボックスを取得するためにclass属性に class-checkbox という値を設定しました。 ただ、class属性のclass-checkboxはHTMLの装飾とは関係ないものになるので、data属性で定義した方がよかったかもしれません。

参考

• How You Can Use HTML5 Custom Data Attributes and Why - SitePoint

JavaScriptにおけるHTMLタグ操作について

今までの動画でHTMLタグの取得と操作で getElementById() や remove() などのメソッドを利用していきました。 これら以外にもいろんな取得方法と操作があります。

参考

• JavaScriptでHTMLを操作する | GRAYCODE JavaScript
• [JavaScript]あらゆる要素を取得する | Rondo