| この記事の要点 |
|---|
- Vue.js / JavaScript の主要データ型
- プリミティブ: number / string / boolean / null / undefined / symbol / bigint
- オブジェクト型: Object / Array / Function / Date / RegExp / Map / Set
typeof で型確認: typeof "" === "string"- Vue の props 型指定:
type: String 等で実行時バリデーション
|
JavaScript のデータ型
プリミティブ型 (7 種類)
| 型 | 例 | typeof 結果 |
|---|
| number | 42, 3.14, NaN, Infinity | "number" |
| string | "hello", \'world\', `tpl` | "string" |
| boolean | true, false | "boolean" |
| null | null | "object"（歴史的バグ） |
| undefined | undefined | "undefined" |
| symbol | Symbol("id") | "symbol" |
| bigint | 123n, BigInt("9007199254740992") | "bigint" |
オブジェクト型
| 型 | 例 | 判定方法 |
|---|
| Object | {a: 1} | typeof obj === "object" |
| Array | [1, 2, 3] | Array.isArray(arr) |
| Function | () => {} | typeof fn === "function" |
| Date | new Date() | obj instanceof Date |
| RegExp | /abc/ | obj instanceof RegExp |
| Map / Set | new Map() | obj instanceof Map |
| Promise | Promise.resolve() | obj instanceof Promise |
型変換
文字列 ↔ 数値
// 文字列 → 数値
Number("42") // → 42
Number("3.14") // → 3.14
Number("abc") // → NaN
parseInt("42px") // → 42 (途中まで数値として読む)
parseFloat("3.14rad") // → 3.14
+"42" // → 42 (短縮形)
// 数値 → 文字列
String(42) // → "42"
(42).toString() // → "42"
42 + "" // → "42"
(3.14).toFixed(2) // → "3.14"
真偽値変換
// 真偽値への変換 (truthy / falsy)
Boolean(0) // → false
Boolean("") // → false
Boolean(null) // → false
Boolean(undefined) // → false
Boolean(NaN) // → false
// 上記以外は全て true
// 短縮形
!!value // 二重否定で真偽値化
!value // 反転
// truthy / falsy を活用
const name = userName || "ゲスト"; // userName が falsy なら "ゲスト"
if (data) { ... } // data が truthy なら
JSON 変換
// オブジェクト → 文字列
JSON.stringify({a: 1, b: "x"}) // → '{"a":1,"b":"x"}'
JSON.stringify(obj, null, 2) // → 整形
// 文字列 → オブジェクト
JSON.parse('{"a":1}') // → {a: 1}
// 型変換時の罠
JSON.stringify(undefined) // → undefined (キーごと消える)
JSON.stringify(new Date()) // → "2026-05-15T..." (ISO 文字列)
JSON.stringify(function(){}) // → undefined
Vue.js での型指定（props）
export default {
props: {
// 基本型指定
title: String,
count: Number,
active: Boolean,
tags: Array,
user: Object,
onChange: Function,
// 詳細指定
message: {
type: String,
required: true,
default: "",
validator: (value) => value.length > 0
},
// 複数型許可
id: [String, Number],
// ネスト型 (型チェックされない、構造は分からない)
data: Object
}
};
TypeScript での厳格な型
// 基本型
let name: string = "Alice";
let age: number = 30;
let active: boolean = true;
let tags: string[] = ["dev", "admin"];
let user: { name: string; age: number } = { name: "Alice", age: 30 };
// オプション
let phone?: string; // string | undefined
// Union 型
let id: string | number = 1;
// インタフェース
interface User {
id: number;
name: string;
email?: string;
}
const user: User = { id: 1, name: "Alice" };
// 型エイリアス
type UserStatus = "active" | "inactive" | "suspended";
const status: UserStatus = "active";
// ジェネリクス
function first(arr: T[]): T | undefined {
return arr[0];
}
const n = first([1, 2, 3]); // n: number | undefined
const s = first(["a", "b"]); // s: string | undefined
型判定の注意点
typeof の罠
typeof null // → "object" (バグ)
typeof [] // → "object" (配列も object)
typeof function(){} // → "function"
// 正確な判定
function getType(value) {
if (value === null) return "null";
if (Array.isArray(value)) return "array";
return typeof value;
}
// または Object.prototype.toString.call
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(new Date()) // "[object Date]"
NaN の判定
NaN === NaN // → false (自分自身とも等しくない！)
isNaN(NaN) // → true
Number.isNaN(NaN) // → true (推奨、文字列も拒否する厳格判定)
isNaN("abc") // → true (Number 変換した結果が NaN)
Number.isNaN("abc") // → false (型まで厳格に判定)
関連記事
