はじめに
この記事を読めば、JavaScriptのNumberを完全にマスターできるようになります。
初心者でも分かりやすいように、使い方や応用例、注意点、カスタマイズ方法などを徹底解説し、10個のサンプルコードを用意しました。
これを読めば、JavaScriptのNumberを活用して素早くプログラムを作成できるようになります。
●JavaScriptとは？
JavaScriptは、Webブラウザで動くプログラミング言語です。
Webページに動的な要素を追加するために利用されます。
今回は、JavaScriptで数値を扱う際に必須となるNumberについて、初心者向けに徹底解説します。
○JavaScriptの基本
JavaScriptは、HTMLやCSSと連携してウェブページを動的にする役割があります。
主にクライアントサイドで実行され、ユーザーのアクションに応じてページの表示を変更することができます。
●JavaScriptのNumberとは？
○Numberの基本
JavaScriptのNumberは、数値を扱うためのオブジェクトです。整数や小数を表現することができます。
○Numberのリテラル
Numberのリテラルは、数値をそのまま記述することができます。
例えば、整数や小数を次のように記述できます。
// 整数のリテラル
var integer = 10;
// 小数のリテラル
var decimal = 3.14;●JavaScriptのNumberの使い方
○サンプルコード1：整数と小数の表現
整数と小数を表現する方法を紹介します。
下記のサンプルコードでは、整数と小数をそれぞれ変数に代入しています。
// 整数を代入
var integer = 42;
// 小数を代入
var decimal = 3.14;
console.log(integer); // 42
console.log(decimal); // 3.14○サンプルコード2：四則演算
四則演算を行う方法を紹介します。
下記のサンプルコードでは、加算、減算、乗算、除算を行っています。
var num1 = 10;
var num2 = 20;
// 加算
var sum = num1 + num2;
console.log(sum); // 30
// 減算
var difference = num1 - num2;
console.log(difference); // -10
// 乗算
var product = num1 * num2;
console.log(product); // 200
// 除算
var quotient = num1 / num2;
console.log(quotient); // 0.5○サンプルコード3：数値の変換
文字列を数値に変換する方法を紹介します。
下記のサンプルコードでは、parseInt関数とparseFloat関数を使って文字列を数値に変換しています。
// 文字列を整数に変換
var strInt = "42";
var intNum = parseInt(strInt);
console.log(intNum); // 42
// 文字列を小数に変換
var strFloat = "3.14";
var floatNum = parseFloat(strFloat);
console.log(floatNum); // 3.14●JavaScriptのNumberの応用例
○サンプルコード4：Mathオブジェクトを使った計算
Mathオブジェクトを使って、数学的な計算を行う方法を紹介します。
下記のサンプルコードでは、平方根や絶対値、三角関数の計算を行っています。
var num = 9;
// 平方根
var squareRoot = Math.sqrt(num);
console.log(squareRoot); // 3
// 絶対値
var absValue = Math.abs(-num);
console.log(absValue); // 9
// 三角関数
var sine = Math.sin(Math.PI / 2); // PI/2ラジアンの正弦
console.log(sine); // 1○サンプルコード5：乱数の生成
乱数を生成する方法を紹介します。
下記のサンプルコードでは、Math.random関数を使って0から1未満の乱数を生成し、任意の範囲の整数に変換しています。
// 0から1未満の乱数を生成
var randomNum = Math.random();
console.log(randomNum);
// 1から6の整数の乱数を生成
var diceRoll = Math.floor(Math.random() * 6) + 1;
console.log(diceRoll);○サンプルコード6：数値のフォーマット
数値を特定のフォーマットに変換する方法を紹介します。
下記のサンプルコードでは、toLocaleStringメソッドを使って数値を通貨表示に変換しています。
var num = 1000000;
// 通貨表示に変換
var currency = num.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(currency); // "¥1,000,000"●JavaScriptのNumberの注意点
○型変換に注意
JavaScriptでは、数値と文字列が自動的に型変換されることがあります。
そのため、意図しない結果が出ることがあります。例えば、下記のような場合です。
var num1 = 10;
var str1 = "20";
// 文字列と数値が結合される
var result1 = num1 + str1;
console.log(result1); // "1020"このような場合、parseIntやparseFloatを使って文字列を数値に変換することが重要です。
○NaNとInfinity
JavaScriptでは、数値が定義できない場合にNaN（Not a Number）が出力されます。
また、数値が無限大になる場合は、Infinityが出力されます。
// NaNの例
console.log(Math.sqrt(-1)); // NaN
// Infinityの例
console.log(1 / 0); // Infinity●JavaScriptのNumberの対処法
○数値判定
isNaN関数を使って、数値かどうかを判断できます。
console.log(isNaN(42)); // false
console.log(isNaN("hello")); // true○NaNを避ける
計算を行う前に、数値かどうかを確認しておくことで、NaNを避けることができます。
function safeAdd(a, b) {
if (isNaN(a) || isNaN(b)) {
return "入力値が数値ではありません";
}
return a + b;
}
console.log(safeAdd(1, 2)); // 3
console.log(safeAdd(1, "hello")); // "入力値が数値ではありません"●JavaScriptのNumberのカスタマイズ
○サンプルコード7：カスタム計算関数の作成
カスタム計算関数を作成し、任意の計算を行う方法を紹介します。
// 2つの数値の和を2倍する関数
function doubleSum(a, b) {
return (a + b) * 2;
}
console.log(doubleSum(3, 4)); // 14○サンプルコード8：数値の丸め処理
数値を丸める方法を紹介します。
下記のサンプルコードでは、Math.round、Math.ceil、Math.floorを使って、数値を丸めています。
var num = 3.141592;
console.log(Math.round(num)); // 3 (四捨五入)
console.log(Math.ceil(num)); // 4 (切り上げ)
console.log(Math.floor(num)); // 3 (切り捨て)○サンプルコード9：数値の範囲制限
数値を特定の範囲に制限する方法を紹介します。
下記のサンプルコードでは、clamp関数を使って数値を最小値と最大値の範囲に制限しています。
// 数値を範囲内に制限する関数
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
console.log(clamp(5, 1, 10)); // 5
console.log(clamp(-3, 1, 10)); // 1
console.log(clamp(15, 1, 10)); // 10○サンプルコード10：計算機能付きアプリ
JavaScriptのNumberを使って、簡単な電卓アプリを作成する例を紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>電卓アプリ</title>
</head>
<body>
<input id="input1" type="number" />
<select id="operator">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input id="input2" type="number" />
<button onclick="calculate()">計算</button>
<div id="result"></div>
<script>
function calculate() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var operator = document.getElementById("operator").value;
var result;
switch (operator) {
case "add":
result = input1 + input2;
break;
case "subtract":
result = input1 - input2;
break;
case "multiply":
result = input1 * input2;
break;
case "divide":
result = input1 / input2;
break;
default:
result = "エラー";
}
document.getElementById("result").innerHTML = "結果: " + result;
}
</script>
</body>
</html>このコードは、2つの数値を入力し、演算子を選択して計算する簡単な電卓アプリを作成します。
結果はページ上に表示されます。
まとめ
JavaScriptのNumberオブジェクトを使って、さまざまな数値操作が可能です。
型変換やNaN、Infinityに注意しながら、適切に数値を扱うことが大切です。
また、カスタム関数を作成することで、独自の数値処理が可能になります。
JavaScriptのNumberオブジェクトを活用して、様々なアプリケーションを作成してみてください。
