typeof 判定(原始型) — typeof x === 'string'
JavaScript の typeof 演算子は「変数や値の型」を文字列で返します。
初心者は「この値は文字?数?それとも別の型?」を調べる道具と覚えると理解しやすいです。
基本のコード例
let x = "Hello";
console.log(typeof x); // → "string"
let y = 123;
console.log(typeof y); // → "number"
let z = true;
console.log(typeof z); // → "boolean"
JavaScripttypeof 値→ 型を文字列で返す。- よく使う判定:
typeof x === "string"typeof x === "number"typeof x === "boolean"
判定できる主な型
| 値例 | typeof の結果 | 説明 |
|---|---|---|
"abc" | "string" | 文字列 |
123 | "number" | 数値(整数・小数) |
true | "boolean" | 真偽値 |
undefined | "undefined" | 未定義 |
null | "object" | 特殊ケース(歴史的仕様バグ) |
Symbol("id") | "symbol" | シンボル型 |
10n | "bigint" | 大きな整数 |
function() {} | "function" | 関数 |
{} | "object" | オブジェクト |
[] | "object" | 配列(配列もオブジェクト扱い) |
よく使うテンプレート集
文字列判定
function printUpper(x) {
if (typeof x === "string") {
console.log(x.toUpperCase());
} else {
console.log("文字列ではありません");
}
}
printUpper("hello"); // "HELLO"
printUpper(123); // "文字列ではありません"
JavaScript数値判定
function double(x) {
if (typeof x === "number") {
return x * 2;
}
return NaN;
}
console.log(double(10)); // 20
console.log(double("10")); // NaN
JavaScript関数判定
function runIfFunc(fn) {
if (typeof fn === "function") {
fn();
} else {
console.log("関数ではありません");
}
}
runIfFunc(() => console.log("関数が呼ばれました"));
// → "関数が呼ばれました"
JavaScript例題: 入力チェック関数
function checkInput(x) {
if (typeof x === "string") {
console.log("文字列です:", x);
} else if (typeof x === "number") {
console.log("数値です:", x);
} else if (typeof x === "boolean") {
console.log("真偽値です:", x);
} else {
console.log("その他の型です:", typeof x);
}
}
checkInput("Hello"); // "文字列です: Hello"
checkInput(42); // "数値です: 42"
checkInput(true); // "真偽値です: true"
checkInput({}); // "その他の型です: object"
JavaScript実務でのコツ
- プリミティブ型判定に便利:
string,number,boolean,undefined,symbol,bigint。 - null は注意:
typeof nullが"object"になるのは仕様バグ。x === nullで判定する。 - 配列判定:
typeof []は"object"。配列判定はArray.isArray(x)を使う。 - 関数判定:
typeof fn === "function"が定番。
ありがちなハマりポイントと対策
nullが"object"になる:- 対策:
x === nullで判定。
- 対策:
- 配列が
"object"になる:- 対策:
Array.isArray(x)を使う。
- 対策:
- 数値文字列と数値の違い:
"10"→"string"10→"number"
練習問題(型ごとに処理)
function processValue(x) {
if (typeof x === "string") {
console.log("文字列の長さ:", x.length);
} else if (typeof x === "number") {
console.log("数値の2倍:", x * 2);
} else {
console.log("その他の型:", typeof x);
}
}
processValue("JavaScript"); // "文字列の長さ: 10"
processValue(7); // "数値の2倍: 14"
processValue(true); // "その他の型: boolean"
JavaScript直感的な指針
typeof= 値の型を文字列で返す。- プリミティブ型判定に便利。
- null と配列は特例に注意。
- 初心者は「文字列判定」「数値判定」「関数判定」で練習すると理解しやすい。
これを覚えれば「入力チェック」「型ごとの処理分岐」「安全な関数呼び出し」ができるようになります。
