HTML5入門(II)

この記事 Grapevineテクニカルチームによる 原作・初出

新しいHTML5コンテンツと基本的なページレイアウトについては、すでに前回の記事で紹介しました 今回の記事では、引き続き広義のHTML5のもう一つの構成要素を紹介します。JavaScript のデータ型です。

弱定型言語であるJavaScriptの優れた点は、動的に型付けされることです。つまり、変数の型をあらかじめ宣言するのではなく、プログラムの実行時に動的に型が決定され、実行中に動的に変更することができるのです。また、異なる型の変数が操作された場合、自動的に暗黙のうちに変換されます。以下に、暗黙のうちに変換される一般的な例を挙げます。

var foo = 2020; // typeof foo -> "number"
var foo = "SpreadJS" // typeof foo -> "string"
var foo = true + 1; // foo = 2 typeof foo -> " number"
var foo = true + false; // foo = 1 typeof foo -> " number"
var foo = '5' - '2'; // foo = 3 typeof foo -> " number"
var foo = 20 + 20 + "SpreadJS" // foo = "40SpreadJS" typeof foo -> "string"
var foo = "SpreadJS" + 20 + 20 // foo = "40SpreadJS" typeof foo -> " string"

最新のECMAScript規格に基づき、8つのデータ型が定義されています。

これらはプリミティブ型である。Boolean、Null、Undefined、Number、BigInt、String、Symbol、そしてObject型：Objectです。

プリミティブ型について、いくつか知っておきたいことがあります。

• プリミティブ型の値は、値ごとにアクセスされる 

つまり、値を代入・変更する場合はバリューパスで行い、変数に値を代入・変更する場合はメモリ内の領域を再割り当てする。

例

var a, b, x, y;
a = " SpreadJS";
b = " GrapeCity";
x = a;
y = b;
console.log(a, b, x, y); // result: SpreadJS GrapeCity SpreadJS GrapeCity

aとx、bとyの代入は互いに完全に独立したコピーなので、どれか1つの値を変えても、同じ値を持つ他の変数には何ら影響がないのです。

• 厳密な等価性===と非厳密な等価性===について
  

プリミティブ型の場合、==は値のみを比較し、異なる型であれば変換後に比較し、===はデータ型を比較します。

例

undefined === null //fasle
undefined == null //true
true === 1 //fasle
true == 1 //true
null == 0 //false

• Nullと未定義
  

nullとundefinedの使用上の違いはほとんどなく、厳密でない等比級数を使っている場合はその通りになります。違うのは数値変換をするときに文字通り違うということで、undefinedは未定義を表してNaNという数値に変換され、nullはヌルを表して0という数値に変換されます。

例えば

Number(undefined) //NaN
Number(null) //0
1 + undefined //NaN
1 + null //1

大きな違いはなく、上記の区別に厳密に従うわけではありませんが、実際のプロジェクトのアプリケーションでNULL値を決定する際には、両者を考慮する必要があります。

• NaN
  

NaNはNot a Numberであり、NaNを使った演算はNaNを返し、NaNはNaNと等しくない。Number()で値が正常に変換されるかどうかをチェックするグローバルメソッドisNaN()がある。グローバルメソッド isNaN() は、値が Number() で正常に変換できるかどうかをチェックする。

例

NaN == NaN; // fasle
isNaN('123') // false can convert
isNaN('abc') // true Cannot convert

• 浮動小数点演算精度エラー
  

JavaScript では、整数も浮動小数点数も Number データ型であり、すべての数値は 64 ビット浮動小数点数として格納されます。つまり、JavaScript の底辺には整数が存在せず、1 と 1.0 は同じ値です。

以下に、いくつかの例を挙げて説明します。

// Addition
0.1 + 0.2 = 0.300000000000000000004
0.1 + 0.7 = 0.799999999999999999
0.2 + 0.4 = 0.60000000000000000001
 
// Subtraction
0.3 - 0.2 = 0.099999999999999999998
1.5 - 1.2 = 0.300000000000000000004
 
// Multiplication
0.8 * 3 = 2.40000000000000000004
19.9 * 100 = 1989.99999999999999998
 
// division
0.3 / 0.1 = 2.99999999999999999996
0.69 / 10 = 0.068999999999999999999
 
// Compare
0.1 + 0.2 === 0.3 // false
(0.3 - 0.2) === (0.2 - 0.1) // false

このように一見間違っているように見える計算の問題は、特に金融に関わるシステムによっては深刻な問題になりかねないので、ここでは間違いの理由を説明することはせず、自分たちで勉強することにしましょう。高精度を必要としないシステムであれば、フォーマットして小数点以下X桁で処理することも可能です。3. 計算するときは、分数部分と整数部分を別々に計算してから結合する、など。

参照型について知っておくべきいくつかのこと。

• 参照型の値は、参照によってアクセスされる
  

オブジェクトを操作するとき、実際には実際のオブジェクトではなく、オブジェクトへの参照を操作していることになります。変数に値を代入すると、オブジェクトの参照関係が変更されます。

例

var obj1 = {a:1};
var obj2 = obj1;
obj1.a = 2;
console.log(obj2.a) // result: 2. obj1 and obj2 are the same object
obj1 = {a:3};
console.log(obj2.a) // result: 2. obj1 points to a new object, obj2 remains the same

• 参照型==と==は、参照の比較と同じ意味を持つ
  

つまり、同じオブジェクトであろうとなかろうと、型間の非厳格な等価性==比較型変換は、以下の表でわかる。

比較可能な値B

未定義

Null

番号

文字列

ブーリアン

オブジェクト

typeof 42 // "number"
typeof {} // "object"
typeof undefined // " undefined"