しかし実際には配列ではなく、また、HTMLCollectionとNodeListはそれぞれ似て非なる型のオブジェクトであるため、JavaScriptで扱う際には注意が必要です。

複数のHTML要素を取得する方法

JavaScriptでタグ名やクラス名などを指定して、複数の要素を取得する方法はいくつかあります。

その1 「getElementsBy」でHTML要素を取得

JavaScriptで複数のHTML要素を取得するには、下記の方法がよく使われます。
これは太古の昔からある方法です。
かつてはIE6に対応するために、これらの方法がよく使われていました。

document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()

ここで返されるのが HTML Collection というものです。
ブラウザの開発コンソールで以下のように試すと HTMLCollection と表示されます。

document.getElementsByTagName('div')
▶ HTMLCollection(3) [div, div, div]

以下のように配列と同様にインデックス番号（添字）で取り出すことができます。

const elms = document.getElementsByTagName('div');
console.log(elms[0]);
▶ <div>...</div>

その2 「querySelectorAll」でHTML要素を取得

複数のHTML要素を取得する別の方法として querySelectorAll があります。
getElementsBy…よりも少し新しい方法です。といっても2008年頃からあります。
(参考) IE8 で実装された Selectors API とは何か？ – IT戦記

これはCSSセレクタと同じ書き方で要素を取得できて便利です。

document.querySelectorAll('div')
▶ NodeList(3) [div, div, div]

getElementsByで取得した時と違って NodeList と表示されています。
こちらもインデックス番号（添字）でアクセスできるのは同じです。

const elms = document.querySelectorAll('div');
console.log(elms[0]);
▶ <div>...</div>

getElementsByとquerySelectorAllの使い分け

querySelectorAllの方が便利で使いやすいですが、速度面ではgetElementsByの方が速いので、特に大量に要素がある場合などは、要素の指定が単純なもの（クラス名やタグ名など）はgetElementsByで取得して、指定が複雑なものはquerySelectorAllで取得するのが良いと思います。

HTMLCollectionとNodeListの違い

では HTMLCollectionとNodeListの違いは何でしょうか？大きく2つの違いがあります。

• 要素が増減した時の挙動
• メソッドの違い

要素が増減した時の挙動

HTMLCollectionは後から要素の数が増減すると、動的に反映されます。
ライブオブジェクトと呼ばれる性質のオブジェクトです。

NodeListは要素の数が変わっても、後からそれが反映されません。

メソッドの違い

ブラウザの開発コンソールでNodeListのprototypeを展開するとわかりますが、NodeListにはforEachメソッドがありますが、HTML Collectionにはありません。

document.querySelectorAll('div')
▼ NodeList [main]
	▶0: div
	length: 1
	▼ [[Prototype]]: NodeList
		▶entries: ƒ entries()
		▶forEach: ƒ forEach()
		▶item: ƒ item()
		▶keys: ƒ keys()
		　length: (...)
		▶values: ƒ values()
		▶constructor: ƒ NodeList()
		▶Symbol(Symbol.iterator): ƒ values()
		　Symbol(Symbol.toStringTag): "NodeList"
		▶get length: ƒ length()
		▶[[Prototype]]: Object

HTMLCollectionを配列のようにループさせるには？

以下はlengthプロパティを使った昔ながらのforループです。昔からある定石のような方法です。

const elms = document.getElementsByTagName('div'); // HTMLCollection
const len = elms.length;
for (let i=0; i<len; i++) {
  console.log(elms[i]);
}

ちなみにlengthをあらかじめ変数に代入しているのは、ほぼ気持ちの問題ですがループごとに要素のlengthプロパティにアクセスするよりも速そうだからです。

ES6（ECMAScript 2015）以降であれば（IE を対象外にすれば）、for of 文を使って簡潔に記述することもできます。※for inではなくfor ofであることに注意してください

const elms = document.getElementsByTagName('div'); // HTMLCollection
for (const e of elms) {
  console.log(e);
}

HTML Collectionも配列に変換することで、配列と同じforEachやmapやfilterなどのメソッドが使えるようになります。

Array.from で配列に変換してmapでループ

const elms = document.getElementsByTagName('div'); // HTML Collection
const elmsAry = Array.from(elms); // 配列に変換
elmsAry.map( (v) => { console.log(v); } ); // 配列なのでmapでループできる

※Array.fromはIEは非対応です

スプレッド構文[…array]で配列に変換してmapでループ

const elms = document.getElementsByTagName('div'); // HTML Collection
const elmsAry = [...elms]; // 配列に変換
elmsAry.map( (v) => { console.log(v); } ); // 配列なのでmapでループできる

配列と似ているので、ついうっかりmapを使おうとして「ん？」となりがちなHTMLCollectionとNodeListですが、しっかり違いを理解して、楽しく要素をループさせましょう。

これまでのJavaScriptの変数宣言

これまでJavaScriptで変数を宣言する時は var を使っていました。
var での宣言には問題があり、バグが出やすくなるため現在ではほぼ使われていません。

var で変数宣言する問題点

・内容を上書きできてしまう

var a = 1;
a = 2; // 内容を上書き

console.log(a); // 2が表示される

・すでに宣言されていても宣言できてしまう

var b = 1;
var b = 2; // エラーにならない

これらの特徴はコードが小さいうちは良いのですが、大きくなってくるにつれてバグを生み出しやすくなってしまいます。

そこで現在のJavaScriptでは var の代わりに ES6(ES2015) から導入された let と const が使われるようになりました。

モダンJavaScriptの変数宣言

letを使った変数宣言

letは内容を上書きできるので、ほぼvarと同じように使うことができます。

let a = 1;
a = 2; // 内容を上書き

console.log(a); // 2が表示される

ただし var と違って再宣言しようとするとエラーになります。

let b = 1;
let b = 2; // エラーになる

const を使った変数宣言

constで変数を宣言すると、内容を上書きできません。
もちろん再宣言もできません。

const a = 1;
a = 2; // エラーになる

これらの特徴によって、var で変数宣言するよりも比較的安全になるので、現在では let と const で変数を宣言することが標準的になっています。

constの注意点

constで宣言した変数は内容を上書きできないと言いましたが、実は種類によっては上書きできてしまうケースがあります。
それが配列とオブジェクトです。

constで配列を宣言して内容を上書きする例

constで宣言された配列要素の内容を書き換える例

const array = ['x', 'y', 'z']; // 配列を宣言
array[2] = 'a'; // 最後の要素の中身を書き換える
console.log(array);
['x', 'y', 'a'] // 内容が書き換わっている

constで宣言された配列に要素を追加する例

array.push('b');
console.log(array);
['x', 'y', 'a', 'b'] // 要素が追加されている

constでオブジェクトを宣言して内容を上書きする例

まずは const でオブジェクトを宣言します。

const obj = {
  a: 1,
  b: 2
}

constで宣言されたオブジェクトのプロパティを変更してみます。

obj.b = 5;
console.log(obj);
{ a:1, b:5 }

プロパティの中身を書き換えてしまうことができました。
さらに新しいプロパティを追加してみます。

obj.c = 3;
console.log(obj);
{ a:1, b:5, c:3 }

このように新しいプロパティを追加することもできます。

delete obj.b; // プロパティを削除

console.log(obj);
{ a:1, c:3 }

プロパティの削除もできます。

しかし以下のように Object.freeze を使うことでオブジェクトの内容を変更できないようにすることもできます。

const obj2 = {
  a: 1,
  b: 2
};
Object.freeze(obj2); // オブジェクトを凍結

obj2.a = 3; //エラーが出るわけではない
obj2.b = 4; //同上

console.log(obj2);
{ a:1, b:2 } // 上書きする前の値のままになっている

ただし Object.freeze を使っても孫プロパティは変更できてしまうので注意が必要です。

const obj3 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
};
Object.freeze(obj3);

obj3.c.d = 9; // 孫プロパティdの内容を上書き

console.log(obj3);
{ a:1, b:2, c:{ d:9 } } // freezeしたのに上書きできてしまう

以上のようにオブジェクトの場合は const でも中身を書き換えることができるので、Reactでオブジェクトを宣言する場合には基本的に const を使うのが良さそうです。

モダンJavaScript以前

従来のJavaScriptでは以下のようにしてDOM(Document Object Model)の操作、つまり画面の更新をしていました。
以下のコードはブラウザの開発コンソールでもそのまま実行できます。

var elm = document.createElement('div'); //div要素を生成
var text = document.createTextNode('Hello!'); //テキストノード生成
elm.appendChild(text); // divの子要素にテキストノードを設定
document.body.appendChild(elm); // body要素の末尾にdiv要素を追加

上のコード例は生のJavaScriptによるやや冗長な書き方で、jQueryなどのライブラリを使えばもっと簡潔に書けますが、内部的な処理としてはいずれも同様になります。
実行結果は以下のようになります。

<html>
<body>
...
<div>Hello</div>
</body>

しかし、この方法はレンダリングに時間がかかるため、Webアプリケーションで頻繁に行うと重くなってしまいます。
また、システムが大きくなるにつれ、JavaScriptのコードの見通しが悪くなりがちになってしまう問題がありました。

仮想DOMで高速化

そういった問題を解決するのが仮想DOMという技術で、ReactやVue、Angularなどの、モダンなJavaScriptフレームワークで使われています。

仮想DOMは、実際のWebページを表すDOMとは別に、React内部でJavaScriptオブジェクトのデータ構造として扱われます。実体のDOMよりも軽量です。

Reactで画面を更新する際には、仮想DOMとの差分を実体のDOMに反映するようにしています。
それによってReactは高速に動作し、スムーズな画面の更新を実現しています。

少し難しそうに思えるかもしれませんが、Reactが内部で自動的にやってくれるので、最初のうちは開発する上で仮想DOMを意識する必要はありません。そういった仕組みがあるんだくらいに知っておくと良いと思います。