こんにちは、フリーランスエンジニアになって1年のぽんねぐです！
いきなりですが、皆さんはJavaScriptのデータ型についてどれくらいご存じでしょうか？
いきなりすぎ！！そもそも「データ型」ってなーに？？意味わかんない..
そうですよね…「データ型」とはプログラム内で扱うデータの種類を示す概念です。
タンスにラベルを貼って指定の物をしまうイメージです。
本日はJavaScriptのデータ型解説ということで、「どんなデータ型があるの？」「JavaScriptのデータ型を幅広く知りたい！」といった方に向けて自分の知識整理も兼ねて記事にします。
そもそもJavaScriptってなんだっけ？という方はこちらの記事をご参考頂けたらと思います。
また、今からシステムエンジニアを目指す人は以下を見て頂けたらと思います。
以下、目次となります。
はじめに
JavaScriptは、Web開発の中心的なプログラミング言語であり、その柔軟性と強力さで知られています。しかし、JavaScriptの特徴の一つに「動的型付け言語」という特性があります。これにより、変数が宣言されたときに特定のデータ型を持たず、実行時にそのデータ型が決定されます。この柔軟さが、初心者には学びやすい一方で、自身の予期しない動作を引き起こす原因にもなります😨
そのため、JavaScriptのデータ型について理解することは、言語の基礎を確実に押さえ、予期せぬエラーを回避するために不可欠です。
JavaScriptのデータ型は大きく分けて2つのカテゴリに分類されます。それは「プリミティブ型」と「オブジェクト型」です。まずは、基本となる「プリミティブ型」から見ていきましょう。
プリミティブ型について
プリミティブ型は、JavaScriptの最も基本的なデータ型であり、これらは直接値を保持します。
プリミティブ型には以下のような種類があります。一つずつ見ていきましょう。
数値（Number）
Number型は整数や小数を表します。JavaScriptでは、すべての数値は64ビットの浮動小数点数として表され、特別な数値として Infinity（無限）や NaN（Not a Number）が含まれます。
数値型は、四則演算（足し算、引き算、掛け算、割り算）や条件分岐時の比較などといった操作をする際に使用されます。計算が必要なすべての場面で、数値型は基本的なデータ型となります。
例：
let num = 42;
let floatNum = 3.14;文字列（String）
String型はテキストデータを表します。シングルクォート (') やダブルクォート (") で囲んで表現され、JavaScriptでは文字列は不変で、一度作成された文字列は変更できません。
画面に表示させたい文字やサーバにしまっておきたい文字列などウェブサイトやシステムを作成する上で一番多く登場するといっても過言ではないかもしれません。
例：
let greeting = "Hello, ぽんねぐ!";真偽値（Boolean）
Boolean型は、論理的な true または false の二値を表すデータ型です。条件分岐やループで頻繁に使用されます。
条件判断をシンプルにする Boolean 型がなければ、条件を評価してプログラムのフローを制御することが難しくなります。true や false というシンプルな二値で表現できるため、プログラムの動作を簡潔に記述できる点が大きな利点です。
例：
let isActive = true;
let isComplete = false;未定義（Undefined）
Undefinedは、変数が宣言されたが値が割り当てられていない状態を示します。初期化されていない変数はデフォルトで undefined となります。
例：
let unknownValue;
console.log(unknownValue); // undefined実際のプログラムで undefined を積極的に使うことは、通常は避けるべきです。意図的に undefined を値として設定するケースは少ないですが、以下のようなケースで使われたりします。
例：変数が定義されているかチェックする
let data = { name: "Alice" };
// age プロパティが存在するかどうかを確認
if (data.age === undefined) {
console.log("Age is not defined");
}上の例では、変数やプロパティが定義されているかどうかを確認するために、undefined を使っております。例えば、APIレスポンスなどで存在しないデータを処理する際に有用です。
Null
Nullは、明示的に値が存在しないことを示すために使用されます。Undefinedとは異なり、Nullは開発者が意図的に「値がない」ことを表現します。例えば、変数の初期化時などに使用されます。
例：
let targetName = null; //targetNameの初期化
targetName = "ぽんねぐ";シンボル（Symbol）
Symbolは、JavaScriptで一意の識別子を生成するために使われるプリミティブデータ型です。
他のデータ型とは異なり、Symbolは常に一意であり、同じ値を持つSymbolは存在しません。そのため、オブジェクトのプロパティやキーの名前が他と衝突しないようにしたい場合に便利です。
例：
let sym1 = Symbol("description");
let sym2 = Symbol("description");
console.log(sym1 === sym2); // falseBigInt（ビッグインテジャー）
BigIntは、非常に大きな整数を扱うためのデータ型です。従来のNumber型では安全に扱えないほど大きな整数を操作する場合に使用されます。例えば、暗号化や精度が重要な金融アプリケーションなどで利用されてます。
BigInt を作成するには、数値の末尾に n を付けるか、BigInt() 関数を使います。
例：
let bigIntValue = 1234567890123456789012345678901234567890n;
let anotherBigInt = BigInt("1234567890123456789012345678901234567890");オブジェクト型（Object Types）について
次に、「オブジェクト型」について見ていきましょう。JavaScriptでは、ほとんどのものがオブジェクトです。オブジェクト型は複数の値を保持し、プロパティとメソッドを持つことができます。主なオブジェクト型のデータ型を以下に紹介します。
オブジェクト（Object）
Objectは、複数の値やメソッド（関数）を1つのデータ構造にまとめて扱うための基本的なデータ型です。オブジェクトは、キーと値のペアの集合で構成され、非常に柔軟に使用できるため、データの構造化や状態の管理、そしてプロパティの追加・削除など動的なプログラムの作成に役立ちます。
例：
let person = { //オブジェクトpersonを宣言
name: "ぽんねぐ",
age: 29,
isStudent: false,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
console.log(person.name); // "ぽんねぐ"
console.log(person.age); // 29
person.sayHello(); // "Hello, my name is ぽんねぐ"
// プロパティの追加
person.memo = "今日はハッピーです";
console.log(person.memo); // 今日はハッピーです
// プロパティの削除
delete person.memol;
console.log(person.memo); // undefined配列（Array）
Arrayは、複数の要素を格納できるリストのようなもので、各要素はインデックス（0から始まる数値）を使ってアクセスします。配列は、[]（角括弧）を使って定義し、要素はカンマで区切ります。
例：
let numbers = [10, 20, 30, 40, 50];
console.log(numbers[0]); // 10
console.log(numbers[3]); // 40また、JavaScriptの配列は同じデータ型だけでなく、異なるデータ型を混在させることが可能ということが特徴です。たとえば、数値、文字列、オブジェクトなどを一緒に配列に格納できます。
例：異なるデータ型を混在させることができる
let mixedArray = [100, "Hello", { key: "value" }, true];
console.log(mixedArray[1]); // "Hello"
console.log(mixedArray[2].key); // "value"関数（Function）
Functionは、コードの再利用可能なブロックであり、JavaScriptではファーストクラスオブジェクトとして扱われます。つまり、関数は他のオブジェクトと同様に変数に代入されたり、引数として渡されたりすることができます。
例：
function greet() {
return "Hello, ぽんねぐ!";
}
console.log(greet()); // Hello, ぽんねぐ!日付（Date）
Dateは、日付と時刻の情報を扱うためのオブジェクトです。これにより、特定の日付や時間を表現し、さまざまな操作を行うことができます。
画面に出力するのももちろんですが、実際の業務では、いつどんな操作を行ったか確認するためのプログラム実行ログファイルを出力する際などにも多く登場します。
例：
// 現在の日付と時刻を取得
const now = new Date();
console.log(now); // 例: Fri Oct 04 2024 10:45:00 GMT+0900 (Japan Standard Time)
//年部分だけ取り出す
const year = now.getFullYear(); // 2024
//日にち部分だけ取り出す
const date = now.getDate(); // 4
その他の組み込みオブジェクト
他にもJavaScriptでは、Map、Set、WeakMap、および WeakSetなどといったデータを管理するための特別なオブジェクト型が存在します。これらはそれぞれ異なる用途を持ち、特定のシナリオで有用ですが、本記事ではここまでにしようと思います！
プリミティブ型とオブジェクト型の違い
参照型と値型の違い
プリミティブ型とオブジェクト型の大きな違いは、「値型」と「参照型」の違いにあります。プリミティブ型は「値そのもの」を保持するのに対し、オブジェクト型は「参照」を保持します。つまり、オブジェクト型のデータは、他の変数にコピーされた場合でも、元のオブジェクトを共有します。
といってもまぁ意味わかんないですよね。。。以下に例を記載します。
値そのものを保持する例：プリミティブ型
let a = 10; // aは10を保持
let b = a; // bにaの値を代入
b = 20; // bを20に変更
console.log(a); // 10（aは変更されていない）
console.log(b); // 20（bの値は変更された）
//aの値をbに代入した後、bを変更してもaには影響が無い。参照を保持する例：オブジェクト型
let obj1 = { name: "ぽんねぐ" }; // obj1はオブジェクトを保持
let obj2 = obj1; // obj2はobj1と同じオブジェクトを参照
obj2.name = "Bob"; // obj2を通じてnameを変更
console.log(obj1.name); // "Bob"（obj1も変更されている）
console.log(obj2.name); // "Bob"（obj2も同じオブジェクトを参照している）
//obj2がobj1の参照を持っているため、obj2を通じてオブジェクトのnameプロパティを変更すると、obj1にもその変更が反映される。データ型の変換（型キャスト）
JavaScriptでは、あるデータ型を別のデータ型に変換することが可能です。型変換は「暗黙的」または「明示的」に行われます。
暗黙の型変換と明示的な型変換
JavaScriptは、必要に応じてデータ型を自動的に変換します。これを「暗黙的な型変換」と言います。
例：
let result = "5" + 2; // "52"（文字列に変換される）開発者が意図的にデータ型を変換する場合には、Number() や String() を使用して「明示的な型変換」を行います。
例：
let num = Number("5"); // 5（数値に変換される）Number(), String(), Boolean() の使い方
Number() の使い方
Number() 関数は、文字列や他の型を数値に変換します。数値に変換できない場合は NaN（Not a Number）を返します。
例：
let num1 = Number("42"); // 42（文字列を数値に変換）
let num2 = Number(true); // 1（trueは1に変換される）
let num3 = Number(false); // 0（falseは0に変換される）
let num4 = Number(null); // 0（nullは0に変換される）
let num5 = Number("abc"); // NaN（文字列を数値に変換できない場合はNaNを返す）String() の使い方
String() 関数は、数値や他の型を文字列に変換します。ほとんどの値はそのまま文字列化され、null や undefined も文字列に変換されます。
例：
let str1 = String(42); // "42"（数値を文字列に変換）
let str2 = String(true); // "true"（真偽値を文字列に変換）
let str3 = String(false); // "false"（falseも文字列に変換）
let str4 = String(null); // "null"（nullを文字列に変換）
let str5 = String(undefined); // "undefined"（undefinedを文字列に変換）Boolean() の使い方
Boolean() 関数は、任意の値を真偽値に変換します。基本的に、0、null、undefined、NaN、空文字列 ("") は false に変換され、それ以外の値は true に変換されます。
例：
let bool1 = Boolean(1); // true（1はtrueに変換される）
let bool2 = Boolean(0); // false（0はfalseに変換される）
let bool3 = Boolean("hello"); // true（空でない文字列はtrueに変換される）
let bool4 = Boolean(""); // false（空文字列はfalseに変換される）
let bool5 = Boolean(null); // false（nullはfalseに変換される）
let bool6 = Boolean(undefined); // false（undefinedもfalseに変換される）
let bool7 = Boolean(NaN); // false（NaNはfalseに変換される）このあたりは使う機会もほとんど無いので、知らない人も多そうですね！Booleanで型変換するケースを作成したことは正直私は無いです😂
JavaScriptのエラーを防ぐ型チェックのベストプラクティス
型の違いによるエラーを避けるためには、厳密な型チェックが重要です。typeof や instanceof を使って適切なデータ型を確認し、想定外の型が入ることを防ぎましょう。また、型安全なコードを書くことで、将来的なバグや予期しない動作を防ぐことができます。
まとめ
今回の記事では、JavaScriptのデータ型に特化して細かく解説しました。
今回のポイントをまとめますと、次のとおりです。
何か不明点などございましたらコメント欄に記載頂けたらと思います！
以上、最後までお読みいただきありがとうございました。