JavaScript | データ型

javascrpit JavaScript
スポンサーリンク

具体的なコード例集

1. 数値型(Number)

// 基本的な数値
let a = 10;
let b = 3.14;
console.log(typeof a); // "number"

// 計算
console.log(a + b);    // 13.14
console.log(a / 0);    // Infinity
console.log(-a / 0);   // -Infinity
console.log(0 / 0);    // NaN

// NaNのチェック
console.log(Number.isNaN(NaN));     // true
console.log(isNaN("hello"));        // true(型変換される)
console.log(Number.isNaN("hello")); // false(安全)

// 丸め誤差の例
console.log(0.1 + 0.2 === 0.3);     // false
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // true

2. 長整数型(BigInt)

// BigInt リテラル
const big1 = 9007199254740993n; // Number では誤差が出る範囲
console.log(big1); // 9007199254740993n

// 計算
const big2 = 2n;
console.log(big1 + big2); // 9007199254740995n

// 型の違いに注意
// console.log(big1 + 1); // TypeError
console.log(big1 + 1n);  // OK

3. 文字列型(String)

let s1 = "Hello";
let s2 = 'World';
let s3 = `${s1}, ${s2}!`; // テンプレートリテラル
console.log(s3); // "Hello, World!"

// 文字列操作
console.log(s3.length);          // 13
console.log(s3.toUpperCase());   // "HELLO, WORLD!"
console.log(s3.includes("Hello"));// true
console.log(s3.split(", "));     // ["Hello", "World!"]

// イミュータブル(変更できない)
let text = "abc";
// text[0] = "z"; // 無視される
console.log(text); // "abc"

4. 真偽値型(Boolean)

console.log(Boolean(0));        // false
console.log(Boolean("0"));      // true(空文字でなければ true)
console.log(Boolean(""));       // false
console.log(Boolean([]));       // true(空配列でも true)
console.log(Boolean(null));     // false

// 条件分岐の例
const name = "";
if (name) {
  console.log("名前あり");
} else {
  console.log("名前なし"); // 出力
}

5. undefined と null

let x;
console.log(x); // undefined(まだ代入していない)

let y = null;
console.log(y); // null(意図的に「値がない」)

// 判定
console.log(typeof x); // "undefined"
console.log(typeof y); // "object" ← 歴史的仕様

console.log(x == y);  // true(型変換あり)
console.log(x === y); // false(型も比較)

6. Symbol(ユニークな識別子)

const id1 = Symbol("id");
const id2 = Symbol("id");
console.log(id1 === id2); // false(説明文字列は関係ない)

const user = {
  name: "Alice",
  [id1]: 123
};
console.log(user[id1]); // 123

// 列挙されない
for (let key in user) {
  console.log(key); // "name" だけ
}

// グローバルシンボル
const gid1 = Symbol.for("global");
const gid2 = Symbol.for("global");
console.log(gid1 === gid2); // true

7. オブジェクト型(Object)

const person = {
  name: "Bob",
  age: 25
};
console.log(person.name); // "Bob"
person.city = "Tokyo";
console.log(person);

// ネストしたオブジェクト
const company = {
  name: "ACME",
  employee: { name: "John", id: 123 }
};
console.log(company.employee.name); // "John"

// 参照コピー
const another = person;
another.age = 30;
console.log(person.age); // 30(同じオブジェクトを参照)

8. 配列型(Array)

const arr = [1, 2, 3];
arr.push(4); // 末尾に追加
console.log(arr); // [1,2,3,4]

// 非破壊的メソッド
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2,4,6,8]
console.log(arr);     // [1,2,3,4](変化なし)

// 破壊的メソッド
arr.reverse();
console.log(arr); // [4,3,2,1]

// 配列判定
console.log(typeof arr);        // "object"
console.log(Array.isArray(arr));// true

9. 型判定まとめ

console.log(typeof 123);       // "number"
console.log(typeof "abc");     // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"
console.log(typeof Symbol());  // "symbol"
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof (() => {}));// "function"

// 安全な型判定
console.log(Array.isArray([]));                   // true
console.log(Object.prototype.toString.call(null));// "[object Null]"

10. 等価比較 (== vs === vs Object.is)

console.log(0 == "0");      // true
console.log(0 === "0");     // false
console.log(null == undefined); // true
console.log(null === undefined);// false
console.log(NaN === NaN);   // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0));   // false

11. 型変換(Coercion / 明示変換)

console.log("5" + 1);   // "51"(文字列連結)
console.log("5" - 1);   // 4(数値に変換される)
console.log(+ "123");   // 123(数値化)
console.log(!!"hello"); // true(真偽値化)
console.log(String(42));// "42"
console.log(Number("abc")); // NaN

12. 浅いコピーと深いコピー

const obj1 = { a: 1, b: { c: 2 } };

// 浅いコピー
const shallow = { ...obj1 };
shallow.b.c = 99;
console.log(obj1.b.c); // 99(参照コピーされている)

// 深いコピー(構造的クローン)
const deep = structuredClone(obj1);
deep.b.c = 100;
console.log(obj1.b.c); // 99(影響なし)

13. 実践:安全な型チェック関数

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

console.log(getType([]));        // "Array"
console.log(getType(null));      // "Null"
console.log(getType(123));       // "Number"
console.log(getType(Symbol()));  // "Symbol"

14. まとめ:型チェックのベストプラクティス

チェックしたい内容推奨コード
数値かどうかtypeof x === "number"
文字列かどうかtypeof x === "string"
配列かどうかArray.isArray(x)
nullかどうかx === null
undefinedかどうかx === undefined
NaNかどうかNumber.isNaN(x)
任意の型名を取得Object.prototype.toString.call(x)
タイトルとURLをコピーしました