JavaScriptのparseInt・parseFloatの使い方と数値への変換テクニック

1. parseInt・parseFloatとは？文字列を数値に変える基本

1. parseInt・parseFloatとは？文字列を数値に変える基本

JavaScriptを扱っていると、画面の入力フォームや計算アプリなどで「見た目は数字だけど、プログラム上は文字（文字列）」としてデータが届くことがよくあります。そのままでは足し算ができず、文字としてつながってしまうため、これらをコンピュータが計算できる「数値」として認識させる必要があります。

そこで活躍するのが、parseIntとparseFloatという2つの便利な関数です。

役割の違いをシンプルに理解しよう

まずは、この2つの使い分けをイメージ図とサンプルコードで見てみましょう。

• parseInt（パース・イント）： 文字列を「整数（1, 100, -5など）」に変換します。小数点以下は切り捨てられます。
• parseFloat（パース・フロート）： 文字列を「浮動小数点数（3.14, 0.5など）」に変換します。小数をそのまま扱いたい時に使います。

プログラミング未経験の方でもわかりやすい、最も基本的な変換の例がこちらです。

// 「100円」という文字から数字の100を取り出すイメージ
let price = parseInt("100円");
console.log(price);

// 「3.1415...」という文字を小数のまま取り出す
let pi = parseFloat("3.14");
console.log(pi);

実行結果：

100
3.14

このように、parseIntは「キリの良い数字（整数）」に、parseFloatは「細かい数字（小数）」に変換するための専門家だと覚えておけばバッチリです！

2. parseIntの基本的な使い方：文字列を数値に変換する方法

2. parseIntの基本的な使い方：文字列を数値に変換する方法

JavaScriptで「文字として書かれた数字」を「計算ができる数値」に変換したいときに欠かせないのがparseInt（パース・イント）関数です。プログラミング未経験の方でも、まずは「文字列から整数を取り出す魔法の箱」だとイメージすれば分かりやすいでしょう。

まずは、最もシンプルな書き方と実行結果を見てみましょう。

// 1. 基本的な変換
const price = parseInt("100");
console.log(price);

// 2. 単位付きの文字列から数字だけを取り出す
const width = parseInt("250px");
console.log(width);

// 3. 数字が先頭にない場合
const errorBox = parseInt("No.101");
console.log(errorBox);

実行結果は以下のようになります。

100
250
NaN

初心者でも押さえておきたいポイント

parseIntには、初心者がつまずきやすい「読み取りのルール」がいくつかあります。

• 先頭の数字を優先： "250px"のように、後ろに文字がついていても、先頭が数字であればその部分だけをスマートに抜き出してくれます。これはWebデザインの計算などで非常に便利です。
• 先頭が文字ならエラー： 逆に"No.101"のように、先頭が数字でない場合はNaNという結果を返します。これは「Not a Number」の略で、「数値として変換できなかったよ」というJavaScriptからの合図です。
• 端数は切り捨て： あくまで「整数（Integer）」に変換する関数なので、"10.5"のような小数を渡すと、小数点以下は切り捨てられて10になります。

このように、ユーザーが入力フォームに入力した値（すべて文字列として扱われます）を計算に使いたい場面で、この関数は非常に重宝されます。

3. parseFloatの基本的な使い方

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を使うの？

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

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

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

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

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

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

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

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の注意点

6. parseInt・parseFloatの注意点

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

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

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. 実用的な使い方の例

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のプロジェクトで応用可能です。ぜひ、自分の書くコードの中で積極的に取り入れ、手に馴染ませていってください。