JavaScript計算の基本 - 四則演算から始める初心者向けガイド

JavaScriptで計算ってどうやってするの？と疑問に思ったことはありませんか？

「プログラミングで数値を扱いたいけど、書き方がわからない」「計算機みたいな機能を作ってみたい」「数学みたいに計算できるの？」

こんな疑問を持っている初心者の方、きっと多いですよね。

実は、JavaScriptでの計算は数学と同じような記号を使って、とても簡単に行えるんです。 電卓で計算するのと同じような感覚で、プログラムに計算をさせることができますよ。

この記事では、JavaScriptの基本的な計算方法を初心者向けに詳しく解説します。 四則演算から実用的な計算例まで、わかりやすく説明していきますね！

JavaScriptの基本的な四則演算

四則演算の基本記号を覚えよう

JavaScriptで使う計算記号は、普段使っている数学記号とほとんど同じです。

主な演算子はこちらです。

• 足し算 (+): 2つの数値を足す
• 引き算 (-): 2つの数値を引く
• 掛け算 (*): 2つの数値をかける
• 割り算 (/): 2つの数値を割る

// 基本的な四則演算の例
let addition = 10 + 5;      // 足し算: 15
let subtraction = 10 - 5;   // 引き算: 5
let multiplication = 10 * 5; // 掛け算: 50
let division = 10 / 5;      // 割り算: 2

console.log(addition);      // 15
console.log(subtraction);   // 5
console.log(multiplication); // 50
console.log(division);      // 2

このコードでは、それぞれの計算結果を変数に保存しています。 letで変数を作って、計算結果を代入しているんです。

console.log()で結果を確認すると、期待通りの値が表示されます。 まさに電卓で計算するのと同じような結果が得られますね。

計算結果の確認方法

計算した結果を確認する方法はいくつかあります。

// 直接計算結果を表示
console.log(15 + 25); // 40

// 変数に保存してから表示
let result = 100 - 30;
console.log(result); // 70

// 複数の計算を一度に
console.log("足し算:", 8 + 7);    // 足し算: 15
console.log("掛け算:", 6 * 4);    // 掛け算: 24

変数に保存することで、後から何度でも使い回せるので便利です。 計算結果に名前をつけて管理できるのが、プログラミングの良いところですね。

数値の取り扱いと注意点

整数と小数の扱い

JavaScriptでは、整数と小数を区別せずに計算できます。

他のプログラミング言語では数値の種類を気にする必要がありますが、JavaScriptは初心者にとってとても扱いやすいんです。

// 整数の計算
let wholeNumber = 10 + 20;  // 30

// 小数の計算
let decimal = 3.14 + 2.86;  // 6.0

// 整数と小数の混合
let mixed = 10 + 3.5;       // 13.5

console.log(wholeNumber);   // 30
console.log(decimal);       // 6
console.log(mixed);         // 13.5

どんな数値でも自由に組み合わせて計算できるので、難しく考える必要はありません。 数学と同じ感覚で使えるのが嬉しいですね。

割り算の注意点

割り算を行う際は、いくつか知っておくべき特徴があります。

// 通常の割り算
let normalDivision = 10 / 2;    // 5

// 小数になる割り算
let decimalDivision = 10 / 3;   // 3.3333333333333335

// ゼロで割る場合（エラーにはならない）
let divideByZero = 10 / 0;      // Infinity

console.log(normalDivision);    // 5
console.log(decimalDivision);   // 3.3333333333333335
console.log(divideByZero);      // Infinity

特に注意したいのは、ゼロで割ってもエラーにならないことです。 代わりに「Infinity」という特別な値になります。

実際のプログラムでは、ゼロ除算をチェックする処理を入れることが大切ですね。

算術演算子の種類と使い方

剰余演算子（余りを求める）

割り算の余りを求める便利な演算子があります。

// 剰余演算子 (%) - 余りを求める
let remainder1 = 10 % 3;   // 1 (10を3で割った余り)
let remainder2 = 15 % 4;   // 3 (15を4で割った余り)
let remainder3 = 20 % 5;   // 0 (20を5で割った余り)

console.log(remainder1);   // 1
console.log(remainder2);   // 3
console.log(remainder3);   // 0

剰余演算子は、偶数・奇数の判定などでよく使われます。

// 偶数・奇数の判定でよく使われる
let number = 7;
if (number % 2 === 0) {
    console.log("偶数です");
} else {
    console.log("奇数です");   // こちらが実行される
}

この例では、数値を2で割った余りが0なら偶数、1なら奇数と判定しています。 とても実用的な使い方ですね。

累乗演算子（べき乗）

数値の累乗（べき乗）を計算する演算子もあります。

// 累乗演算子 (**)
let power1 = 2 ** 3;      // 2の3乗 = 8
let power2 = 5 ** 2;      // 5の2乗 = 25
let power3 = 3 ** 4;      // 3の4乗 = 81

console.log(power1);      // 8
console.log(power2);      // 25
console.log(power3);      // 81

// 小数の累乗も可能
let sqrtTwo = 4 ** 0.5;   // 4の平方根 = 2
console.log(sqrtTwo);     // 2

**演算子を使えば、複雑な数学計算も簡単に行えます。 平方根や立方根の計算も、小数の指数を使って表現できるんです。

演算の優先順位

基本的な優先順位を理解しよう

JavaScriptでも数学と同じように、演算の優先順位があります。

// 掛け算・割り算が先に計算される
let result1 = 2 + 3 * 4;     // 2 + 12 = 14 (3*4が先)
let result2 = 10 - 6 / 2;    // 10 - 3 = 7 (6/2が先)

console.log(result1);        // 14
console.log(result2);        // 7

// 括弧を使って優先順位を変更
let result3 = (2 + 3) * 4;   // 5 * 4 = 20
let result4 = (10 - 6) / 2;  // 4 / 2 = 2

console.log(result3);        // 20
console.log(result4);        // 2

数学と同じで、掛け算と割り算が足し算と引き算より先に計算されます。 迷ったときは括弧を使って明確にするのがおすすめですよ。

複雑な計算の実例

実際のプログラムでは、複数の演算を組み合わせることが多いです。

// 複雑な計算の例：商品価格の計算
let price = 1000;           // 商品価格
let taxRate = 0.1;          // 消費税率10%
let discount = 0.2;         // 割引率20%

// 割引後の税込価格を計算
let discountedPrice = price * (1 - discount);    // 割引後価格
let finalPrice = discountedPrice * (1 + taxRate); // 税込価格

console.log("元の価格:", price);                    // 1000
console.log("割引後価格:", discountedPrice);        // 800
console.log("最終価格:", finalPrice);               // 880

このように、段階的に計算を行うことで、複雑な処理も整理して書けます。 実際のショッピングサイトなどでよく使われるパターンですね。

代入演算子の活用

基本的な代入演算子

計算結果を同じ変数に代入する際に便利な演算子があります。

let number = 10;

// 通常の書き方
number = number + 5;     // 15

// 代入演算子を使った書き方
number += 5;             // 20 (上と同じ意味)
number -= 3;             // 17
number *= 2;             // 34
number /= 2;             // 17

console.log(number);     // 17

代入演算子を使うと、コードが短くて読みやすくなります。 「その変数に対して計算を行う」という意味が明確に伝わりますね。

インクリメント・デクリメント

1を足したり引いたりする特別な演算子もあります。

let counter = 0;

// インクリメント（1を足す）
counter++;              // counter = counter + 1 と同じ
console.log(counter);   // 1

// デクリメント（1を引く）
counter--;              // counter = counter - 1 と同じ
console.log(counter);   // 0

この演算子は、カウンターや繰り返し処理でよく使われます。

前置と後置の違いも理解しておきましょう。

// 前置と後置の違い
let a = 5;
let b = ++a;            // aを先に1増やしてからbに代入
console.log(a, b);      // 6, 6

let c = 5;
let d = c++;            // cをdに代入してからcを1増やす
console.log(c, d);      // 6, 5

この違いは、複雑なプログラムを書く時に重要になってきます。

実用的な計算例

計算機能の実装

実際にWebページで使える計算機能を作ってみましょう。

// 簡単な計算機能
function calculate(num1, operator, num2) {
    let result;
    
    switch (operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 !== 0) {
                result = num1 / num2;
            } else {
                return "エラー: ゼロで割ることはできません";
            }
            break;
        default:
            return "エラー: 無効な演算子です";
    }
    
    return result;
}

// 使用例
console.log(calculate(10, '+', 5));    // 15
console.log(calculate(10, '-', 3));    // 7
console.log(calculate(4, '*', 6));     // 24
console.log(calculate(15, '/', 3));    // 5
console.log(calculate(10, '/', 0));    // "エラー: ゼロで割ることはできません"

この関数では、2つの数値と演算子を受け取って計算を行います。 switch文を使って、演算子に応じた処理を実行しているんです。

ゼロ除算のエラーチェックも含めているので、安全に使えますね。

数値の丸め処理

計算結果を見やすくするための丸め処理も重要です。

let pi = 3.14159265359;

// 小数点以下の桁数を指定
let rounded = pi.toFixed(2);        // "3.14" (文字列)
let roundedNumber = Number(pi.toFixed(2)); // 3.14 (数値)

console.log(rounded);               // "3.14"
console.log(roundedNumber);         // 3.14

// 四捨五入、切り上げ、切り捨て
let value = 4.7;
console.log(Math.round(value));     // 5 (四捨五入)
console.log(Math.ceil(value));      // 5 (切り上げ)
console.log(Math.floor(value));     // 4 (切り捨て)

実際のWebアプリケーションでは、このような丸め処理がよく使われます。

消費税計算の例も見てみましょう。

// 消費税計算の例
let basePrice = 1234;
let tax = basePrice * 0.1;
let taxRounded = Math.round(tax);   // 四捨五入で123円

console.log("基本価格:", basePrice);        // 1234
console.log("消費税:", taxRounded);         // 123
console.log("税込価格:", basePrice + taxRounded); // 1357

小数点以下の処理は、お金の計算では特に重要ですね。

よくあるエラーと対処法

文字列と数値の混在に注意

文字列と数値を混ぜて計算する際は、予期しない結果になることがあります。

// 文字列と数値の足し算（連結になる）
let result1 = "10" + 5;        // "105" (文字列)
let result2 = "hello" + 5;     // "hello5" (文字列)

console.log(result1);          // "105"
console.log(result2);          // "hello5"

// 他の演算では数値に変換される
let result3 = "10" - 5;        // 5 (数値)
let result4 = "10" * 2;        // 20 (数値)
let result5 = "10" / 2;        // 5 (数値)

console.log(result3);          // 5
console.log(result4);          // 20
console.log(result5);          // 5

足し算（+）だけは文字列連結として動作するので、特に注意が必要です。

明示的に数値に変換する方法も覚えておきましょう。

// 明示的に数値に変換
let stringNumber = "123";
let converted = Number(stringNumber);  // 123 (数値)
let alsoConverted = +stringNumber;     // 123 (数値、短縮記法)

console.log(converted);        // 123
console.log(alsoConverted);    // 123

NaN（Not a Number）の対処

計算できない値が生成された場合の対処法も重要です。

// NaNが発生するケース
let invalid1 = "hello" - 5;     // NaN
let invalid2 = Math.sqrt(-1);   // NaN
let invalid3 = 0 / 0;           // NaN

console.log(invalid1);          // NaN
console.log(invalid2);          // NaN
console.log(invalid3);          // NaN

// NaNのチェック方法
console.log(isNaN(invalid1));   // true
console.log(Number.isNaN(invalid1)); // true (より厳密)

安全な計算を行うための関数も作ってみましょう。

// 安全な計算の例
function safeCalculate(a, b, operator) {
    // 数値チェック
    if (isNaN(a) || isNaN(b)) {
        return "エラー: 有効な数値を入力してください";
    }
    
    switch (operator) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '*':
            return a * b;
        case '/':
            if (b === 0) {
                return "エラー: ゼロで割ることはできません";
            }
            return a / b;
        default:
            return "エラー: 無効な演算子です";
    }
}

console.log(safeCalculate(10, 5, '+'));     // 15
console.log(safeCalculate("abc", 5, '+')); // "エラー: 有効な数値を入力してください"

このように、事前にチェックを行うことで、エラーを防げます。

まとめ

JavaScriptの計算は、数学と同じような感覚で行うことができます。

基本的な四則演算から、複雑な計算、エラー処理まで、しっかりと理解しておけば実用的なアプリケーションを作ることができますよ。

今回学んだポイント：

• 四則演算は数学と同じ記号を使用
• 代入演算子やインクリメント演算子で効率的に記述
• 丸め処理で見やすい結果に調整
• エラーチェックで安全な計算を実現

計算機能は多くのWebアプリケーションで必要になる基本的な機能です。 まずは簡単な四則演算から始めて、徐々に複雑な計算にチャレンジしてみてください。

ぜひこの機会に、JavaScriptの計算をマスターしてみませんか？