JavaScriptのデータ型を徹底解説！7つの基本と実用例

はじめに

この記事を読めば、JavaScriptのデータ型を理解し、使いこなすことができるようになります。

JavaScriptのデータ型を初心者にもわかりやすく解説し、7つの基本データ型とその使い方や注意点をサンプルコード付きで学びましょう。

●JavaScriptのデータ型とは

JavaScriptでは、変数に格納するデータにはさまざまな型が存在します。

これらの型をデータ型と呼びます。

データ型によって、変数に格納されるデータの種類や扱い方が異なります。

●7つの基本データ型

JavaScriptには、次の7つの基本データ型があります。

Number
String
Boolean
Object
Array
Null
Undefined

それぞれのデータ型について解説していきます。

○Number

Number型は、数値を扱うデータ型です。整数や小数、負の数値などを格納することができます。

また、特殊な値として、Infinity（無限大）、-Infinity（負の無限大）、NaN（数値ではない）があります。

○String

String型は、文字列を扱うデータ型です。

テキストや記号などを含む一連の文字を格納することができます。

文字列はシングルクォート（’）かダブルクォート（”）で囲んで定義します。

○Boolean

Boolean型は、真偽値（true/false）を扱うデータ型です。

条件分岐などで使われ、プログラムの制御に利用されます。

○Object

Object型は、複数のプロパティとその値を持つオブジェクトを扱うデータ型です。

他のデータ型を含むことができ、構造化されたデータを表現するのに適しています。

○Array

Array型は、複数の要素を格納するリスト構造を扱うデータ型です。要素は0から始まるインデックスでアクセスできます。

Array型は実際にはObject型の一種ですが、便宜上別のデータ型として扱われます。

○Null

Null型は、値が存在しないことを示すデータ型です。

変数に意図的に何も入っていないことを示すために使われます。

○Undefined

Undefined型は、変数が定義されているものの、値が代入されていないことを示すデータ型です。

変数を宣言したがまだ値を設定していない場合、その変数のデータ型はUndefinedになります。

●データ型の使い方とサンプルコード

○サンプルコード1：Number型の計算

このコードでは、Number型を使って簡単な四則演算を行う例を紹介しています。

この例では、足し算、引き算、掛け算、割り算を実行しています。

// 足し算
let a = 10;
let b = 20;
let sum = a + b;
console.log("足し算の結果：", sum); // 30

// 引き算
let difference = a - b;
console.log("引き算の結果：", difference); // -10

// 掛け算
let product = a * b;
console.log("掛け算の結果：", product); // 200

// 割り算
let quotient = a / b;
console.log("割り算の結果：", quotient); // 0.5

○サンプルコード2：String型の操作

このコードでは、String型を使って文字列の操作を行う例を紹介しています。

この例では、文字列の結合、部分文字列の抽出、文字列の置換を行っています。

// 文字列の結合
let str1 = "こんにちは、";
let str2 = "JavaScript!";
let result = str1 + str2;
console.log("文字列の結合：", result); // こんにちは、JavaScript!

// 部分文字列の抽出
let substring = result.substring(0, 5);
console.log("部分文字列の抽出：", substring); // こんにちは

// 文字列の置換
let replaced = result.replace("JavaScript", "世界");
console.log("文字列の置換：", replaced); // こんにちは、世界!

○サンプルコード3：Boolean型の条件分岐

このコードでは、Boolean型を使って条件分岐を行う例を紹介しています。

この例では、条件式の結果に応じて異なる処理を実行しています。

let age = 18;

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

○サンプルコード4：Object型のプロパティ操作

このコードでは、Object型を使ってオブジェクトのプロパティを操作する例を紹介しています。

この例では、オブジェクトのプロパティにアクセスし、値を取得・変更しています。

let person = {
  name: "山田太郎",
  age: 25
};

// プロパティにアクセス
console.log("名前：", person.name); // 山田太郎
console.log("年齢：", person.age); // 25

// プロパティの値を変更
person.age = 26;
console.log("更新後の年齢：", person.age); // 26

○サンプルコード5：Array型の要素操作

このコードでは、Array型を使って配列の要素を操作する例を紹介しています。

この例では、要素の追加、削除、取得、および配列の長さを取得しています。

// 配列の作成
let fruits = ["りんご", "みかん", "バナナ"];

// 要素の追加
fruits.push("ぶどう");
console.log("要素の追加：", fruits); // ["りんご", "みかん", "バナナ", "ぶどう"]

// 要素の削除
fruits.splice(1, 1);
console.log("要素の削除：", fruits); // ["りんご", "バナナ", "ぶどう"]

// 要素の取得
let firstFruit = fruits[0];
console.log("要素の取得：", firstFruit); // "りんご"

// 配列の長さを取得
let length = fruits.length;
console.log("配列の長さ：", length); // 3

○サンプルコード6：NullとUndefinedの違い

このコードでは、NullとUndefinedの違いを理解するための例を紹介しています。

この例では、NullとUndefinedがどのように振る舞うかを比較しています。

let nullValue = null;
let undefinedValue;

console.log("nullValueの型：", typeof nullValue); // "object"
console.log("undefinedValueの型：", typeof undefinedValue); // "undefined"

console.log("nullValue === null：", nullValue === null); // true
console.log("undefinedValue === undefined：", undefinedValue === undefined); // true

●注意点と対処法

各データ型には注意点や、それに対処する方法があります。

例えば、Number型では、浮動小数点数の計算誤差が発生する場合があります。

これに対処するために、適切な精度で数値を丸めることが重要です。

●実用例とサンプルコード

○サンプルコード7：データ型を使ったショッピングカート

このコードでは、データ型を組み合わせてショッピングカートの機能を実現する例を紹介しています。

この例では、オブジェクト、配列、数値、文字列、真偽値を利用しています。

// ショッピングカートの定義
let shoppingCart = [
  { name: "りんご", price: 100, quantity: 2 },
  { name: "みかん", price: 50, quantity: 5 },
  { name: "バナナ", price: 150, quantity: 3 }
];

// カート内の合計金額を計算
function calculateTotal(cart) {
  let total = 0;
  for (let item of cart) {
    total += item.price * item.quantity;
  }
  return total;
}

// 合計金額を表示
let totalPrice = calculateTotal(shoppingCart);
console.log("合計金額：", totalPrice); // 850

このサンプルコードでは、ショッピングカートに入っている商品を表すオブジェクトの配列を定義しています。

その後、カート内の合計金額を計算するcalculateTotal関数を定義し、その結果を表示しています。

このように、データ型を組み合わせることで、現実の問題を解決するプログラムを作成することができます。