しかし実際には配列ではなく、また、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 を使うのが良さそうです。

これまでのWebとSPAの違い

これまでのWebサイトやWebアプリケーションとの違いとしては、SPAはHTMLが1つしかなく、JavaScriptで画面の要素を変更して、通信や画面の書き換えなどの動作を実現している点です。

これまでのWeb

1. ユーザーがリンクをクリックする
2. ブラウザがURLをリクエストする
3. Webサーバーからページ全体のデータが送られてくる
4. ブラウザがページを表示する
5. ユーザーがリンクをクリックする
6. Webサーバーからページ全体のデータが送られてくる
7. ブラウザが違うページを表示し直す

といった流れでページにアクセスしていました。
そのため、リンクをクリックした後に、次の画面が表示されるまで待たされることがしばしばありました。

SPAのWebアプリケーション

1. ユーザーがリンクをクリックする
2. ブラウザがURLをリクエストする
3. Webサーバーからページ全体のデータが送られてくる
4. ブラウザがページを表示する
5. ユーザーがリンクをクリックする
6. Webサーバーからページの差分データが送られてくる
7. ブラウザが現在のページを部分的に書き換える

現在のページと、次のページの差分データのみを更新するので、通信も画面描画も高速に実現される仕組みになっています。

SPAのメリット

高速な動作が実現できる

特に通常のWebサイトと違い、Webアプリケーションの場合はUIに対するレスポンスの速さでユーザー体験がずいぶんと違って感じますので重要です。

チームで開発しやすくなる

上の例で出てきた差分、つまりUIコンポーネントごとに別々に開発できるので、チームで分担して開発しやすくなります。

変更・修正がやりやすくなる

デザインや挙動を変更する場合も、全体を修正する必要がなく、UIコンポーネントを修正すれば良いので開発やサービス運用がやりやすくなります。

従来の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を意識する必要はありません。そういった仕組みがあるんだくらいに知っておくと良いと思います。

この記事ではReactの簡単な始め方について、セットアップ、環境構築の方法を解説します。
Reactの開発環境はMacやLinuxはもちろん、Windowsでもセットアップできます。
手順は大まかには下記の3点です。

1. nvmのインストール ※Node.jsのバージョンを管理するツール
2. Node.jsのインストール ※サーバサイドJavaScript環境
3. Create React Appの実行 ※Reactアプリの雛形を生成するツール

nvmのインストール

nvmとは？

nvm（Node Version Manager）とは、Node.jsのバージョンを管理するツールです。

Node.jsは頻繁にバージョンアップが行われており、バージョンが進むにつれて新しい機能が追加されたり、既存の機能が削除されたりします。そのため、Node.jsを利用する上で、使用するバージョンを簡単に選択して切り替えられるようにしておいた方が後々便利に使えます。

nvmを使うことで、複数のNode.jsのバージョンをインストールし、それらのバージョンを切り替えることができます。これにより、Node.jsを使用する上でのバージョン管理を容易にすることができます。

また、nvmを使うことで、Node.jsのインストールやアンインストールが容易になります。nvmを使わずにNode.jsをインストールする場合、Node.jsをアンインストールするには、手動でファイルを削除する必要がありますが、nvmを使う場合は、そのような作業が不要になります。

nvmを使うことで、Node.jsを簡単かつ効率的に管理することができます。

nvmをインストール

nvmをインストールするには、インストール スクリプトを実行する必要があります。これを行うには、次の cURL または Wget コマンドを使用します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

もしくは

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

上記のコマンドのいずれかを実行すると、スクリプトがダウンロードされて実行されます。
バージョン番号の部分が変わるかもしれませんので、公式のgithub https://github.com/nvm-sh/nvm#install–update-script を確認するようにしてください。

nvmが正常にインストールされたか確認する

$ command -v nvm
nvm

nvmと表示されたら成功です。もしくは

$ nvm v
1.1.8

このようにnvmのバージョン番号を表示して確認できます。
もし上記がうまく動かない場合は、一旦コンソール画面を閉じて、新しくコンソールを開き直すことを試すとうまくいくかもしれません。

Windowsにnvmをインストールするには？

Windows用のnvm がインストーラー付きで提供されていますので、ダウンロードページから最新バージョンを確認してダウンロード・インストールしてください。

Node.jsのインストール

Node.jsとは？

Node.jsとは、JavaScriptをサーバーサイドで実行するためのプラットフォームです。Node.jsでは、JavaScriptを用いてサーバーサイドのアプリケーションを構築することができます。Node.jsには、非同期 I/O（入出力）やイベント駆動、単一スレッドでの並行処理などの機能が提供されており、これらの機能を用いることで、高速かつスケーラブルなサーバーサイドアプリケーションを構築することができます。

また、Node.jsでは、様々なモジュールが用意されており、それらのモジュールを用いることで、サーバーサイドアプリケーションの構築を容易にします。これらのモジュールは、Node.jsのパッケージ管理システムであるnpm（Node Package Manager）を使って管理されます。

Node.jsは、JavaScriptを用いてサーバーサイドアプリケーションを構築するためのプラットフォームであり、Webフロントエンド開発者にとっても重要な存在です。

nvmでNode.jsをインストール

Node.jsは普通にインストールすることもできますが、nvmのようなバージョン管理ツールを使うことでNode.js自体のバージョンを簡単に切り替えることができるようになります。

プログラミング言語の実行環境は「バージョンを上げたら今までのアプリが動かなくなった」といったことがしばしば起こるので、最初にnvmのような管理ツールを入れておくと安心です。

nvmでNode.jsの最新バージョンをインストールするには以下のコマンドを使います。

$ nvm install node

特定のバージョンのNode.jsをインストールするには以下のコマンドを使います。

$ nvm install 16.13.1

nvmでインストールしたNode.jsの一覧を見るには以下のコマンドを使います。

$ nvm list
16.13.1

使用するNode.jsを選ぶには以下のコマンドを使います。

$ nvm use 16.13.1

(注意) Windows版のnvmを使っている場合はコマンドプロンプト（またはPowerShell）を管理者モードで起動する必要があります。Windowsメニューから「管理者として実行」を選ぶと管理者権限で実行できます。

nvmを使ってNode.jsをインストールすると、パッケージ管理ツールであるnpmもインストールされています。以下のコマンドでnodeとnpmのバージョンを確認することができます。

$ node -v
v16.13.1
$ npm -v
8.1.2

Create React Appについて

Create React Appとは？

Create React Appとは、Reactの開発環境を構築するためのツールです。Create React Appを使うことで、Reactの開発環境を簡単かつ迅速に構築することができます。

Create React Appを使うと、以下のようなことができます。

• Reactのプロジェクトを作成する
• プロジェクトに必要な依存モジュールをインストールする
• WebpackやBabelなどのビルドツールを用いて、開発したコードをトランスパイルし、実行可能なJavaScriptに変換する
• 開発サーバーを起動し、ブラウザ上で実行結果を確認する

また、Create React Appを使うと、Reactプロジェクトの設定ファイルを手動で作成する必要がなくなります。Create React Appは、プロジェクトの設定を自動的に行います。これにより、Reactの開発環境を構築する際の設定手順が減少し、開発を迅速に進めることができます。

Reactを使ってWebアプリケーションを開発する際には、WebpackやBabelなどのビルドツールを用いることが必要です。また、WebpackやBabelを用いる際には、設定ファイルを用意する必要があります。

これらの作業は、Reactを使い始める開発者にとっては煩雑であり、時間を要するものです。Create React Appは、これらの作業を簡略化するためのフレームワークです。Create React Appを用いることで、煩雑な設定作業を省略し、Reactの開発環境を簡単かつ迅速に構築することができます。

Create React Appのインストール方法は？

Create React Appは後述するnpxというツールを使って実行できるので、インストールの必要はありません。
時々、Reactの開発環境構築について書かれた記事に「Yarnを使ってインストールしましょう」といった情報がありますが、Yarnもインストールも必要ありません。
ちなみにYarnとは、さきほどNode.jsとともにインストールされたnpmの互換ツールです。特に必要なければnpmのままで大丈夫です。

インストールするツール類が増えると複雑になります。わからないことが起こった時に調べることが増えます。
最初のうちはできるだけシンプルな環境で進めることを心がけましょう。

Create React Appでサンプルアプリ(Hello, world)を作る

Create React Appを使うと簡単にアプリの雛形を生成することができます。
さっそく最初のアプリを作ってみましょう。

$ npx create-react-app react-test
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y

最初の「npx」というのは打ち間違いではありません。npm 5.2から利用できるパッケージランナーというものでnpmと同時にインストールされています。

npmとnpxの違いは、npmはパッケージを管理するのに対して、npxはパッケージを管理せずに実行するという違いがあります。xがexecuteという訳ですね。

ですのでパッケージをインストールせずに1回だけ使いたい場合や、たまにだけ使いたい場合にnpxの使用が向いていると思います。

上のコマンドを実行後、react-testというディレクトリが作られてReactの環境が生成されるので数分間ほど時間がかかります。
成功すると下記のメッセージが表示されます。

Success! Created react-test1 at react-test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-test
  npm start

Happy hacking!

ReactによるWebアプリの雛形が生成されました。表示された通りに実行してみます。

$ cd react-test
$ npm start

Reactアプリがコンパイルされるため、数分間ほど待たされますが、成功すると下記のメッセージとともにブラウザが起動し、http://localhost:3000 を開いて Reactのロゴが回転するページが表示されます。

Compiled successfully!

You can now view react-test1 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

ブラウザ画面に表示されている通り react-test/src/App.js をエディタで開いて、試しに文字を追加してみます。

<p>
  Edit <code>src/App.js</code> and save to reload.
  <br>こんにちは？
 </p>

ファイルを保存すると即座にコンパイルされて自動的にブラウザがリロードされて画面に反映されます。
しかしエラーが発生しました。

ERROR in [eslint]
src\App.js
  Line 12:8:  Parsing error: Expected corresponding JSX closing tag for <br>. (12:8)

文法チェックツールである eslint がエラーだと言っているようです。
エラー内容を読むと <br>タグは閉じる必要があるようですので、コードを以下のように修正します。

<p>
  Edit <code>src/App.js</code> and save to reload.
  <br/>こんにちはこんにちはこんにちは！！
</p>

<br>を<br/>に修正しました。

無事に元気な挨拶を入れることができました。
停止するにはコンソール画面で Ctrl+c で止めることができます。

あとはこのApp.jsを書き換えながら進めていくのがReactでの開発のスタートになります。

Reactの開発環境構築はこれにて完了です。意外と簡単だったのではないでしょうか。
どんなプログラミング言語やフレームワークも、まずは実際に触ってみることが大事だと思います。
ここから一緒にReactを学んでいきましょう。

Reactは、Webアプリケーションを構築するためのJavaScriptライブラリです。
WebアプリケーションのUIを効率的かつ迅速に構築することができます。

Reactでは、UIを構成するための「コンポーネント」という概念が用いられます。各コンポーネントは、それ自体が完結した機能を持っており、複数のコンポーネントを組み合わせることで、複雑なUIを構築することができます。

Reactは、Facebookが開発したもので、現在では多くのWebアプリケーションで採用されています。

Reactの特徴やメリットは？

コンポーネント指向: Reactでは、UIを構成するための「コンポーネント」という概念が用いられます。各コンポーネントは、それ自体が完結した機能を持っており、複数のコンポーネントを組み合わせることで、複雑なUIを構築することができます。これにより、UIの構築が容易になり、再利用性の高いUIを構築することができます。

データフローが単方向: Reactでは、データフローが単方向であることが特徴です。これにより、データがどのようにUIに反映されるかが明確になり、状態の管理が容易になります。

Virtual DOM: Reactでは、UIを構成する要素を仮想的なドキュメントオブジェクトモデル（Virtual DOM）上で管理します。これにより、UIの更新を効率的に行うことができます。

JSX: Reactでは、JavaScriptとHTMLを混在させることができる独自の構文が用いられます。これをJSXと呼びます。JSXを用いることで、HTMLのような見た目でJavaScriptのコードを書くことができます。これにより、JavaScriptのコードが見やすくなり、コードの可読性が向上します。

サーバーサイドレンダリング: Reactは、サーバーサイドレンダリング（SSR）に対応しており、サーバーでレンダリングされたHTMLをクライアントに送信することができます。これにより、Webアプリケーションのパフォーマンスが向上し、SEOに優れたWebアプリケーションを構築することができます。

Reactは何を作ることに向いてるの？

Reactは、WebアプリケーションのUIを構築するために特に向いています。

Reactは、現在では多くのWebアプリケーションで採用されています。また、React Nativeというフレームワークを用いることで、モバイルアプリケーションのUIを構築することもできます。

Reactは、そのわかりやすい構文や、豊富なコンポーネントライブラリなどから、Webフロントエンド開発者の間で人気が高いフレームワークです。したがって、Webフロントエンド開発においてReactが適していると言えます。

Reactに向いていないものやデメリットは？

Reactは、Webフロントエンド開発に特化したフレームワークであり、その他の分野では特に向いていません。

また、Reactは、JavaScriptを用いるフレームワークであるため、JavaScriptに詳しくない開発者が使いこなすのが難しいことが挙げられます。Reactでは、独自の構文であるJSXが用いられますが、この構文はJavaScriptとHTMLを混在させるものです。これは、JavaScriptを理解していない開発者にとっては理解しづらいかもしれません。

また、Reactは、UIを構成するためのコンポーネント指向のアーキテクチャを採用していますが、このアーキテクチャは複雑なUIを構築する上で有用ですが、慣れていない開発者にとっては理解しづらいかもしれません。

Reactの学習方法は？

1. ドキュメントやチュートリアルを読む: Reactの公式サイトには、Reactを学ぶためのドキュメントやチュートリアルが用意されています。これらを読むことで、Reactの基本的な仕組みや使い方を学ぶことができます。
2. 実際にReactを使ってWebアプリケーションを作る: 実際にReactを使ってWebアプリケーションを作ることで、Reactを学ぶことができます。まずは、Reactの公式サイトにあるチュートリアルを参考にして、簡単なWebアプリケーションを作成してみましょう。これらを繰り返すことで、Reactを使いこなすことができるようになります。
3. Reactのコミュニティに参加する: Reactを使ってWebアプリケーションを作る上で、問題や疑問が生じることもあるでしょう。そんな時は、Reactのコミュニティに参加してみましょう。Reactのコミュニティには、多くのReactを使った開発経験のある開発者が参加しており、そのような疑問や問題に対する解決方法を共有し合うことができます。