導入：なぜparseIntの「挙動」を知っておくべきか
JavaScriptで文字列を数値に変換する際、最も一般的に使われるのが parseInt 関数です。しかし、この関数は「文字列の先頭から数字を読み取る」という仕様のため、安易に使うと予期せぬバグを引き起こすことがあります。例えば、ユーザー入力やAPIレスポンスの処理において、意図しない型変換や数値の切り捨てが発生し、バグの温床になりがちです。本記事では、安全に数値変換を行うための正しい知識と実装方法を解説します。
基礎知識：parseIntとは何か
parseInt(string, radix) は、第1引数の文字列を解析し、第2引数で指定した基数（進数）の整数を返す関数です。
重要なポイントは以下の2点です。
1. 文字列の解析: 文字列の先頭から解析を行い、数字以外の文字が現れた時点で停止します。そのため、”10px” は 10 になりますが、”px10″ は NaN になります。
2. 基数（radix）の指定: 以前の古いブラウザ環境では、先頭が “0” で始まる文字列を「8進数」と解釈することがありました。現在は10進数がデフォルトですが、予期せぬ動作を防ぐため、常に第2引数に 10 を指定することが推奨されています。
実装/解決策：より安全な代替案と使い分け
数値変換には、parseInt以外にも Number() コンストラクタや parseFloat() があります。
- Number(): 文字列全体を厳密に数値に変換します。空白文字が含まれていたり、数値以外の文字が混ざっていると NaN を返すため、入力チェックに適しています。
- parseInt(): 「10px」のような単位付きの数値から数値部分だけを抽出したい場合に有効です。
サンプルプログラム：安全な変換コード例
// 1. 推奨される書き方：常に基数(10)を指定する
const strNum = "42";
const result = parseInt(strNum, 10);
console.log(result); // 42
// 2. 単位が含まれる場合の活用例
const cssValue = "100px";
const numericValue = parseInt(cssValue, 10);
console.log(numericValue); // 100
// 3. 失敗例：Number()との違い
const invalidStr = "10abc";
console.log(parseInt(invalidStr, 10)); // 10 (途中で解析が止まる)
console.log(Number(invalidStr)); // NaN (全体が数値でないと失敗する)
// 実務での安全な実装例
function toSafeInteger(value) {
const parsed = parseInt(value, 10);
// NaNをチェックして、数値ではない場合は0を返す等の保護
return isNaN(parsed) ? 0 : parsed;
}
応用・注意点：現場で陥りやすいバグ
現場で最も多いトラブルは「parseFloatとの混同」と「浮動小数点数の計算」です。
parseInt はあくまで「整数」に変換するため、小数点を含む文字列（”10.5″など）を処理すると、小数部分が切り捨てられて 10 になります。金額や計算精度が必要な場合は、必ず parseFloat を使用してください。
また、空文字や null を渡すと parseInt は NaN を返します。フロントエンドでフォームの値を直接扱う際は、必ず `Number.isNaN()` や `if (value)` 等で値の存在確認を行ってから変換処理を通すようにしましょう。このひと手間で、アプリケーションの堅牢性が大きく向上します。