【JavaScript】データ型の書き方と使い方の基本
JavaScriptプログラミングの基礎である「データ型」について解説します。文字列、数値、真偽値といった主要なデータ型の種類とそれぞれの意味を学びます。サンプルコードを通して、データ型の基本的な書き方や、typeof演算子で型を確認する方法までを丁寧に説明します。
開発環境
- OS: Windows10
- Editor: Visual Studio Code
- JavaScript: ES6以降
JavaScriptのデータ型
「データ型」とは、プログラムで扱う値の種類を分類するためのものです。
例えば、100 のような「数値」と、"こんにちは" のような「文字列」では、できる処理が異なります。数値を足し算したり、文字列を連結したりと、コンピュータが値を正しく扱うために、このデータ型という分類が必要になります。
JavaScriptの主なデータ型の一覧
JavaScriptで主に使用されるデータ型は以下の通りです。これらは、単一の値を扱う「プリミティブ型」と、複数の値をまとめて扱う「オブジェクト型」に大別されます。
| データ型 | 説明 | 例 |
|---|---|---|
| string | 文字や文章などの「文字列」を表します。シングルクォーテーション ' またはダブルクォーテーション " で囲んで表現します。 | "こんにちは", 'abc' |
| number | 100 のような整数や 3.14 のような小数点数を含む「数値」を表します。四則演算などの計算に使用できます。 | 123, 3.14 |
| bigint | number 型では扱いきれない、非常に大きな整数を扱うためのデータ型です。数値の末尾に n をつけて表現します。 | 9007199254740991n |
| boolean | 「正しい (true)」か「間違っている (false)」かの二つの状態のみを表す「真偽値」です。条件分岐などで使用されます。 | true, false |
| null | プログラマーが意図的に「値が存在しない」ことを示すために使用する特別な値です。 | null |
| undefined | 変数を宣言した後に、まだ値が代入されていない状態など、「値が未定義である」ことを示す値です。 | undefined |
| symbol | 他の値と決して重複しない、唯一無二の値を生成するためのデータ型です。主にオブジェクトのプロパティキーとして利用されます。 | Symbol("id") |
| object | 文字列や数値などの複数の値を、ひとつのまとまりとして管理するためのデータ型です。配列や関数などもこの object 型に含まれます。 | { name: "Taro" }, [1,2,3] |
サンプルコード
この章では、JavaScriptの基本的な「データ型」について学びます。データ型とは、プログラムが扱うデータの種類のことです。例えば、文字、数値、真偽（正しいか間違っているか）などがあります。
javascript/chapter02/index.html
このHTMLファイルは、これから見ていくJavaScriptコードを実行するための土台となるページです。
<script>タグを使って、8つのJavaScriptファイルを順番に読み込んでいます。defer属性は、HTMLの読み込みを止めずにJavaScriptを実行するための記述です。
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>JavaScriptチュートリアル</title> 7 </head> 8 9 <body> 10 <h1>JavaScriptチュートリアル</h1> 11 <script src="./script01.js" defer></script> 12 <script src="./script02.js" defer></script> 13 <script src="./script03.js" defer></script> 14 <script src="./script04.js" defer></script> 15 <script src="./script05.js" defer></script> 16 <script src="./script06.js" defer></script> 17 <script src="./script07.js" defer></script> 18 <script src="./script08.js" defer></script> 19 </body> 20</html> 21
javascript/chapter02/script01.js
ここでは「文字列 (string)」というデータ型を扱います。文字列は、"こんにちは" のようなテキストデータを表現するために使います。
let str = "こんにちは"; で、strという名前の変数に文字列を保存しています。
console.log()は、ブラウザの開発者ツール画面に結果を表示する命令です。
typeofは、変数がどのデータ型かを調べるための命令で、この場合はstringと表示されます。
1// ----------------------------- 2// 文字列 (string) 3// ----------------------------- 4let str = "こんにちは"; 5console.log("string:", str); 6console.log("typeof(str):", typeof str); 7
javascript/chapter02/script02.js
次は「数値 (number)」型です。これは、42のような整数や3.14のような小数を扱うためのデータ型です。
JavaScriptでは、整数と小数を区別せず、どちらもnumber型として扱います。
typeofで調べると、両方ともnumberと表示されることが確認できます。
1// ----------------------------- 2// 数値 (number) 3// ----------------------------- 4let num = 42; 5console.log("number:", num); 6console.log("typeof(num):", typeof num); 7 8let floatNum = 3.14; 9console.log("number (小数):", floatNum); 10console.log("typeof(floatNum):", typeof floatNum); 11
javascript/chapter02/script03.js
「BigInt」は、非常に大きな整数を安全に扱うための特別な数値型です。
通常のnumber型では表現しきれない巨大な数値を扱う際に使用します。数値の末尾にnを付けることで、BigInt型として定義できます。
typeofで調べると、bigintと表示されます。
1// ----------------------------- 2// BigInt（非常に大きな整数） 3// ----------------------------- 4let bigIntNum = 9007199254740991n; 5console.log("bigint:", bigIntNum); 6console.log("typeof(bigIntNum):", typeof bigIntNum); 7
javascript/chapter02/script04.js
「真偽値 (boolean)」は、true (真) と false (偽) の2つの値しか持たないデータ型です。
プログラムが条件によって処理を分ける「条件分岐」などで、正しいか間違っているかを判断するために使われます。
typeofで調べると、booleanと表示されます。
1// ----------------------------- 2// 真偽値 (boolean) 3// ----------------------------- 4let isTrue = true; 5console.log("boolean true:", isTrue); 6console.log("typeof(isTrue):", typeof isTrue); 7 8let isFalse = false; 9console.log("boolean false:", isFalse); 10console.log("typeof(isFalse):", typeof isFalse); 11
javascript/chapter02/script05.js
「null」は、変数の値が「意図的に空である」ことを示すために使われる特別な値です。
プログラマーが「この変数には何も入っていません」と明示的に指定する場合に使用します。
typeofで調べるとobjectと表示されますが、これはJavaScriptの歴史的な仕様によるもので、nullは独立した一つの値として扱います。
1// ----------------------------- 2// null（値がないことを明示） 3// ----------------------------- 4let emptyValue = null; 5console.log("null:", emptyValue); 6console.log("typeof(emptyValue):", typeof emptyValue); // object（仕様上の仕様です） 7
javascript/chapter02/script06.js
「undefined」は、変数が宣言されただけで、まだ値が代入されていない「未定義」の状態を示します。
let notAssigned;のように変数を宣言しただけの場合、その変数の中身は自動的にundefinedになります。
typeofで調べると、undefinedと表示されます。
1// ----------------------------- 2// undefined（未定義） 3// ----------------------------- 4let notAssigned; 5console.log("undefined:", notAssigned); 6console.log("typeof(notAssigned):", typeof notAssigned); 7
javascript/chapter02/script07.js
「Symbol」は、必ず一意（ユニーク）な識別子を作成するためのデータ型です。
Symbol("id")のようにして作成された値は、たとえ同じ文字列を渡してもう一つ作成したとしても、それぞれが別々の値として扱われます。
そのため、sym1 === sym2（sym1とsym2は等しいか）の結果はfalseになります。主に、他と重複しないユニークなキーを作りたい場合などに使われます。
1// ----------------------------- 2// Symbol（一意の識別子） 3// ----------------------------- 4let sym1 = Symbol("id"); 5let sym2 = Symbol("id"); 6console.log("symbol1:", sym1); 7console.log("symbol2:", sym2); 8console.log("symbol1 === symbol2 ?", sym1 === sym2); // false（一意） 9console.log("typeof(sym1):", typeof sym1); 10
javascript/chapter02/script08.js
「オブジェクト (object)」は、これまで見てきた文字列や数値などの複数のデータを、一つのまとまりとして扱うことができるデータ型です。
{ name: "Taro", age: 30 }のように、{}の中に「キー: 値」のペア形式でデータを格納します。
JavaScriptでは、配列や関数などもオブジェクトの一種として扱われます。
typeofで調べると、オブジェクトと配列はobject、関数はfunctionと表示されます。
1// ----------------------------- 2// オブジェクト (object) 3// ----------------------------- 4let obj = { name: "Taro", age: 30 }; 5console.log("object:", obj); 6console.log("typeof(obj):", typeof obj); 7 8// 配列もオブジェクトの一種 9let arr = [1, 2, 3]; 10console.log("array:", arr); 11console.log("typeof(arr):", typeof arr); 12 13// 関数もオブジェクトとして扱われる 14function greet() { 15 console.log("Hello!"); 16} 17console.log("function greet:", greet); 18console.log("typeof(greet):", typeof greet); 19greet(); 20
おわりに
今回は、JavaScriptで値を扱うための基本となる「データ型」について学習しました。文字列はクォーテーションで囲む、数値はそのまま書くなど、型ごとの基本的な書き方をサンプルコードを通して確認しました。また、typeof演算子を使えば、変数に格納されている値がどのデータ型なのかを簡単に調べられることも学びました。値が存在しないことを示すnullや、複数の値をまとめるobject型など、様々なデータ型を正しく使い分けることが、今後のプログラミングの重要な第一歩となります。