JavaScriptのNumber関数で文字列を数値に変換する方法をやさしく解説！初心者でもわかる型変換の基本

1. Number関数とは？

1. Number関数とは？

JavaScript（ジャバスクリプト）でプログラミングをしていると、画面の入力フォームから受け取った値や、外部から読み込んだデータが「数値ではなく文字列（テキスト）」として扱われてしまうことがよくあります。

たとえば、見た目が「123」であっても、それが文字列（String型）のままだと、コンピュータはそれを「文字」として認識するため、算術計算が正しく行われません。そこで登場するのがNumber関数です。

Number関数は、文字列を数値（Number型）に変換（キャスト）するための最も標準的で強力なツールです。これを使うことで、テキストデータを「計算可能な数字」へと劇的に変化させることができます。

具体的な違いを、簡単なサンプルプログラムで確認してみましょう。

// 1. 文字列のままだとどうなる？（失敗例）
let textPrice = "100";
let result1 = textPrice + 50; 
console.log("変換しない場合：" + result1); // "10050" になってしまう

// 2. Number関数で数値に変えると？（成功例）
let realPrice = Number(textPrice);
let result2 = realPrice + 50;
console.log("Number関数を使った場合：" + result2); // 150 になる！

変換しない場合：10050
Number関数を使った場合：150

このように、Number関数を通すだけで、文字列が本物の数値に生まれ変わり、足し算や引き算が自由自在にできるようになります。初心者の方がまず最初に覚えるべき、非常に重要なステップです。

2. Number関数の基本的な使い方

2. Number関数の基本的な使い方

JavaScriptで「文字列」を「数値」に変換する最も標準的でシンプルな方法が、Number()関数を使うことです。プログラミング初心者の方でも、基本の書き方さえ覚えればすぐに使いこなせます。

基本的な構文はNumber("変換したい文字")と記述するだけです。これにより、計算ができない「ただの文字」を、足し算や引き算ができる「生きた数字」としてプログラムに認識させることができます。

まずは、最もシンプルな変換例を見てみましょう。変数strに入った文字列を数値に変換する流れです。

// 1. 文字列としての「456」を用意する
let str = "456";

// 2. Number関数を使って数値に変換し、新しい変数numに代入する
let num = Number(str);

// 3. 結果をコンソールに表示して確認する
console.log(num); 
console.log(typeof num); // 型を確認すると "number" と表示されます

実行結果は以下の通りです。見た目は同じ数字ですが、内部的には計算可能なデータ形式に変わっています。

456

この変換がなぜ重要かというと、例えばWebフォームの入力欄から受け取った値は、見た目が数字であっても最初はすべて「文字列」として扱われるからです。そのままでは計算ができず、"100" + "200" が "100200" という文字の結合になってしまうため、このNumber()を使って「数値」に直してあげる必要があります。

3. 計算してみよう！

3. 計算してみよう！

変換した数値は、ちゃんと計算にも使えます。次の例を見てみましょう。

let priceText = "1000";
let taxText = "80";

// 文字列を数値に変換
let price = Number(priceText);
let tax = Number(taxText);

// 合計金額を計算
let total = price + tax;
console.log("合計金額は " + total + " 円です");

合計金額は 1080 円です

もしこの変換をしないままだと、文字列同士の結合（けつごう）になって、"100080"のようになってしまいます。

4. 変換できない場合はどうなる？

4. 変換できない場合はどうなる？

Number関数で文字列を数値に変換しようとしても、変換できない文字列もあります。たとえば、文字や記号などが混じっている場合です。

let text = "abc123";
let result = Number(text);
console.log(result);

NaN

NaN（ナン）とは「Not a Number（ナンバーじゃない）」の略で、「数値として扱えませんよ」という意味の特別な値です。

5. 空の文字列やスペースだけの場合

5. 空の文字列やスペースだけの場合

空の文字列や、スペースだけの文字列をNumber関数に渡すと、どうなるでしょうか？

console.log(Number(""));      // 0
console.log(Number("   "));   // 0（スペースもOK）

0
0

実はこれ、数値の0として変換されるんです。これはちょっと意外ですよね。

6. 小数やマイナスの数値もOK

6. 小数やマイナスの数値もOK

Number関数は、小数（しょうすう）やマイナスの数もちゃんと変換できます。

console.log(Number("-3.14"));  // -3.14
console.log(Number("0.5"));    // 0.5

-3.14
0.5

このように、Number関数は幅広いパターンの数値に対応しています。

7. よくあるミスと注意点

7. よくあるミスと注意点

数値に変換する際によくある間違いは、文字列の中にカンマ（,）が入っているパターンです。

let str = "1,000";
console.log(Number(str));  // NaN になる！

NaN

カンマは取り除いてから変換する必要があります。カンマを削除するには、replaceという機能を使います。

let str = "1,000";
let cleaned = str.replace(",", "");
console.log(Number(cleaned));  // 1000

1000

8. Number関数とparseIntの違いは？

8. Number関数とparseIntの違いは？

Number関数の他にも、parseIntという関数があります。こちらも文字列を数値に変換することができますが、違いがあります。

console.log(Number("10.5"));     // 10.5（小数のまま）
console.log(parseInt("10.5"));   // 10（小数点以下は切り捨て）

10.5
10

小数をそのまま扱いたいときはNumberを使いましょう。

まとめ

まとめ

ここまで、JavaScriptにおける数値変換の基本であるNumber関数について詳しく解説してきました。Web開発やプログラミングの現場では、ユーザーがフォームに入力した値や、外部のAPIから取得したデータが「文字列」として扱われることが非常に多くあります。これらをそのまま加算しようとすると、意図しない文字列結合が発生してバグの原因となります。そのため、Number関数を使った適切な型変換をマスターすることは、初心者から脱却するための第一歩と言えるでしょう。

Number関数の重要なポイントをおさらい

記事の内容を振り返り、特に重要なポイントを整理しました。これらを意識するだけで、コードの品質は格段に上がります。

• 基本的な変換： Number("123") のように記述することで、文字列を数値型に変換できる。
• 算術演算への応用： 変換後の値は、通常の数値として加減乗除の計算が可能になる。
• NaN（Not a Number）の発生： 数字以外の文字（"abc"など）が含まれる場合、結果はNaNになる。
• 空文字の挙動： 空の文字列 "" や半角スペース " " を変換すると 0 になる特性がある。
• 小数と負の数： 浮動小数点数やマイナス記号付きの文字列も、正確に数値として認識される。
• カンマの注意点： "1,000" のようなカンマ区切りの文字列は、そのままでは変換できないため、事前に除去が必要。

実践的なサンプルコードで理解を深める

実際のアプリケーション開発を想定した、より具体的なサンプルプログラムを見てみましょう。例えば、ユーザーが入力した複数の数値の平均値を出すプログラムです。

// フォームから取得したと想定される文字列の配列
let scoresText = ["85", "92", "78", " "];

let totalScore = 0;
let count = 0;

for (let i = 0; i < scoresText.length; i++) {
    // 文字列を数値に変換
    let score = Number(scoresText[i]);

    // NaNでない、かつ0より大きい（空文字でない）場合のみ加算
    if (!isNaN(score) && scoresText[i].trim() !== "") {
        totalScore += score;
        count++;
    }
}

let average = totalScore / count;
console.log("有効な点数の合計: " + totalScore);
console.log("平均点: " + average);

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

有効な点数の合計: 255
平均点: 85

このように、isNaN()関数と組み合わせることで、エラーを防ぎながら安全に数値を扱うことができます。

TypeScriptでの扱いについて

近年、JavaScriptの拡張版であるTypeScript（タイプスクリプト）を利用するケースも増えています。TypeScriptでは「型」を厳格に管理するため、Number関数の重要性がさらに増します。

function calculateAge(birthYearStr: string): number {
    const currentYear: number = new Date().getFullYear();
    const birthYear: number = Number(birthYearStr);

    if (isNaN(birthYear)) {
        throw new Error("誕生年は数値形式で入力してください。");
    }

    return currentYear - birthYear;
}

const age = calculateAge("1995");
console.log(`現在の年齢は ${age} 歳です。`);

TypeScriptを使うことで、どの変数が数値で、どの変数が文字列なのかを明確に区別できるため、Number関数による変換のタイミングがより分かりやすくなります。

今後の学習に向けて

JavaScriptにはNumber以外にも、parseIntやparseFloat、あるいは単項プラス演算子（+）を使った変換方法もあります。状況に応じてこれらを使い分けることが、プロフェッショナルなエンジニアへの近道です。まずは、最も標準的で挙動が素直なNumber関数を使いこなし、データの型を意識したプログラミングを心がけてみてください。