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

生徒

「先生、文字列を数値に変えることってできますか？たとえば '123' という文字を数字として使いたいんです。」

先生

「もちろんできます。JavaScriptでは、文字列を数値に変換する方法がいくつかあります。その代表的なものが parseInt()、parseFloat()、そして Number() です。」

生徒

「3つもあるんですか？どれを使えばいいのか迷っちゃいそうです。」

先生

「それぞれに特徴があるんです。順番に使い方を見ていきましょう！」

1. なぜ文字列を数値に変換する必要があるの？

JavaScriptでは、数字のように見えても実は「文字列」として扱われていることがあります。たとえば、次のようなコードを見てみましょう。


const num1 = "10";
const num2 = "5";
console.log(num1 + num2);

実行結果はこうなります。

数値の足し算ではなく、文字列がつながってしまいました。これは "10" や "5" が「数値」ではなく「文字列」だからです。
数値として計算したい場合は、文字列を数値に変換してあげる必要があります。

2. parseInt() で整数に変換する

parseInt() は文字列を「整数（小数点のない数）」に変換する関数です。
たとえば、次のように書きます。


const text = "123";
const num = parseInt(text);
console.log(num);
console.log(typeof num);

実行結果は次の通りです。


123
number

このように、文字列 "123" が数値 123 に変換されました。

また、parseInt() は数字の途中までしか変換できない場合でも、最初の数字部分だけを取り出してくれます。


console.log(parseInt("123abc")); // 123
console.log(parseInt("12.34"));  // 12

つまり、「数字の部分だけを整数として取り出す」ときに便利です。

3. parseFloat() で小数も変換できる

parseFloat() は parseInt() に似ていますが、小数点を含む数値も正しく変換できます。


const text = "12.34";
const num = parseFloat(text);
console.log(num);
console.log(typeof num);

実行結果はこちらです。


12.34
number

parseFloat() は、数値部分が小数を含む場合にとても便利です。たとえば「3.14円」や「2.5kg」などのように数字と文字が混ざったデータでも、最初の数字だけを取り出すことができます。


console.log(parseFloat("3.14円")); // 3.14
console.log(parseFloat("5.6kg"));  // 5.6

4. Number() 関数で厳密に変換する

Number() 関数は、文字列全体を正確に数値に変換します。
parseInt() や parseFloat() のように「途中まで」ではなく、「全体が数値として有効かどうか」を判断します。


const text1 = "123";
const text2 = "123abc";
console.log(Number(text1)); // 123
console.log(Number(text2)); // NaN（エラーのような値）

Number("123") は正しく変換されますが、"123abc" のように途中に文字がある場合は NaN（Not a Number＝数ではない）になります。

つまり、Number() は「完全に数値の文字列」のときにだけ使うのが安全です。

5. NaN（ナン）とは？

NaN（ナン）は「数ではない」という意味の特別な値です。
たとえば、次のようなときに現れます。


console.log(Number("abc")); // NaN
console.log(parseInt("abc")); // NaN

NaN が出た場合は、「変換できない文字列だった」というサインです。

ちなみに、isNaN() という関数を使うと、その値がNaNかどうかを調べることができます。


const value = Number("abc");
if (isNaN(value)) {
  console.log("数値に変換できませんでした。");
}

実行結果：


数値に変換できませんでした。

6. 文字列から数値に変換する3つの方法の使い分け

ここまで紹介した3つの方法を、どんな場面で使うか整理してみましょう。

関数名	特徴	使う場面
`parseInt()`	整数だけを取り出す	小数を無視して整数がほしいとき
`parseFloat()`	小数も含めて変換	小数点のある数値を扱いたいとき
`Number()`	全体が数値でないとエラーになる	文字列全体を正確に変換したいとき

7. 応用例：入力フォームの値を数値に変換して計算する

実際のWebサイトでは、ユーザーが入力した値を数値に変換して使うことがよくあります。フォームの値は必ず「文字列」として受け取られるため、計算前に変換する必要があります。


<input type="text" id="price" value="1500">
<input type="text" id="tax" value="0.1">
<button id="btn">計算する</button>
<p id="result"></p>

<script>
document.getElementById("btn").addEventListener("click", () => {
  const price = parseFloat(document.getElementById("price").value);
  const tax = parseFloat(document.getElementById("tax").value);
  const total = price + (price * tax);
  document.getElementById("result").textContent = "税込価格：" + total + "円";
});
</script>

この例では、入力フォームの値（文字列）を parseFloat() で変換して、正しい数値計算ができるようにしています。

8. まとめ：parseInt・parseFloat・Numberの違いを理解しよう

JavaScriptで文字列を数値に変換する方法はいくつかありますが、それぞれ得意な場面が違います。
初心者の方はまず、整数には parseInt()、小数には parseFloat() を使うように覚えておくと良いでしょう。
正確な変換が必要なときや入力値が確実に数字だけの場合は Number() を使うのがおすすめです。

まとめ

文字列と数値の違いを理解することが第一歩

JavaScriptにおいて、文字列と数値の違いを理解することはとても重要です。見た目が「10」や「123」のように数字に見えていても、実際には文字として扱われている場合があります。特にフォーム入力や外部データを扱う場面では、ほとんどの場合が文字列として受け取られます。そのため、計算や比較を正しく行うには、文字列を数値に変換する処理が欠かせません。今回紹介した parseInt、parseFloat、Number は、その基本となる大切な仕組みです。

parseInt・parseFloat・Numberの役割を整理する

parseInt は整数だけを取り出したいときに使う関数です。小数点以下を切り捨てて扱いたい場合や、文字列の中から数値の先頭部分だけを使いたいときに向いています。一方、parseFloat は小数点を含む数値を扱えるため、金額や重さ、割合などを計算するときに便利です。 Number は文字列全体が正しい数値である場合のみ変換できるため、入力チェックを厳密に行いたい場面で役立ちます。それぞれの特徴を理解して使い分けることで、思わぬ計算ミスを防ぐことができます。

NaNを恐れずに扱えるようになる

初心者がつまずきやすいポイントのひとつが NaN です。 NaN はエラーではなく、「数値として扱えない」という結果を表す特別な値です。文字列を数値に変換できなかったときに出てくるため、プログラムが間違っているサインとして活用できます。 isNaN を使えば、計算前にチェックすることもできるので、安全な処理が可能になります。 NaN を正しく理解することで、JavaScriptの数値処理が一段と分かりやすくなります。

まとめとしてのサンプルプログラム

最後に、今回学んだ内容をまとめて確認できる簡単なサンプルを見てみましょう。入力された文字列を数値に変換し、結果を安全に扱う例です。


const inputValue = "20.5";
const numberValue = parseFloat(inputValue);

if (isNaN(numberValue)) {
  console.log("数値に変換できませんでした");
} else {
  console.log(numberValue + 10);
}

このように、文字列を数値に変換し、NaNかどうかを確認してから計算する流れを身につけておくと、実際のWeb開発やJavaScriptの学習でとても役に立ちます。基本を丁寧に積み重ねることが、後々の理解につながります。

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

生徒

「文字列と数値って、見た目が同じでも全然違う扱いになるんですね。今まで足し算がうまくいかなかった理由が分かりました。」

先生

「そうですね。JavaScriptでは特にその違いが大切です。どの関数を使えばいいか分かるようになると、安心して計算できます。」

生徒

「parseInt と parseFloat、Number の違いも整理できました。入力された値はまず疑ってみる、という感覚も大事なんですね。」

先生

「その通りです。今回学んだことを意識するだけで、 JavaScriptの文字列変換や数値計算がずっと分かりやすくなります。」