具体的なコード例集
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) |