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. JavaScriptで数値の計算をしてみよう！

3. JavaScriptで数値の計算をしてみよう！

数値を扱う上で一番大切なのは、「見た目は数字でも、プログラム上では『文字』として扱われていないか？」を確認することです。正しく変換さえできれば、JavaScriptを使って簡単に計算ができます。

例えば、お買い物の合計金額を計算するプログラムを見てみましょう。初心者の方がよくつまずくポイントも一緒に解説します。

// 商品価格と消費税が「文字列」として保存されている場合
let priceText = "1000";
let taxText = "80";

// Number() を使って、文字列から計算ができる「数値」に変換します
let price = Number(priceText);
let tax = Number(taxText);

// 数値同士なら、算数と同じように足し算ができます
let total = price + tax;

console.log("合計金額は " + total + " 円です");

合計金額は 1080 円です

このように、Number()で変換した後は、足し算（+）や引き算（-）などの算術演算が自由に行えるようになります。

この仕組みを理解しておくと、Webサイトの入力フォームから受け取った数字を使って、合計金額や割引率を計算するような便利な機能も作れるようになります。

4. 変換できない場合はどうなる？（NaNについて）

4. 変換できない場合はどうなる？（NaNについて）

JavaScriptのNumber関数はとても便利ですが、どんなデータでも数値に変えられるわけではありません。たとえば、数字以外の「あいうえお」という文字や、「abc」といったアルファベット、特殊な記号などが混ざっている文字列を無理やり数値に変換しようとすると、コンピュータは「これは計算できる数字ではありません」とギブアップしてしまいます。

プログラミング未経験の方でもイメージしやすいよう、実際に変換に失敗する例を見てみましょう。

let text = "おにぎり100円";
let result = Number(text);
console.log(result);

NaN

実行結果に表示されたNaN（ナン）は、Not a Numberの略で、日本語では「数値ではない」という意味です。これはエラーでプログラムが止まったわけではなく、「計算不可能な値だよ」ということを教えてくれる特別な印のようなものです。

たとえば、「100」という数字だけの文字列なら変換できますが、「100円」のように1文字でも単位や文字が入っているとNaNになってしまいます。ユーザーが入力した値を使って計算をする前には、このNaNになっていないかを確認することが、バグのないスムーズなプログラムを作るための大切なポイントになります。

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

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

意外と見落としがちなのが、「何も入力されていない空の文字列」や「スペース（空白）だけの文字列」をNumber関数に渡したときの動きです。 「中身がないからエラー（NaN）になりそう」と思うかもしれませんが、実はJavaScriptの仕様で、これらは数値の「0」として扱われます。

まずは、実際のコードで確認してみましょう。プログラミングが初めての方も、以下のサンプルをコピーして試してみてください。

// 1. 全く中身がない空の文字列
console.log(Number(""));      

// 2. 半角スペースが入っている文字列
console.log(Number("   "));   

// 3. 全角スペース（日本語入力の空白）が入っている文字列
console.log(Number("　"));

0
0
0

このように、すべて結果は0になります。 これは、JavaScriptが「何もない状態」を数値的に「無（ゼロ）」と解釈しようとする性質があるためです。

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関数を使いこなし、データの型を意識したプログラミングを心がけてみてください。