先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字で書かれた数字を計算に使いたいんですが、うまくできません。どうしたらいいですか？」

先生

「それはparseIntやparseFloatという関数を使うと簡単にできますよ。文字列を数字に変換するテクニックです。」

生徒

「parseIntやparseFloatって何ですか？どう使うんですか？」

先生

「それでは、基本からわかりやすく説明していきますね！」

1. parseInt・parseFloatとは？

JavaScriptで文字（文字列）として書かれた数字を、実際に計算で使える「数値」に変える関数です。

parseIntは「整数（小数点なしの数字）」に変換し、parseFloatは「小数点を含む数字」に変換します。

2. parseIntの基本的な使い方

parseIntは文字列の中から、先頭の数字だけを読み取って整数に変換します。


console.log(parseInt("123"));     // 123（整数）
console.log(parseInt("123abc"));  // 123（数字だけ読み取る）
console.log(parseInt("abc123"));  // NaN（数字が先頭にないので変換できない）

文字列の先頭に数字があると、その部分だけ数字として取り出します。数字が先頭にない場合はNaN（Not a Numberの略で「数字じゃない」という意味）になります。

3. parseFloatの基本的な使い方

parseFloatは小数点も含めて数字を取り出します。たとえば小数の計算をしたい時に便利です。


console.log(parseFloat("3.14"));       // 3.14（小数点ありの数字）
console.log(parseFloat("3.14abc"));    // 3.14（数字だけ読み取る）
console.log(parseFloat("abc3.14"));    // NaN（先頭に数字がないので変換できない）

4. なぜparseIntやparseFloatを使うの？

ブラウザで入力フォームなどから受け取った値は「文字列」として扱われます。そのままだと計算ができません。

たとえば、"10"と"20"を足すと「1020」という文字のつながりになってしまいます。


console.log("10" + "20");   // "1020"（文字列の結合）

そこで、parseIntやparseFloatで文字列を数字に変換すると、正しく足し算できます。


console.log(parseInt("10") + parseInt("20"));   // 30（数字の足し算）

5. parseIntの基数（進数）指定について

parseIntは、数字が何進法かを指定することができます。たとえば2進数（0と1だけの数字）や16進数（0〜9とA〜F）を扱う場合です。


console.log(parseInt("1010", 2));    // 10（2進数の1010は10進数の10）
console.log(parseInt("1A", 16));     // 26（16進数の1Aは10進数の26）

ただし、普段は省略しても10進数（普通の数字）として扱われます。

6. parseInt・parseFloatの注意点

文字列の途中に数字以外の文字があっても、先頭から数字部分だけ読み取ります。
数字が先頭にない文字列はNaNになります。NaNは計算に使えない特別な値です。
parseIntは小数点以下を切り捨てて整数にします。
parseFloatは小数点以下もそのまま数字にします。

7. 便利な数値変換テクニック

parseIntやparseFloatの他にも、数値変換の方法はいくつかあります。

Number()関数：文字列を数字に変換。小数も整数も変換可能。
プラス記号（+）：文字列の前に付けると数字に変換する簡単な方法。


// Number関数の例
console.log(Number("123.45"));   // 123.45

// +を使った変換の例
console.log(+"123.45");          // 123.45

ただし、Number()や+は文字列全体が数字でないとNaNになるので注意が必要です。


console.log(Number("123abc"));  // NaN
console.log(+"123abc");         // NaN

8. 実用的な使い方の例

ユーザーが入力した値を計算に使う場合は、parseIntやparseFloatで変換してから計算すると安全です。


let input = "50.5";             // ユーザーの入力（文字列）
let price = parseFloat(input);  // 小数に変換
let quantity = 3;
let total = price * quantity;   // 正しい計算になる
console.log(total);             // 151.5

まとめ

JavaScriptにおける数値変換の世界は、一見するとシンプルですが、深く知るほどにその奥深さと重要性がわかってきます。今回の学習を通じて、文字列として扱われている数字を適切に「数値データ」へと変換することの大切さを理解できたのではないでしょうか。ウェブ開発の現場では、ユーザーがテキストボックスに入力した値や、外部のデータベースから取得した情報は、その多くが「文字列」としてプログラムに渡されます。これらをそのまま算術演算子で計算しようとすると、意図しない挙動やバグの原因となるため、parseIntやparseFloatといった変換関数の使いこなしは、JavaScriptエンジニアにとって必須のスキルと言えます。

各変換メソッドの使い分けと特性

今回学んだ各メソッドには、それぞれ得意分野と注意すべき特性があります。これらを適切に使い分けることで、より堅牢でバグの少ないコードを書くことが可能になります。

parseInt関数の役割： 文字列から整数部分を抽出することに特化しています。特に、単位が含まれる文字列（例：「100px」や「20kg」）から数値だけを取り出したい場合に非常に強力です。また、第二引数に基数（2進数、10進数、16進数など）を指定できる点は、他の変換方法にはない大きな特徴です。
parseFloat関数の役割： 小数点を含む値を正確に扱いたい場合に必須となります。金額計算や科学計算、GPSの座標データなど、精度が求められる場面で活躍します。整数もそのまま数値として扱えるため、汎用性が高いのも魅力です。
Number関数と単項プラス（+）演算子： これらは「厳格な変換」に向いています。文字列全体が純粋な数字のみで構成されている場合に、最も高速かつ直感的に記述できます。ただし、一文字でも数字以外の文字が混じると即座にNaNを返すため、入力データの品質が保証されている場合に使用するのがベストです。

実践的なサンプルプログラム

それでは、学んだ知識を定着させるために、より実践的なコードを書いてみましょう。例えば、ショッピングサイトのカート機能で、商品の単価（文字列）と個数（数値）を掛け合わせ、消費税を加味した合計金額を算出する処理を考えてみます。ここでは、文字列に単位が含まれていても正しく計算できるように工夫しています。


// ユーザーが入力した商品単価（文字列、単位付き）
const inputPrice = "2980円";
// 購入個数（数値）
const quantity = 3;
// 消費税率
const taxRate = 1.1;

// parseIntを使って「円」を除去し、数値に変換
const priceValue = parseInt(inputPrice, 10);

if (!isNaN(priceValue)) {
    // 合計金額を計算（単価 × 個数 × 消費税）
    const total = priceValue * quantity * taxRate;
    
    // 小数点以下を切り捨てて表示
    console.log("合計金額（税込）: " + Math.floor(total) + "円");
} else {
    console.log("価格の入力が正しくありません。");
}

上記のコードを実行すると、コンソールには次のような結果が表示されます。


合計金額（税込）: 9834円

このように、parseIntを使用することで「2980円」という文字列から「2980」という数値だけを取り出し、正常に計算を行うことができます。これがNumber("2980円")であれば、結果はNaNとなり計算に失敗してしまいます。場面に応じた関数の選択がいかに重要かがわかりますね。

型変換をマスターするためのヒント

プログラミングにおいて、データの「型」を意識することは、初心者から中級者へステップアップするための大きな壁の一つです。JavaScriptは型に対して比較的自由な言語ですが、その自由さが逆に予期せぬエラーを招くこともあります。

数値を扱う際は、常に「このデータは今、文字列なのか数値なのか」を自問自答する癖をつけましょう。特にデバッグの際は、console.log(typeof 変数名)を使って、データの型をチェックする手法も非常に有効です。また、変換に失敗した際に返ってくるNaN（非数）の存在を忘れず、isNaN()関数などでチェックを行うことで、プログラムの信頼性は飛躍的に向上します。

今日学んだテクニックは、フォームバリデーション、グラフの描画、ゲーム開発など、あらゆるJavaScriptのプロジェクトで応用可能です。ぜひ、自分の書くコードの中で積極的に取り入れ、手に馴染ませていってください。

先生と生徒の振り返り会話

生徒

先生、ありがとうございました！parseIntとparseFloatの違い、そしてNumber()関数との使い分けがすごくよくわかりました。今まで入力フォームの数字が文字として繋がっちゃって困っていたんですが、これで解決できそうです。

先生

それは良かったです！特に、文字列の途中に文字が入っていても、先頭から数字を拾ってくれるparseIntの挙動は便利でしょう？でも、実はそこに落とし穴もあるんです。例えば「100名様」なら「100」になりますが、「第1会議室」だと最初の「第」のせいでNaNになってしまいます。

生徒

あ、本当ですね。先頭が数字じゃないとダメなんですね。さっきのサンプルコードでisNaN()を使ってチェックしていたのは、そういう理由だったんですね。

先生

その通りです。安全なプログラムを書くためには、変換した後に「本当に数値になったかな？」と疑ってみることが大切です。あと、基数の「10」を指定する癖をつけておくと、将来的に古いブラウザに対応する場合や、意図しない進数誤認を防ぐことができるのでおすすめですよ。

生徒

なるほど、parseInt("10", 10)みたいに書く習慣ですね。小数のときはparseFloatを使えば、消費税の計算みたいな細かい数字もバッチリ扱えますし、JavaScriptでの計算がぐっと楽しくなりそうです！