2.2 データ型

1. サンプル・プログラム
2. 数値と文字列
3. 動的型付け
4. 練習問題：数値の単位
5. データ型
6. 練習問題：データ型
7. コラム：動的型付けと静的型付け

ダウンロード

「1.3 四則計算と変数」で触れたように、データが数値であるときと文字列であるときとでは、プログラムの書き方や挙動が変わる。
たとえば 1 + 2 と書くと、プログラムは1と2が数値であると認識し、1と2を加算する。'1 + 2' と書くと、プログラムは 1 + 2 という文字列だと認識し、これをそのまま変数に代入したり画面に表示することができる。

プログラムは、そのデータが数値か文字列かということを自動的に識別できない。そこで、人間（プログラマ）が指定してやる必要がある。

文字列はシングルクォーテーション '...' またはダブルクォーテーション "..." で囲む。それ以外は数値として扱う。

これが基本ルールである。

stringNumber1.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     //変数の宣言
  23:     let a;
  24: 
  25:     //数値
  26:     a = 1 + 2;
  27:     document.getElementById('let1').innerHTML = 'a = ' + a + '...' + typeof a;
  28: 
  29:     //文字列
  30:     a = '1 + 2';
  31:     document.getElementById('let2').innerHTML = 'a = ' + a + '...' + typeof a;
  32: }
  33: </script>

"stringNumber1.html" は、まず、変数aを定義する。続いて、変数aに1 + 2の計算結果を代入する。次に、文字列 '1 + 2' を代入する。typedef演算子は、それに続く値の型を文字列で返す。
ここで注目してほしいのが、変数aは数値型（Number）から文字列型（String）へ変化していることである。
JavaScript動的型付け言語と呼ばれ、varやletで宣言するときにデータ型を指定する必要はなく、プログラムの中で必要に応じてデータ型が変化する。

stringNumber2.html を実行

動的型付けでは注意が必要なケースがある。たとえば "stringNumber2.html" のようなケースだ。

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     //変数の宣言
  23:     let a = 1;      //数値
  24:     let b = '2';    //文字列
  25:     let c;
  26: 
  27:     //そのまま計算
  28:     c = a + b;
  29:     document.getElementById('let1').innerHTML = 'c = ' + c + '...' + typeof c;
  30: 
  31:     //明示的に数値型に変換してから計算
  32:     c = Number(a) + Number(b);
  33:     document.getElementById('let2').innerHTML = 'c = ' + c + '...' + typeof c;
  34: }
  35: </script>

変数aに数値1を、変数bに文字列 '2'を代入する。これをそのまま足し算したつもりなのだが、結果は 12 になってしまった。これは、変数bが文字列であることの方が優勢に働き、加算ではなく、文字列の結合となってしまったためだ。
正しく加算したいなら、Number関数を使って明示的に数値型（Number）に変換してから加算する必要がある。

ここでは詳しく触れないが、キーボードからの入力や、外部システムからデータを受け取るとき、動的型付けにより、意図しないデータ型となってしまうことがある。これらのデータを処理する前に、データ型を明確にするバリデーションを行うようにしよう。

JavaScriptには2種類8つのデータ型が用意されており、相互に動的型付けが行われる。Number と String 以外のデータ型については、登場する都度、解説していく。

種別	No.	データ型	内  容
プリミティブ型	1	Number	数値（整数または小数）。
	2	String	文字列。
	3	BigInt	巨大整数。任意精度の整数値。 Number.MAX_SAFE_INTEGER（後述）より大きな数値を扱うことができる。
	4	Boolean	真偽値。true または false
	5	null	null 値を意味する特殊なキーワード。 JavaScript は大文字・小文字を区別するため、Null や NULL と同じではない。
	6	undefined	値が未定義。
	7	Symbol	シンボル。ES2015以降の機能。
複合型	8	Object	オブジェクト。

この2つのルーツから分かることだが、われわれ人間が自然にデータを扱おうとしたら、動的型付けの方が書きやすい。しかし、純粋に科学計算をしようというときは、静的型付けが便利である。
上記の例で分かるとおり、動的型付けでは予期しないデータ型で計算しているバグを見つけるのに時間がかかる。一方、今時の動的型付け言語に慣れていると、静的型付け言語のコンパイル時のデータ型エラーを頻発させるだろう。
このため、JavaScriptから派生し、大規模システムのプログラミングを可能にした TypeScript は静的型付け言語となった。

個人的には、動的型付け言語の場合も、変数のデータ型が動的に変化しないよう意識的にプログラミングを心がけることだと思うのだが、皆さんはどうお考えだろうか。