JavaScriptのデータ型の理解

チュートリアル
JavaScript

導入

データ型は、プログラミング言語で特定のタイプのデータを分類するために使用されます。たとえば、数字と文字列は、JavaScriptによって異なるタイプのデータとして扱われます。

これは重要です。なぜなら、使用する特定のデータ型によって、その値に何を割り当てることができるか、それに対して何を行うことができるかが決まるからです。つまり、JavaScriptで変数との操作を行うためには、与えられた変数のデータ型を理解することが重要です。

このチュートリアルでは、JavaScriptでのデータ型の動作と、言語固有の重要なデータ型について説明します。これはデータ型の徹底的な調査ではありませんが、JavaScriptで利用可能なオプションに慣れるのに役立ちます。

動的型付け

JavaScriptは動的データ型を持っているため、タイプチェックはコンパイル時ではなく実行時に行われます。Pythonのデータ型も動的に型付けされています。

動的に型付けされた言語では、同じ名前の変数を異なるデータ型で使用することができます。

例えば、tという変数は、letキーワードによって変数として定義されます（letは与えられた変数をスコープ内に限定します）。この変数には、異なるデータ型を保持するように設定することも、初期化して未定義のままにすることもできます。

let t = 16;			// tは数値です
let t = "Teresa";	// tは文字列です
let t = true;		// tは真偽値です
let t;				// tは未定義です

上記のt変数は、JavaScriptで利用可能な任意のデータ型に設定できます。使用する前にデータ型を明示的に宣言する必要はありません。

数値

JavaScriptには数値型が1つしかなく、整数と浮動小数点数の区別はありません。そのため、JavaScriptでは小数点を付けても付けなくても、数値を書くことができます。

let num1 = 93;
let num2 = 93.00;

上記の両方の場合でも、データ型は数値であり、数値に小数点があるかどうかに関わらず同じです。

非常に大きな数値や小さな数値を簡略化するために、JavaScriptでは科学的指数表記が使用されます。以下に示す例のように：

let num3 = 987e8;		// 98700000000
let num4 = 987e-8;		// 0.00000987

JavaScriptの数字は、15桁まで正確とされます。つまり、16桁目に到達すると数字は四捨五入されます:

let num5 = 999999999999999;		// 999999999999999のまま
let num6 = 9999999999999999;	// 10000000000000000に四捨五入される

JavaScriptの数値型は数字の表現に加えて、3つの記号値も利用可能です:

  • Infinity — 無限に近づく正の数を表す数値です
  • -Infinity— 無限に近づく負の数を表す数値です
  • NaN — 数字でないことを表す数値ですnot a number

Infinityまたは-Infinityは、JavaScriptで利用可能な最大の数値を超える計算を行った場合に返されます。これらは、ゼロで割ったときなど、未定義の値に対しても発生します:

let num7 = 5 / 0;	// Infinityが返されます
let num8 = -5 / 0;	// -Infinityが返されます

技術的な用語で言えば、Infinityは、JavaScriptの上限を表す1.797693134862315E+308を超える数値が表示されます。

同様に、-Infinityは、数値が-1.797693134862316E+308の下限を下回る場合に表示されます。

Infinityは、ループでも使用できます:

while (num9 != Infinity) { 
	// このコードはnum9 = Infinityを通じて実行されます
}

正当な数でない場合、NaNが表示されます。数値と非数値の値との間で数学的な操作を試みると、NaNが返されます。これは、次の例の場合です：

let x = 20 / "Shark";	// xはNaNになります

数値20を文字列"Shark"で割ることができないため、x変数の返される値はNaNになります。

ただし、文字列が数値として評価可能な場合、JavaScriptで数学的式を実行できます：

let y = 20 / "5";	// yは4になります

上記の例では、文字列"5"がJavaScriptで数値として評価可能であるため、それはそのように扱われ、除算のための数学演算子/と動作します。

操作で使用される変数に値NaNを割り当てると、もう片方のオペランドが正当な数値であっても、値がNaNになります：

let a = NaN;
let b = 37;
let c = a + b; 	// cはNaNになります

JavaScriptには1つの数値データ型しかありません。数字を扱う場合、入力した数字はすべて数値のデータ型として解釈されます。JavaScriptは動的に型付けされているため、どのようなデータ型を入力しているかを宣言する必要はありません。

文字列

A string is a sequence of one or more characters (letters, numbers, symbols). Strings are useful in that they represent textual data.

JavaScriptでは、文字列は単一引用符'または二重引用符"で囲まれています。したがって、文字列を作成するには、文字のシーケンスを引用符で囲みます。

let singleQuotes = 'This is a string in single quotes.';

let doubleQuotes = "This is a string in double quotes.";

単一引用符または二重引用符のどちらを使用するかは選択できますが、プログラム内では一貫性を保つ必要があります。

プログラム「Hello, World！」は、コンピュータプログラミングで文字列を使用する方法を示しています。以下のalert()内のフレーズHello, World！を構成する文字は、文字列です。

hello.html
<!DOCTYPE HTML>
<html>
<head>
<script>
function helloFunction() {
    alert("Hello, World!");
}
</script>
</head>
<body>
<p><button onclick="helloFunction()">Click me</button></p>
</body>
</html>

コードを実行し、Click meボタンをクリックすると、以下の出力がポップアップで表示されます。

Output
Hello, World!

他のデータ型と同様に、文字列を変数に保存できます。

let hw = "Hello, World!";

変数を呼び出すことでalert()内に文字列を表示できます。

hello.html
...
<script>
let hw = "Hello, World!";
function helloFunction() {
    alert(hw);
}
</script>
...

Output
Hello, World!

プログラム内で文字列を操作して、求めている結果を達成するために多くの操作が可能です。文字列は、ユーザーに情報を伝えるためや、ユーザーがプログラムに情報を戻すために重要です。

ブーリアン

ブールデータ型は、2つの値のうちの1つであり、trueまたはfalseです。ブール値は、コンピュータサイエンスのアルゴリズムに情報を提供する数学の論理分岐に関連付けられる真偽値を表すために使用されます。

数学の多くの操作は、真または偽に評価される答えを提供します:

  • より大きい
    • 500 > 100 true
    • 1 > 5 false
  • より小さい
    • 200 < 400 true
    • 4 < 2 false
  • 等しい
    • 5 = 5 true
    • 500 = 400 false

他のデータ型と同様に、ブール値を変数に保存することができます:

let myBool = 5 > 8;	// false

5が8よりも大きくないため、変数myBoolの値はfalseです。

JavaScriptでより多くのプログラムを書くにつれて、ブール値の動作や、さまざまな関数や操作が真または偽に評価される方法がどのようにプログラムの進行を変えるかについて、より理解が深まっていくでしょう。

配列

1つの変数内に複数の値を保持できる配列。これは、配列内に値のリストを含め、それらを反復処理できることを意味します。

配列内に含まれる各アイテムまたは値は要素と呼ばれます。インデックス番号を使用して配列の要素を参照できます。

文字列が引用符で囲まれた文字列として定義されるのと同様に、配列は角かっこ[ ]の間に値を持つことで定義されます。

例えば、文字列の配列は次のようになります:

let fish = ["shark", "cuttlefish", "clownfish", "eel"];

変数fishを呼び出すと、次の出力が得られます:

["shark", "cuttlefish", "clownfish", "eel"]

配列は、要素値を追加、削除、変更できるという点で非常に柔軟なデータ型です。

オブジェクト

JavaScriptのオブジェクトデータ型には、名前:値のペアとして多くの値を含めることができます。これらのペアはデータを格納してアクセスするための便利な方法を提供します。オブジェクトリテラル構文は、両側に波かっこ{ }を持ち、コロンで区切られた名前:値のペアで構成されています。

通常、関連するデータを保持するために使用されるように、IDに含まれる情報など、JavaScriptのオブジェクトリテラルは、プロパティの間に空白が含まれて次のようになります:

let sammy = {firstName:"Sammy", lastName:"Shark", color:"blue", location:"ocean"};

代替として、名前:値のペアが多数含まれるオブジェクトリテラルの場合、各コロンの後に空白を入れて、このデータ型を複数行に分けて記述することができます。

let sammy = {
    firstName: "Sammy",
    lastName: "Shark",
    color: "blue",
    location: "Ocean"
};

上記の例のそれぞれで、オブジェクト変数sammyには4つのプロパティがあります：firstName、lastName、color、およびlocation。これらはそれぞれ、コロンで区切られた値が渡されます。

複数のデータ型で作業する

作成する各プログラムは複数のデータ型を含むことになりますが、同じデータ型内で操作を行うことが一般的であることを心に留めておくことが重要です。つまり、数値に対して数学的な演算を行ったり、文字列をスライスしたりすることになります。

数値または文字列を連結できる+演算子のように、データ型を横断して機能する演算子を使用する場合、予期しない結果が得られる場合があります。

たとえば、数値と文字列を一緒に+演算子を使用する場合、数値は文字列として扱われます（したがって、それらは連結されます）、ただし、データ型の順序が連結に影響を与えます。

したがって、次のような連結を行う変数を作成した場合、JavaScriptは以下の各要素を文字列として解釈します。

let o = "Ocean" + 5 + 3;

変数oを呼び出すと、次の値が返されます：

Output
Ocean53

ただし、数字から始める場合、2つの数字が追加され、プログラムの実行が "Ocean" に達したときに文字列として解釈されるため、返される値は2つの数字の合計が文字列と連結されたものになります。

let p = 5 + 3 + "Ocean";

Output
8Ocean

これらの予期しない結果のため、おそらく、異なるデータ型間での操作やメソッドを実行するのではなく、1つのデータ型内で操作を行うことになります。ただし、JavaScriptでは、他のプログラミング言語が行うように、データ型を混在させるとエラーが発生しません。

結論

この時点で、JavaScriptで使用できる主要なデータ型のいくつかについて理解が深まったはずです。

これらのデータ型は、JavaScript言語でプログラムプロジェクトを開発する際に重要になります。

Source:
https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript