2.2 データ型

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

ダウンロード

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

JavaScriptは、書かれた値から数値や文字列などの型を識別する。プログラマは、目的に合った表記で値を記述する必要がある。

文字列はシングルクォーテーション '...' またはダブルクォーテーション "..." で囲む。数値は 123 や 3.14 のように引用符なしで書く。引用符がない値がすべて数値になるわけではなく、true、null、変数名などは別の意味を持つ。

これが数値と文字列を書き分ける基本ルールである。

stringNumber1.html を実行

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' を代入する。typeof演算子は、それに続く値の型を文字列で返す。
ここで注目してほしいのは、変数aが最初は数値型（Number）の値を参照し、次には文字列型（String）の値を参照していることである。
JavaScriptは動的型付け言語と呼ばれ、varやletで変数を宣言するときにデータ型を指定する必要はない。変数には、プログラムの途中で異なる型の値を再代入できる。

stringNumber2.html を実行

動的型付けでは注意が必要なケースがある。たとえば "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 になる。片方の値が文字列であるため、数値1が文字列 "1" に暗黙変換され、加算ではなく文字列の結合が行われるためだ。
数値として加算したいなら、Number関数を使って明示的に数値型（Number）へ変換してから計算する。ただし、数値に変換できない文字列は NaN（非数）になるため、入力値の検証も必要である。

ここでは詳しく触れないが、キーボード入力や外部システムから受け取るデータは、文字列など想定と異なる型で渡されることがある。処理する前に、データの型や内容を確かめるバリデーションを行うようにしよう。

JavaScriptのデータ型は、7つのプリミティブ型とObject型の2種類、合計8つに大別できる。型が変換される仕組みには、演算時などに自動で行われる暗黙の型変換と、Number関数などを使う明示的な型変換がある。Number と String 以外の型については、登場する都度解説する。

種別	No.	データ型	内  容
プリミティブ型	1	Number	倍精度浮動小数点数。整数や小数のほか、NaN、Infinityなどを含む。
	2	String	文字列。
	3	BigInt	任意の大きさの整数を扱う型。Numberの安全な整数範囲を超える整数も正確に扱えるが、小数は表せない。
	4	Boolean	真偽値。true または false
	5	null	値が意図的に存在しないことを表す。typeof null は歴史的な仕様により "object" を返す。
	6	undefined	値がまだ設定されていないことなどを表す。
	7	Symbol	一意で変更できない値。主にオブジェクトのプロパティキーに使う。
複合型	8	Object	オブジェクト。

一般に、動的型付けは短いコードを試しやすい一方、実行するまで型の誤りが見つからない場合がある。静的型付けは実行前に多くの型の不一致を検出できる一方、型の指定や理解が必要になる。ただし、どちらが適するかは、科学計算かどうかだけでなく、開発規模、保守性、使用する道具などによっても変わる。
TypeScript はJavaScriptに型構文を加えた言語で、型検査後にJavaScriptへ変換して実行する。JavaScriptとの互換性を保ちながら、実行前に型に関する誤りを見つけやすくする。

個人的には、動的型付け言語でも、1つの変数に異なる型の値をむやみに再代入しないよう意識してプログラミングすることが大切だと思うのだが、皆さんはどうお考えだろうか。

• JavaScript のデータ型とデータ構造：MDN Web Docs
• 加算（+）：MDN Web Docs
• typeof：MDN Web Docs
• TypeScript for the New Programmer：TypeScript