HTML Living Standard　　第３部 Javascript　２ データ

 

２　データ

２．１　　データ型

２．１．１ データ型

次のデータ型が定義されています。

データ型説明
真偽値true または false
数値64ビット、浮動小数点。整数値と浮動小数点値を区別しない
文字列文字列を記述する時は引用符(" " あるいは ' ')で囲む
nullnull 値を意味する特殊なキーワード
undefined宣言のみが行われた変数、あるいは実引数が存在しない仮引数の値
オブジェクトObject、Array、Function 型など

２．１．２ 定数

値の表現に定数を使います。これらは固定値であり変数ではなく、スクリプト中に直接記述します。

（１） 真偽値

true は「真」を、false は「偽」を意味する特別な値です。== 演算子などの比較演算子はその結果として true または false を返します。Javascript は大文字小文字を区別しますので、True や False では true や false を意味しません。

値説明
true真
false偽
0、-0偽
null偽
NaN偽
undefined偽
""偽
その他の値真
記述例
<div id="d1">false</div>
<!-- 以下略 -->

<script>
if (true) document.getElementById('d1').textContent = 'true';
if (10 > 0) document.getElementById('d2').textContent = 'true';
if (1) document.getElementById('d3').textContent = 'true';
if (0) document.getElementById('d4').textContent = 'true';
if (null) document.getElementById('d5').textContent = 'true';
if (undefined) document.getElementById('d6').textContent = 'true';
</script>
表示例

（２） 数値

その大きさは IEEE754標準の64ビット浮動小数点数形式であり、表現可能な最大値は±1.7976931348623157×10308です。ただし、整数として精度が保証されるのは、-253-1 (-9,007,199,254,740,991) ～253-1 (9,007,199,254,740,991) までです。その範囲外では演算結果に誤差が生じます。

また、Number.MAX_VALUE は、表現可能な正の最大値で、Number.MIN_VALUE は、表現可能な正の最小値です。詳しくは、Number オブジェクトを参照してください。

値の例説明
1010進数
0b102進数（0b から始まる数字）　b は大文字でもよい
0o108進数（0o から始まる数字）　o は大文字でもよい
0x1016進数（0x から始まる数字）　x は大文字でもよい
10.5実数
1e1実数（指数表現）　e は大文字でもよい
Number.MAX_VALUE正の最大値
Number.MIN_VALUE正の最小値
0108進数（0 から始まる数字）　 非推奨（互換性のためサポートされている）
記述例
<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById('d1')textContent = 10;
document.getElementById('d2').textContent = 0b10;
document.getElementById('d3').textContent = 0o10;
document.getElementById('d4').textContent = 0x10;
document.getElementById('d5').textContent = 10.5;
document.getElementById('d6').textContent = 1e1;
document.getElementById('d7').textContent = Number.MAX_VALUE;
document.getElementById('d8').textContent = Number.MIN_VALUE;
</script>
表示例

（３） 文字列

文字列は単一引用符 (') または二重引用符 (") で囲んで表現します。いずれの引用符を使用するかは任意であり、意味の違いはありません。ただし、開始と終了は同じ引用符である必要がありますし、引用符で囲んだすぐ内側に同じ引用符を使うことはできません。

また、文字列を途中で改行して複数行に継続することはできません。

値の例説明
"ABC"二重引用符 (") で囲む
'ABC'単一引用符 (') で囲む

また、次のような特殊文字（エスケープシーケンス）を含むことができます。

特殊文字説明
\bバックスペース
\r復帰
\n改行
特殊文字説明
\t水平タブ
\v垂直タブ
\f改ページ
特殊文字説明
\\\
\'シングルクォーテーション
\"ダブルクォーテーション


特殊文字説明
\0null
\xXX2桁の16進数が表すLatin-1文字
\uXXXX4桁の16進数が表すUnicode文字
記述例
<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById('d1').textContent = '文字列';
document.getElementById('d2').textContent = 'aaa\'ccc';
document.getElementById('d3').textContent = "aaa\"ccc";
document.getElementById('d4').textContent = '\x41';
document.getElementById('d5').textContent = '\u2460';
</script>
表示例

また、\ と直後の改行で次の行に文字列を継続させることができます。また、その間の複数の空白はひとつの空白に置き換えられます。

ただし、 ECMAScript 標準ではないようなので、文字列の継続ではなく文字列演算子を使用して連結し、文字列演算子のところで改行するようにした方がよいでしょう。

記述例
<div id="d1"></div>
<script>
window.addEventListener("load", function() {
document.getElementById('d1').textContent = 'とても長い\
文字列は\
    継続させることができる';
</script>
表示例

（４） null

null 型には、null という値が 1 つだけあります。null は 0 と等価ではありません。

null は値ですので変数に代入することも可能です。この場合、「変数には有効な値が存在しない（有効な数値、文字列、真偽値、またはオブジェクトが含まれない）」ことを表しています。ただ null は変数に代入して利用するというよりも、何らかの値を取得しようとしたときに、有効な値が存在しなかった場合に代わりに null が返されるといった用途で使われます。そのため、値を取得したときに null かどうかを判定することがよく行われます。

値説明
null「有効な値が存在しない」ということを意味する
記述例
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<script>
function f() {}
if (undefined == null) document.getElementById('d1').textContent = 'null';
var v;
if (v == null) document.getElementById('d2').textContent = 'null';
if (f() == null) document.getElementById('d3').textContent = 'null';
</script>

undefined == null になりますので、undefined になるものは null でも判定できます。

表示例

（５） undefined

存在しないオブジェクト プロパティを使用した場合や、宣言されているのに値が代入されていない変数を使用した場合に返されます。また、return 文がなく値を返さない関数も undefined を返します。

したがって、値が代入されていない変数を利用してもエラーとはなりません。

値説明
undefined「有効な値が存在しない」ということを意味する
記述例
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<script>
function f() {}
document.getElementById('d1').innerText = undefined;
var v;
document.getElementById('d2').innerText = v;
document.getElementById('d3').innerText = f();
</script>
表示例

なお、textContent に undefined を代入すると空文字列となるようです。よって、ここでは innerText に代入しています。


（６） オブジェクト

オブジェクトも同じようにスクリプトの中で値として記述することができます。数値の値を数値定数と呼びこともあるように、オブジェクトの値はオブジェクト定数と呼びます。

オブジェクトを値として記述する場合は、"{" から "}" の中にプロパティ名と値をセットにして「名前:値」の形式で並べて記述します。複数記述する場合はカンマで区切ります。

また、オブジェクト定数を別のオブジェクト定数に入れてネストすることもできます。

記述例
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script>
var v={{a:{a1:11, a2:12}, b:20}};
document.getElementById('d1').textContent = v.a.a1;
document.getElementById('d2').textContent = v.a.a2;
document.getElementById('d3').textContent = v.b;
</script>
表示例

オブジェクトも数値や文字列のように代入できます。ただし、代入されるのはオブジェクトの値ではなくオブジェクトへの参照です。

つまり、代入によって値がコピーされるのではなく、代入元の値と同じオブジェクトを代入先も参照するということです。

記述例
<div id="d1"></div>
<script>
var v1 = {a:10, b:20};
var v2 = v1;
v1.b = 100;       // v1.b を変えたのに v2.b も変わる
document.getElementById('d1').textContent = v2.b;
</script>
表示例

（７） 配列

配列も同じようにスクリプトの中で値として記述することができます。数値の値を数値定数と呼びこともあるように、配列の値は配列定数と呼びます。

配列を値として記述する場合は、"[" から "]" の中に値を並べて記述します。各値はカンマで区切ります。

値は文字列と数値を混在させることもできます。また、値を記述しなければ undefined になります。

記述例
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script>
var v=[10, , "CCC"];
document.getElementById('d1').textContent = v[0];
document.getElementById('d2').textContent = v[1];
document.getElementById('d3').textContent = v[2];
</script>

なお、textContent に undefined を代入すると空文字列となるようです。

表示例

なお、配列もオブジェクトの一種なので代入のときは注意が必要です。代入されるのは配列要素の一つひとつの値ではなく、配列への参照だからです。（①）

つまり、代入によって値がコピーされるのではなく、代入元の値と同じ配列を代入先も参照するということです。

ただし、新しい記法で ②のように記述すると配列の要素一つひとつのコピーになるので、v1 の要素が書き換えられても v3 の値は変わりません。

下記の例では、v2、v3 ともに v1 を代入していますが、v1[1] を変更したときに v2[1] は変わりますが、v3[1] は変わりません。

<div id="d1"></div>
<div id="d2"></div>
<script>

var v1 = [10, 20, 30];
var v2 = v1;      // ① 参照のコピー
var v3 = [...v1]; // ② 値のコピー
v1[1] = 100;
document.getElementById('d1').textContent = v2[1];
document.getElementById('d2').textContent = v3[1];
</script>
表示例

２．１．３ データ型の変換

JavaScript は動的型付け言語です。そのため変数宣言時にデータ型を指定する必要がなく、またスクリプト実行時に必要に応じてデータ型が自動的に変換されます。

    <script>
      var v;
      v = 10;        // 数値
      v = "ABC";     // 文字列
    </script>

（１） 数値から文字列

数値と文字列を + 演算子で結合する式では、JavaScript は数値を文字列に変換します。

記述例
<html>
  <body>
    <script>
      window.addEventListener("load", function() {
        document.getElementById('d1').textContent = "1" + 2 + 3;
        document.getElementById('d2').textContent = "1" + (2 + 3);
      }, false);
    </script>
    <div id="d1"></div>
    <div id="d2"></div>
  </body>
</html>

文字列と数値を + 演算子で結合した時点で文字列になります。"1" + 2 → "12"、"12" + 3 → "123"

括弧があれば先に演算されますので、(2 + 3) → 5、"1" + 5 → "15"

表示例

（２） 文字列から数値

文字列の前に符号をつけると数値に変換されます。また、+ 以外の演算子を使用しても文字列は数値に変換され計算されます。

整数化する parseInt()、浮動小数点数化する parseFloat() で変換する方法もあります。

記述例
<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById('d1').textContent = +"12" + 3;
document.getElementById('d2').textContent = "12" - 3;
document.getElementById('d3').textContent = parseInt("12.5");
document.getElementById('d4').textContent = parseFloat("12.5");
</script>
表示例

２．２　　変数

アプリケーションで値を表す名前として、変数を使用します。

２．２．１ 変数名

変数の名前は識別子とも呼ばれ、次のようなルールがあります。

  • 文字 (英字、漢字)、アンダースコア (_)、あるいはドル記号 ($) から始まる
  • 続く文字には数字 (0-9) も使用できる
  • 大文字・小文字を区別する

２．２．２ 変数の宣言

変数を宣言する方法には 3 種類あります。

（１） var を使う

ローカル変数とグローバル変数の両方の宣言に利用できます。

関数内で宣言された場合はローカル変数に、それ以外の場合は { } の中に記述されていてもグローバル変数になります。

<script>
var foo = function() {
  var local = 10;       // ローカル変数
}
{var global = 10;}      // グローバル変数
var x = local;      // local はローカル変数なので参照できず、エラーになる
var y = global;     // global はグローバル変数なので参照できる
</script>

（２） let を使う

この方法では常にローカル変数として宣言されます。{ } の中に記述されていたら有効範囲もその中だけです。

<script>
{let local = 10;}      // ローカル変数
var x = local;      // local はローカル変数なので参照できず、エラーになる
</script>

（３） 単に変数に値を代入する

この方法では常にグローバル変数として宣言されます。ただし、ここで宣言したのか、他で宣言された変数を参照しているのかの区別がつかないので使用すべきではありません。

<script>
{global = 10;}          // グローバル変数
var x = global;         // global はグローバル変数なので参照できる
</script>

２．２．３ 変数のスコープ

変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、グローバル（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、ローカル（局所）変数と呼ばれます。

しかし、現在の JavaScript では var を使用して宣言した変数はブロック（{ } 内）のスコープがありません。例えば以下のコードでは、x のスコープは x の宣言を含む関数（あるいはグローバルコンテキスト）であり、ブロック（この例では if 文）ではないので、y への代入がエラーにならず実行されます。

<script>
if (true) {
  var x = 10;      // var で宣言するとグローバル変数
}
var y = x;     // x はグローバル変数なので参照できる
</script>

変数の宣言に let を使用すると、スコープがブロック（{ } 内）に限定されます。例えば以下のコードでは、x のスコープは x の宣言を含むブロック（この例では if 文）なので、y への代入がエラーになります。

<script>
if (true) {
  let x = 10;      // let で宣言するとローカル変数
}
var y = x;     // x はローカル変数なので参照できず、エラーになる
</script>

なお、Javascript では、ブロック内で宣言された変数はブロック内のどこで宣言されようが、ブロックの先頭で宣言されたかのように解釈されます。ただし、初期値の設定は元の宣言された場所で行われます。そのため、変数の宣言の前で変数を参照してもエラーとはなりませんが、初期値が設定されていないので変数の値は undefined となります（ただし、textContent に undefined を代入しても表示されません）。

<div id="d1"></div>
<script>
document.getElementById('d1').textContent = x;      // 変数宣言の前での参照
var x = 10;
</script>
表示例

つまり、上記の例は次のように記述されているかのように解釈されます。

<div id="d1"></div>
<script>
var x;
document.getElementById('d1').textContent = x;      // 初期値がないので undefined
x = 10;
</script>

２．３　　定数の宣言

const キーワードを用いて、読み取り専用の名前付き定数を作成できます。定数識別子は文字 (英字、漢字)、アンダースコア (_)、ドル記号から始めなくてはならず、アルファベット、数値、アンダースコアを含めることができます。

const 要素

読み取り専用の名前付き定数を作成する。

  const 定数名1 = 定数1[, 定数名2 = 定数2[, ...[, 定数名n = 定数n]]];

定数は代入によって値を変えたり、スクリプト実行中に再宣言したりすることはできません。定数はある値に初期化しなければなりません。

定数のスコープは、ブロック（{ } 内）に限定されます。let によって宣言された変数と同じです。

<script>
const MAX = 10;     // 初期化も同時にする必要がある
const NAME = "文字列";     // 文字列も定数にできる
const RANGE = {"MAX":10, "MIN":0}; // オブジェクトも定数にできる（ただし、RANGE.MAX などのオブジェクトの属性は定数ではなく変更できる）
</script>