JavaScriptのデータ型は、プログラミングにおいて基本中の基本ですが、その理解がプログラムの信頼性や効率性に直結します。
データ型は、変数や定数が持つ値の種類を示し、数値、文字列、真偽値、オブジェクト、未定義など、多岐にわたります。
正確にデータ型を理解することで、データの取り扱いや操作が格段に容易になります。
また、異なるデータ型間の変換や、型に基づく最適な操作方法を学ぶことで、プログラムの柔軟性や堅牢性が向上します。
この記事を通じて、JavaScriptのデータ型に対する理解を深め、より洗練されたコーディング技術を身につけましょう。
JavaScriptのデータ型について
JavaScriptには、さまざまなデータ型が存在し、これらを理解することはプログラミングの基本です。
JavaScriptのデータ型は大きく分けてプリミティブ型（基本型）とオブジェクト型の2つに分類されます。
プリミティブ型
プリミティブ型（基本型）は、最も基本的なデータ型です。JavaScriptには7つのプリミティブ型があります。
1.数値（Number）
数値データを表します。
整数と浮動小数点数の両方を扱うことができます。
let integer = 42; // 整数
let float = 3.14; // 浮動小数点数2.文字列（String）
テキストデータを表します。
単一引用符（’）または二重引用符（”）で囲む必要があります。
let singleQuote = 'Hello, World!';
let doubleQuote = "JavaScript is fun!";文字列は演算子を使用することで表現も可能です。
document.write("hello" + "world");
// helloworld
// また、以下のように文字列を表現できます。
console.log('It is a pen'); // It is a pen
console.log("It's a pen"); // It's a pen
console.log("It's \na pen"); // It's
// a pen数値のような文字列を扱う
// 実行結果は文字列にも関わらず 15 と表示
document.write('5' * 3);
// 実行結果は文字列にも関わらず 2 と表示
document.write('5' - '3');
// 実行結果は文字列なので 53 と表示
document.write('5' + 3);
// 実行結果で8を表示させたい場合
document.write(Number('5') + 3);
// Numberで数値を代入しなかった場合
document.write(Number('hello', 10)); //NaN(Not a Numberが表示)番外：テンプレートリテラルについて
テンプレートリテラルは、バッククォート（`）で囲まれた文字列で、変数や式を簡単に埋め込むことができます。
let name = "Alice";
let age = 25;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Alice and I am 25 years old."
複数行の文字列
テンプレートリテラルを使うと、複数行にわたる文字列も簡単に表現できます。
let multiLine = `This is line one.
This is line two.
This is line three.`;
console.log(multiLine);
// This is line one.
// This is line two.
// This is line three.
式の埋め込み
テンプレートリテラルの中に任意のJavaScriptの式を埋め込むことができます。
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
関数の呼び出し
テンプレートリテラルの中で関数を呼び出すこともできます。
function greet(name) {
return `Hello, ${name}!`;
}
let message = `${greet("Alice")}`;
console.log(message); // "Hello, Alice!"3.論理値（Boolean）
真偽値を表します。値は true または false のいずれかです。
let isTrue = true;
let isFalse = false;trueになる値は「true」「’ ’(空白)」「[]」「{}」などはすべてtrueになります。
falseになる値は「false」「0」「-0」「NaN」「’’」「undefined」「null」がfalseになります。
4.未定義（Undefined）
変数が宣言されているが、まだ値が割り当てられていない状態を表します。
// 値を設定していない変数
let x;
console.log(x);
// 値を設定していない配列
const score = [70, 90, 80];
console.log(score[100]);
// keyの設定されていない連想配列
const scores = {math: 80, english: 90};
console.log(scores.history);
// undefinedをif文で使用する
if (scores.history === undefined) {
console.log('History scores not defined!');
}
5.Null
値が存在しないことを表します。
明示的に変数に値がないことを示すために使用されます。
let emptyValue = null;番外:0とnullとundefindの違い
「図書館の本棚」を使って説明します。
0（ゼロ）
0は数値を意味します。例えば、図書館の特定の本棚に本が0冊あるとします。
これは「その本棚に本が一冊もない」ということを示しています。
let numberOfBooks = 0; // 本棚には本が0冊ある
console.log(numberOfBooks); // 0
null（ヌル）
nullは「本棚が存在するが、意図的に空であることを示す」状態です。
例えば、特定の理由でその本棚を空にしている場合、「この本棚には意図的に何も置いていない」と言いたいときに使います。
let emptyShelf = null; // この本棚には意図的に何も置かれていない
console.log(emptyShelf); // null
undefined（アンデファインド）
undefinedは「本棚が存在するが、まだ何も設定されていない」状態です。
例えば、新しく作られた本棚で、まだどの本を置くか決まっていない場合、「この本棚は存在するが、まだ何も設定されていない」という意味です。
let newShelf; // 本棚はあるが、まだ何も置かれていない
console.log(newShelf); // undefined
違いをまとめると
0は本棚に本が0冊ある（本が一冊もない）。
例を挙げると「この本棚には（すべて本が借りられてしまっていて）本が0冊ある」という状態です。
nullは 本棚はあるが、意図的に空である。
例を挙げると 「この本棚には意図的に何も置かれていない」という状態です。
undefinedは 本棚はあるが、まだ何も設定されていない。
例を挙げると「この本棚は新しく作られたが、まだ何も置かれていない（そして本が置かれるかどうかもわからない）」という状態です。
6.シンボル（Symbol）
一意の識別子を作成するために使用されるデータ型です。
主にオブジェクトのプロパティとして使用されます。
let symbol = Symbol('unique');
7.ビッグイント（BigInt）
非常に大きな整数を表すために使用されるデータ型です。
ビッグイントは通常の数値では扱えない大きな整数を扱うことができます。
let bigInt = BigInt(12345678901234567890);オブジェクト型
オブジェクト型は、複雑なデータ構造を表すためのデータ型です。
オブジェクトはプロパティとメソッドを持つことができます。
最も基本的なオブジェクト型は Object です。
オブジェクト（object）
オブジェクトは、キーと値のペアの集合です。
キーは文字列またはシンボルであり、値は任意のデータ型です。
オブジェクトを作成する基本的な方法は、リテラル構文を使用することです。
let person = {
// nameをキー "Alice"を値と呼び、2つまとめてプロパティ
name: "Alice",
age: 25,
greet: function() {
console.log("Hello, " + this.name);
}
};この例では、person オブジェクトには name と age のプロパティ、そして greet というメソッドが含まれています。
プロパティを操作するためには以下の方法があります。
// プロパティの取得
console.log(person.name); // "Alice"
console.log(person["age"]); // 25
// プロパティの追加
person.gender = "female";
person["hobbies"] = ["reading", "biking"];
// プロパティの更新
person.age = 35;
console.log(person.age); // 35
console.log(person.gender); // "female"
console.log(person.hobbies); // ["reading", "biking"]
// プロパティの削除
delete person.gender; //genderが削除されるオブジェクトの値には関数を設定することも可能です。
オブジェクト化することで、メソッドとして使用可能となります。
let calculator = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2オブジェクトの内包オブジェクト
オブジェクトは、他のオブジェクトをプロパティとして持つことができます。
let company = {
name: "Tech Corp",
address: {
street: "123 Main St",
city: "Techville",
country: "Techland"
}
};
console.log(company.address.city); // "Techville"オブジェクトの反復処理
オブジェクトのプロパティを反復処理するには、for...inループを使用します。
let car = {
make: "Toyota",
model: "Corolla",
year: 2020
};
for (let key in car) {
console.log(key + ": " + car[key]);
}
/* 実行結果 */
make: Toyota
model: Corolla
year: 2020オブジェクトのコピー
オブジェクトをコピーする方法にはいくつかありますが、 基本的な方法は Object.assign とスプレッド構文です。
// object.assign
let original = { a: 1, b: 2 };
let copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }
// スプレッド構文
let original = { a: 1, b: 2 };
let copy = { ...original };
console.log(copy); // { a: 1, b: 2 }スプレッド構文の使い方については配列編で紹介しております。
オブジェクトの継承
JavaScriptでは、オブジェクトは他のオブジェクトからプロパティを継承することができます。
これをプロトタイプベースの継承と呼びます。
すべてのオブジェクトは、プロトタイプとして機能する特別なオブジェクトにリンクされています。
let animal = {
eats: true
};
let rabbit = Object.create(animal);
rabbit.jumps = true;
console.log(rabbit.eats); // true
console.log(rabbit.jumps); // trueオブジェクトが持つメソッド
オブジェクトには多くの組み込み（static）メソッドがあります。
全てのキーを配列として取得するObject.keys メソッド
let keys = Object.keys(person);
console.log(keys); // ["name", "gender", "hobbies", "greet"]
オブジェクトのすべての値を取得するObject.values メソッド
let values = Object.values(person);
console.log(values); // ["Alice", "female", ["reading", "biking"], function]キーと値のペアを配列として取得するObject.entries メソッド
let entries = Object.entries(person);
console.log(entries);
// [["name", "Alice"], ["gender", "female"], ["hobbies", ["reading", "biking"]], ["greet", function]]
オブジェクト型の挙動を理解する
まずは例文から
// 数値のバックアップを取得
let num = 10;
const numBackup = num;
num = 99;
console.log(num); // 99
console.log(numBackup); // 10
// 配列やオブジェクトで数値のバックアップを取得
const nums = [10, 20, 30];
const numsBackup = nums;
nums[0] = 99;
console.log(nums);// [99, 20. 30]
console.log(numsBackup); // [10, 20, 30]の予想が[99, 20, 30]が表示される配列では、const numsBackup = nums; とした時点で、どちらもnumsの持つ配列を参照します。
これは、配列の持つデータが大きくなりすぎる場合を懸念したものであり、配列やオブジェクトでは参照するので注意が必要です。
ではnumsBackupに予想通り表示させたい場合はどうするのか。
スプレッド構文を使用して配列をバックアップします。
{
const nums = [10, 20, 30];
const numsBackup = [...nums];
nums[0] = 99;
console.log(nums);// [99, 20. 30]
console.log(numsBackup); // [10, 20, 30]
}配列（Array）
こちらについては別途配列編にて紹介しております。
関数（function）
こちらについては別途関数編にて紹介しております。
型の判定について
JavaScriptでは、typeof 演算子を使用して変数のデータ型や オブジェクトの特定のプロパティが存在するかどうかを確認したりするために使用されます。
以下に、主な型演算子とその使用方法を解説します。
typeof 演算子
typeof演算子は、変数や値のデータ型を返します。
返されるデータ型は文字列形式で、主に以下の種類があります。
- 数値型 (
number) - 文字列型 (
string) - ブール型 (
boolean) - 未定義型 (
undefined) - オブジェクト型 (
object) - 関数型 (
function) - シンボル型 (
symbol) - ビッグイント型 (
bigint)
let num = 42;
console.log(typeof num); // "number"
let str = "Hello";
console.log(typeof str); // "string"
let bool = true;
console.log(typeof bool); // "boolean"
let obj = { key: "value" };
console.log(typeof obj); // "object"
let func = function() {};
console.log(typeof func); // "function"
let undef;
console.log(typeof undef); // "undefined"
let sym = Symbol();
console.log(typeof sym); // "symbol"
let bigInt = 123n;
console.log(typeof bigInt); // "bigint"
instanceof 演算子
instanceof演算子は、オブジェクトが特定のクラス（コンストラクタ関数）のインスタンスであるかどうかを確認します。
返される値はブール型（trueまたはfalse）です。
class Person {}
let person = new Person();
console.log(person instanceof Person); // true
console.log(person instanceof Object); // true (すべてのオブジェクトはObjectのインスタンス)
console.log(person instanceof Array); // false
in 演算子
in演算子は、オブジェクトが特定のプロパティを持っているかどうかを確認します。返される値はブール型です。
let obj = { key: "value", anotherKey: 42 };
console.log("key" in obj); // true
console.log("anotherKey" in obj); // true
console.log("missingKey" in obj); // false
let arr = [1, 2, 3];
console.log(0 in arr); // true (インデックス0は存在する)
console.log(3 in arr); // false (インデックス3は存在しない)
型演算子の使用例
型演算子は、デバッグやデータの検証に非常に役立ちます。
以下に、型演算子を使用したいくつかの実用例を示します。
function checkType(value) {
if (typeof value === "number") {
console.log("This is a number.");
} else if (typeof value === "string") {
console.log("This is a string.");
} else if (typeof value === "boolean") {
console.log("This is a boolean.");
} else {
console.log("Unknown type.");
}
}
checkType(42); // "This is a number."
checkType("Hello"); // "This is a string."
checkType(true); // "This is a boolean."
checkType([]); // "Unknown type."
function isPerson(obj) {
return obj instanceof Person;
}
let person = new Person();
console.log(isPerson(person)); // true
console.log(isPerson({})); // false
let car = { make: "Toyota", model: "Camry" };
console.log("make" in car); // true
console.log("year" in car); // falseまとめ
JavaScriptのデータ型について理解することは、プログラムを効果的に設計・実装するための基礎です。
数値、文字列、真偽値、オブジェクト、未定義など、多様なデータ型は各種の操作において特有の振る舞いを持ちます。
適切なデータ型を選択し、その特性を活かすことで、効率的でバグの少ないコードを作成することができます。
さらに、異なるデータ型間の変換を理解することで、柔軟なプログラム設計が可能になります。
この記事を通じて、JavaScriptのデータ型に関する知識を深め、その応用方法をマスターすることで、より高度なプログラミングスキルを習得していただければ幸いです。
