この記事の要点
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 (型まで厳格に判定)

関連記事

• 辞書型を文字列に変換する方法
• オブジェクトを結合する方法