JavaScript: JavaScript ユーティリティメソッド
最終更新：2026-10-13
型変換について学んできたところで、毎日使うユーティリティメソッドを一挙に学びましょう。スイスアーミーナイフのようなものです。それぞれ単純ですが、必要な時にはどれも欠かせません。
1. 便利なユーティリティメソッド
文字列の先頭から数値を解析し、最初の非数値文字で停止します。
HTML
<script>
console.log(parseInt("42px")); // 42
console.log(parseInt("3.14")); // 3（整数部分のみ）
console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("3.14abc")); // 3.14
console.log(parseInt("abc42")); // NaN（数値で始まらない）
</script>
parseInt の第2引数は基数を指定します。
HTML
<script>
console.log(parseInt("FF", 16)); // 255（16進数）
console.log(parseInt("10", 2)); // 2（2進数）
</script>
落とし穴：基数を指定しないと、0x で始まる文字列は16進数として解析されます。常に第2引数に 10 を渡してください。
(2) isNaN と Number.isNaN
| メソッド | 動作 |
|---|---|
isNaN(value) |
まず数値に変換してから NaN かどうかをチェック |
Number.isNaN(value) |
値が NaN かを厳密にチェック（変換なし） |
HTML
<script>
console.log(isNaN("hello")); // true（Number("hello") → NaN、その後 true）
console.log(Number.isNaN("hello")); // false（"hello" 自体は NaN ではない）
console.log(isNaN(undefined)); // true
console.log(Number.isNaN(undefined));// false
</script>
結論：Number.isNaN() を使いましょう。暗黙的に型を変換しません。
(3) toFixed
小数点以下の桁数を制御し、文字列を返します。
HTML
<script>
console.log((3.14159).toFixed(2)); // "3.14"
console.log((3.1).toFixed(4)); // "3.1000"（ゼロでパディング）
console.log((3.145).toFixed(2)); // "3.14" または "3.15"（浮動小数点精度の問題。丸め保証なし）
</script>
toFixed は文字列を返すため、計算に使う場合は Number() で数値に戻してください。
(4) toString
数値を文字列に変換します。基数の指定にも対応しています。
HTML
<script>
console.log((255).toString()); // "255"
console.log((255).toString(16)); // "ff"
console.log((8).toString(2)); // "1000"
console.log((100).toString(8)); // "144"
</script>
真偽値と配列にも toString があります。
HTML
<script>
console.log(true.toString()); // "true"
console.log([1,2,3].toString()); // "1,2,3"
</script>
(5) Number.isInteger
値が整数かどうかを判定します。
HTML
<script>
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(5.0)); // true（5.0 は単に 5）
console.log(Number.isInteger(5.5)); // false
console.log(Number.isInteger("5")); // false（文字列は整数ではない）
console.log(Number.isInteger(NaN)); // false
</script>
(6) Math.trunc と Math.sign
Math.trunc は小数部分を単純に切り捨てます（丸めなし）。
HTML
<script>
console.log(Math.trunc(4.9)); // 4
console.log(Math.trunc(-4.9)); // -4
console.log(Math.trunc(4.1)); // 4
</script>
Math.sign は数値の符号を返します。
HTML
<script>
console.log(Math.sign(5)); // 1
console.log(Math.sign(-5)); // -1
console.log(Math.sign(0)); // 0
console.log(Math.sign(-0)); // -0
console.log(Math.sign(NaN)); // NaN
</script>
(7) typeof の限界
typeof は通常の型チェックに使えますが、いくつかの古典的な落とし穴があります。
HTML
<script>
console.log(typeof 42); // "number" ✅
console.log(typeof "hello"); // "string" ✅
console.log(typeof true); // "boolean" ✅
console.log(typeof undefined); // "undefined" ✅
console.log(typeof null); // "object" ❌ これは歴史的なバグ！
console.log(typeof []); // "object" ❌ 配列もオブジェクト
console.log(typeof {}); // "object" ✅
console.log(typeof function(){}); // "function" ✅
</script>
typeof null === "object" は JavaScript の「ベテランバグ」です。1995年以来存在し、修正することはできません。null のチェックには value === null を使いましょう。配列のチェックには Array.isArray() を使いましょう。
(8) サンプル：価格計算機
▶ 試してみよう(9) サンプル：入力検証ツール
▶ 試してみよう(10) サンプル：typeof と型チェック
▶ 試してみよう❓ よくある質問
Q
toFixed が丸めを保証しないのはなぜですか？A 浮動小数点数は2進数で正確に表現できないためです。
(0.1 + 0.2).toFixed(1) は "0.3" になるとは限りません。正確な丸めには、toFixed を呼び出す前に Math.round(num * 100) / 100 を使いましょう。A
parseFloat("42px") は 42 を返します（先頭から解析し、最初の非数値文字で停止）。一方、Number("42px") は NaN を返します（文字列全体を解析し、非数値文字があれば失敗）。混合テキストから数値を抽出するには parseFloat を、厳密な検証には Number() を使いましょう。📖 まとめ
parseInt(str, radix)で整数解析、基数指定で安全。parseFloat(str)で浮動小数点数isNaN(value)でNaN判定。NaN === NaNはfalse、Number.isNaNが厳格- 明示的変換：
Number(value)、String(value)、Boolean(value)が安全 num.toFixed(digits)で小数点以下の桁数を指定して文字列を返す- 型チェック：
typeofでプリミティブ、Array.isArray()で配列、Object.prototype.toString.call()で精密判定
📝 練習問題
parseChineseNumber(str)関数を書きましょう。"3.5元"→3.5、"100人"→100、"約200"→200のように文字列から数値を解析してください（parseFloatを使用）。プレーンテキストの場合はNaNを返すように処理してください。formatMoney(amount)関数を書きましょう。数値を引数に取り、カンマ区切りの桁区切りと小数点以下2桁の文字列を返してください。例：1234567.89→"1,234,567.89"（ヒント：toFixedとtoStringを配列メソッドと一緒に使う）。getType(value)関数を書きましょう。typeofの欠点を補完し、nullには"null"を、配列には"array"を、それ以外はtypeofの結果を返してください。
