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の基本的な使い方と仕組み

JavaScriptで「3.14」や「100.5」といった小数点を含む数値を扱いたいときに欠かせないのがparseFloat（パースフロート）です。

プログラミングでは、ユーザーが画面に入力した値は「数値」ではなく「文字列（文字）」として扱われることがよくあります。文字列のままでは計算ができないため、parseFloatを使って「計算ができる数値」に変換してあげる必要があります。

初心者の方がまず覚えておきたい、代表的な3つのパターンを見てみましょう。

// 1. 基本：文字列を小数に変換する
console.log(parseFloat("3.14"));

// 2. 応用：後ろに文字が混ざっていても、数字だけを抜き出す
console.log(parseFloat("3.14abc"));

// 3. 注意点：先頭が数字でない場合は変換できない
console.log(parseFloat("abc3.14"));

【実行結果】

3.14
3.14
NaN

実行結果にあるNaN（ナン）は「Not a Number」の略で、「数値ではありません」というエラーのような状態を指します。 parseFloatは、データの「左端」から順番に読み取っていく性質があるため、最初から文字（abcなど）が始まっていると、解析を諦めてしまうのです。

逆に、数字で始まってさえいれば、後ろに単位（pxやkgなど）がついていても器用に数字だけを取り出してくれるので、Web制作の現場では非常によく使われる便利な機能です。

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

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

JavaScriptでプログラミングをしていると、「見た目は数字なのに、コンピュータが文字として認識している」という場面によく遭遇します。代表的なのが、ブラウザの入力フォーム（inputタグ）から受け取った値です。これらはすべて「文字列」として扱われるというルールがあります。

もし文字列のまま計算しようとすると、思わぬトラブルが起こります。たとえば、"10"と"20"という2つの値を足してみましょう。期待するのは「30」ですが、実際の結果は異なります。

// 文字列同士を「+」でつなぐと、文字が連結されてしまう
let result = "10" + "20";
console.log(result);

"1020"

このように、数字がくっついて「1020」という長い文字になってしまいます。これはコンピュータが「これは算数の足し算ではなく、文字と文字をつなげる作業だ」と勘違いしてしまうためです。

そこで登場するのが、parseInt（整数に変換）やparseFloat（小数に変換）です。これらの関数を使うことで、文字列という「箱」から中身の数字を取り出し、コンピュータに「これは計算用の数値だよ」と正しく教えることができます。

// 文字列を数値に変換してから足し算をする
let num1 = parseInt("10");
let num2 = parseInt("20");

console.log(num1 + num2);

30

この変換処理（型変換）を行うことで、初めて「10 + 20 = 30」という正しい算数の計算が可能になります。ユーザーが入力した値を使って合計金額や年齢の計算をしたいときは、この変換ステップが必須だと覚えておきましょう。

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

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

JavaScriptのparseInt関数には、第一引数に「変換したい文字列」、第二引数に「何進法で読み取るか（基数）」を指定できるルールがあります。特にプログラミング初心者の方がハマりやすいポイントなので、詳しく解説します。

基数（進数）とは？

私たちが普段使っている数字は、0から9までで桁が上がる「10進法」ですが、コンピュータの世界では「2進法（0と1だけ）」や「16進法（0〜Fまで）」がよく使われます。parseIntを使う際は、「この文字列は〇進法として読み取ってね」と正しく伝えてあげることが大切です。

例えば、2進数や16進数を10進数の数値に変換したい場合は、以下のように記述します。

// 2進数の「1010」を10進数に変換
const binarySample = parseInt("1010", 2);
console.log(binarySample);

// 16進数の「1A」を10進数に変換
const hexSample = parseInt("1A", 16);
console.log(hexSample);

実行結果は以下の通りです。

10
26

なぜ「10」を省略してはいけないのか

多くの教材では「普段は省略しても10進数として扱われる」と説明されますが、実務では必ず parseInt(str, 10) と基数を明示するのがベストプラクティスです。

理由は、古いブラウザや特定の状況下で、文字列が「0」から始まると8進数と誤認されるなど、意図しない計算ミス（バグ）を招く可能性があるからです。2026年現在のモダンな開発環境においても、「10進数で変換する」という意思表示をコードに残すことは、SEO的にも評価される「質の高い・読みやすいコード（クリーンコード）」の基本と言えます。

初心者の方は、まずは「parseIntを使うときは、後ろに, 10を付けるお守り」と考えておけば間違いありません。

6. parseInt・parseFloatの注意点：予期せぬ挙動を防ぐコツ

6. parseInt・parseFloatの注意点：予期せぬ挙動を防ぐコツ

parseIntやparseFloatは非常に便利ですが、初心者の方が「あれ？」と首をかしげるような独特のルールがあります。 実務でバグを出さないために、特に重要な4つのポイントを実際のコードと一緒に見ていきましょう。

① 文字列の途中に文字があっても「数字だけ」抜き出す

これらの関数は、文字列の先頭から順番に解析し、数値として読み取れるギリギリのところまで変換してくれます。 例えば、「100円」や「60kg」といった単位付きの文字列から数値だけを取り出したい時に役立ちます。

const price = parseInt("100px"); // 後ろに文字があってもOK
const weight = parseFloat("65.5kg");

console.log(price);
console.log(weight);

100
65.5

② 数字が先頭にないと「NaN」になる

便利な反面、注意が必要なのが「先頭が数字ではない」ケースです。 解析を始めた瞬間に数字が見つからないと、NaN（Not a Number：非数）という「計算できないよ！」というエラー値が返ってきます。

const errorCase = parseInt("価格は100円"); // 先頭が漢字なので読み取れない
console.log(errorCase);

// NaNは何と計算してもNaNになるので注意！
console.log(errorCase + 10);

NaN
NaN

③ parseIntは「整数」専用、parseFloatは「小数」もOK

一番の違いは、小数点以下の扱い方です。parseIntは「整数（Integer）」にするための関数なので、小数点は無視して切り捨てられます。 一方、parseFloatは「浮動小数点（Float）」として、小数点以下も正確に保持します。

const point = "3.1415";

console.log(parseInt(point));   // 小数点以下はバッサリ切り捨て
console.log(parseFloat(point));  // そのまま数値化

3
3.1415

7. 知っておくと便利な数値変換テクニック

7. 知っておくと便利な数値変換テクニック

JavaScriptで「文字列を数値に変える」方法は、parseInt以外にもいくつか存在します。2026年現在のモダンな開発現場でもよく使われる、直感的で効率的な2つの手法を紹介します。プログラミング初心者の方は、まずこの「全体を数値として扱う」方法をマスターしましょう。

Number()関数と単項プラス演算子（+）

最もシンプルに数値を扱いたい時に便利なのが、Number()関数と、記号の+（プラス）を使う方法です。これらは「文字列の中身が純粋に数字だけ」の場合に非常に強力なツールとなります。

• Number()関数： 文字列をそのまま数字のデータに変換します。整数だけでなく、小数点も自動で判別してくれる優れものです。
• プラス記号（+）： 数値に変換したい文字列の「すぐ前」に + を付けるだけで変換できます。コードが短くなるため、多くのエンジニアに好まれるテクニックです。

// Number関数を使って、文字列を数値に変換する例
let price = Number("1500");
console.log(price);    // 1500（数値として出力）

// 小数点が含まれていても、そのまま変換できます
let weight = Number("55.8");
console.log(weight);   // 55.8

// もっとも短い書き方「+」を使った変換
let age = +"25";
console.log(age);      // 25
  

実行結果は以下のようになります。クォーテーション（""）が消えて、計算ができる「数値データ」になっていることがわかります。

1500
55.8
25

注意点：数字以外の文字が混ざっている場合

これらの方法は非常に便利ですが、一つだけ弱点があります。それは、「数字以外の文字が1文字でも混ざっていると、変換に失敗して NaN（Not a Number）というエラー値になってしまう」という点です。初心者のうちは、入力データが純粋な数字かどうかを意識することが大切です。

// 数字以外の文字（単位など）が混ざっている場合
console.log(Number("100円"));  // NaN（変換失敗）
console.log(+"100px");        // NaN（変換失敗）
  

NaN
NaN

もし「100円」の「100」だけを取り出したい場合は、前述したparseIntを使い、純粋に文字列全体を数値として扱いたい場合はこのNumber()や+を使う、といった使い分けができるようになると、JavaScriptの扱いはぐっと楽になりますよ。

8. 実用的な使い方の例：計算ミスを防ぐ「数値変換」のコツ

8. 実用的な使い方の例：計算ミスを防ぐ「数値変換」のコツ

JavaScriptでWebアプリを作るとき、ユーザーが入力フォームに入力した数字は、そのままでは「文字」として扱われてしまいます。文字のまま計算しようとすると、足し算がうまく動かなかったり、意図しない挙動になったりする原因になります。

プログラミング未経験の方が最初につまずきやすいポイントですが、parseFloat（小数を扱う）やparseInt（整数を扱う）を使って「文字を数字に変換」するだけで、計算の安全性がぐっと高まります。

例えば、商品の重さや金額など、小数点が含まれる可能性がある値を計算する場合は、以下のように記述します。

// 1. ユーザーが入力した値（"50.5" という文字列として受け取る）
let input = "50.5";

// 2. 文字列を「計算できる数値（小数）」に変換する
let price = parseFloat(input);

// 3. 数値同士で計算を行う
let quantity = 3;
let total = price * quantity;

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