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

みなさん、JavaScriptで計算したいと思ったことはありませんか？

「プログラムで足し算や引き算ってどうやるの？」 「お買い物アプリの合計金額を計算したい！」 こんな風に思ったことがある方、きっと多いですよね。

安心してください！ この記事では、JavaScriptの計算について基礎から丁寧に解説します。 初心者でも必ず理解できるよう、実際のコード例を使って説明していきますね。

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

演算子って何？

JavaScriptでは、数学と同じような記号を使って計算ができます。

簡単に言うと、+や-といった記号のことを演算子と呼びます。 普段の算数と同じような感覚で使えるので、覚えやすいですよ。

let a = 10;
let b = 3;

console.log(a + b);  // 13 (足し算)
console.log(a - b);  // 7  (引き算)
console.log(a * b);  // 30 (かけ算)
console.log(a / b);  // 3.333... (割り算)

このコードでは、aに10、bに3を入れて、それぞれの計算をしています。 *がかけ算、/が割り算の記号です。

基本的な計算をやってみよう

実際に使えそうな例で練習してみましょう。

// お買い物の計算
let itemPrice = 500;
let tax = 50;
let total = itemPrice + tax;

console.log(`商品価格: ${itemPrice}円`);
console.log(`消費税: ${tax}円`);
console.log(`合計: ${total}円`);  // 550円

商品価格500円に税金50円を足して、合計550円になりました。 プログラムでお買い物の計算ができるなんて、便利ですよね。

平均点の計算もやってみましょう。

// テストの平均点を計算
let mathScore = 80;
let englishScore = 90;
let scienceScore = 85;

let average = (mathScore + englishScore + scienceScore) / 3;
console.log(`平均点: ${average}点`);  // 85点

3つのテストの点数を足して、3で割ると平均が出ます。 括弧を使うことで、先に足し算をしてから割り算をしているんです。

足し算をマスターしよう

基本の足し算

足し算は、数字をどんどん足していく計算です。

let number1 = 25;
let number2 = 17;
let sum = number1 + number2;

console.log(`${number1} + ${number2} = ${sum}`);  // 42

25と17を足すと42になります。 とってもシンプルですね。

小数点の計算もできますよ。

let price1 = 3.14;
let price2 = 2.86;
let totalPrice = price1 + price2;

console.log(`${price1} + ${price2} = ${totalPrice}`);  // 6

もっと楽に足し算する方法

同じ変数に値を足していきたい時は、+=という便利な記号があります。

let count = 0;

// 普通の書き方
count = count + 1;
count = count + 2;
count = count + 3;

console.log(count);  // 6

これを+=を使って書くと、こんな感じです。

let counter = 0;

// もっと簡単な書き方
counter += 1;  // counter = counter + 1と同じ
counter += 2;  // counter = counter + 2と同じ
counter += 3;  // counter = counter + 3と同じ

console.log(counter);  // 6

同じ結果ですが、+=の方が短くて分かりやすいですよね。

お買い物カートの例

実際のWebサイトっぽい例で練習してみましょう。

let cartTotal = 0;

// 商品を追加していく
cartTotal += 300;  // りんごを追加
console.log(`りんご追加後: ${cartTotal}円`);

cartTotal += 200;  // バナナを追加
console.log(`バナナ追加後: ${cartTotal}円`);

cartTotal += 150;  // みかんを追加
console.log(`みかん追加後: ${cartTotal}円`);

console.log(`カート合計: ${cartTotal}円`);  // 650円

商品を追加するたびに、カートの合計金額が増えていきます。 実際のECサイトでも、こんな風に計算しているんですよ。

引き算をマスターしよう

基本の引き算

引き算は、数字を減らしていく計算です。

let startMoney = 1000;
let expense = 350;
let remaining = startMoney - expense;

console.log(`開始時: ${startMoney}円`);
console.log(`支出: ${expense}円`);
console.log(`残高: ${remaining}円`);  // 650円

1000円から350円を使ったので、650円が残りました。 お財布の計算みたいですね。

年齢の計算もできます。

let currentYear = 2024;
let birthYear = 1995;
let age = currentYear - birthYear;

console.log(`現在の年齢: ${age}歳`);  // 29歳

もっと楽に引き算する方法

足し算と同じように、-=という便利な記号があります。

let inventory = 100;  // 在庫100個

// 注文が来たので在庫を減らす
inventory -= 25;  // 25個出荷
console.log(`25個出荷後: ${inventory}個`);  // 75個

inventory -= 30;  // 30個出荷
console.log(`30個出荷後: ${inventory}個`);  // 45個

在庫管理システムみたいな感じですね。 商品が売れるたびに、在庫数が減っていきます。

ポイント消費の例

ゲームのポイント消費みたいな例も作ってみましょう。

let userPoints = 1500;

function usePoints(points) {
    if (userPoints >= points) {
        userPoints -= points;
        console.log(`${points}ポイント使用しました。残り: ${userPoints}ポイント`);
    } else {
        console.log(`ポイント不足です。現在: ${userPoints}ポイント`);
    }
}

usePoints(500);   // 500ポイント使用しました。残り: 1000ポイント
usePoints(800);   // 800ポイント使用しました。残り: 200ポイント
usePoints(300);   // ポイント不足です。現在: 200ポイント

ポイントが足りない時は、ちゃんと「不足です」と教えてくれます。 こういう仕組みって、実際のアプリでもよく使われているんですよ。

かけ算をマスターしよう

基本のかけ算

かけ算は、*という記号を使います。

let unitPrice = 120;  // 1個120円
let quantity = 15;    // 15個
let totalPrice = unitPrice * quantity;

console.log(`単価: ${unitPrice}円`);
console.log(`数量: ${quantity}個`);
console.log(`合計: ${totalPrice}円`);  // 1800円

1個120円の商品を15個買うと、1800円になります。 お店での計算と同じですね。

面積の計算もできます。

let width = 12;   // 幅12m
let height = 8;   // 高さ8m
let area = width * height;

console.log(`幅: ${width}m`);
console.log(`高さ: ${height}m`);
console.log(`面積: ${area}㎡`);  // 96㎡

もっと楽にかけ算する方法

*=という記号を使うと、同じ変数にかけ算できます。

let savings = 100000;  // 貯金10万円

// 毎年5%ずつ増える
savings *= 1.05;  // 1年後
console.log(`1年後: ${Math.round(savings)}円`);  // 105000円

savings *= 1.05;  // 2年後
console.log(`2年後: ${Math.round(savings)}円`);  // 110250円

Math.round()は、小数点を四捨五入する機能です。 お金の計算では、きれいな数字の方が分かりやすいですからね。

時給の計算

アルバイトの給与計算をしてみましょう。

let hourlyRate = 1000;  // 時給1000円
let workHours = 8;      // 8時間勤務
let overtimeHours = 2;  // 残業2時間

// 基本給の計算
let basicPay = hourlyRate * workHours;
console.log(`基本給: ${basicPay}円`);  // 8000円

// 残業代の計算（1.25倍）
let overtimePay = hourlyRate * overtimeHours * 1.25;
console.log(`残業代: ${overtimePay}円`);  // 2500円

// 合計
let totalPay = basicPay + overtimePay;
console.log(`総支給: ${totalPay}円`);  // 10500円

残業代は通常の1.25倍になるので、2000円ではなく2500円になります。 こういう計算も、プログラムだと簡単にできますね。

割り算をマスターしよう

基本の割り算

割り算は、/という記号を使います。

let totalAmount = 1500;  // 総額1500円
let numberOfPeople = 4;  // 4人
let perPerson = totalAmount / numberOfPeople;

console.log(`総額: ${totalAmount}円`);
console.log(`人数: ${numberOfPeople}人`);
console.log(`一人当たり: ${perPerson}円`);  // 375円

1500円を4人で割ると、一人375円になります。 割り勘の計算ですね。

平均点も計算してみましょう。

let scores = [85, 92, 78, 95, 88];
let totalScore = 85 + 92 + 78 + 95 + 88;  // 合計438点
let average = totalScore / 5;  // 5教科で割る

console.log(`合計点: ${totalScore}点`);
console.log(`平均点: ${average}点`);  // 87.6点

小数点の処理

割り算では、小数点が出ることがよくあります。

let dividend = 100;
let divisor = 3;
let result = dividend / divisor;

console.log(`${dividend} ÷ ${divisor} = ${result}`);  // 33.333...

100÷3は、33.333...と小数点がずっと続きます。 でも、実際のアプリでは、きれいな数字にしたいですよね。

// 四捨五入する
let rounded = Math.round(result);
console.log(`四捨五入: ${rounded}`);  // 33

// 小数点第1位で四捨五入
let oneDecimal = Math.round(result * 10) / 10;
console.log(`小数点第1位: ${oneDecimal}`);  // 33.3

Math.round()を使うと、きれいな数字にできます。 お金の計算では、特に重要な機能ですね。

割り算の注意点

割り算では、0で割らないよう注意が必要です。

function safeDivision(a, b) {
    if (b === 0) {
        console.log('エラー: 0で割ることはできません');
        return 0;
    }
    return a / b;
}

console.log(safeDivision(10, 2));  // 5
console.log(safeDivision(10, 0));  // エラー: 0で割ることはできません

この関数では、0で割ろうとした時にエラーメッセージを表示します。 こういう安全対策も大切なんです。

計算の順番を覚えよう

演算子の優先順位

数学と同じように、JavaScriptでもかけ算・割り算が先に計算されます。

let result = 2 + 3 * 4;
console.log(result);  // 14 (3 * 4が先に計算される)

2 + 3 * 4では、まず3 * 4 = 12が計算されて、それから2 + 12 = 14になります。

もし足し算を先にしたい場合は、括弧を使います。

let result = (2 + 3) * 4;
console.log(result);  // 20 (括弧内が先に計算される)

実際の計算例

税込み価格の計算で練習してみましょう。

let price = 1000;      // 商品価格
let taxRate = 0.1;     // 消費税10%
let discountRate = 0.2; // 割引20%

// 間違った計算（意図しない結果）
let wrong = price * 1 + taxRate - discountRate;
console.log(`間違った計算: ${wrong}`);  // 1000.9円

// 正しい計算（括弧で明確化）
let correct = price * (1 + taxRate) * (1 - discountRate);
console.log(`正しい計算: ${correct}円`);  // 880円

正しい計算では、まず税込み価格（1100円）を計算して、それから割引（20%オフ）を適用しています。 括弧を使うことで、計算の順番が明確になりますね。

実際のアプリで使ってみよう

お買い物システムを作ってみよう

実際のECサイトっぽい計算システムを作ってみましょう。

// お買い物カート計算機
let cart = [
    { name: 'ノートPC', price: 89800, quantity: 1 },
    { name: 'マウス', price: 2980, quantity: 2 },
    { name: 'キーボード', price: 8900, quantity: 1 }
];

let subtotal = 0;

// 各商品の小計を計算
cart.forEach(item => {
    let itemTotal = item.price * item.quantity;
    subtotal += itemTotal;
    console.log(`${item.name}: ${item.price}円 × ${item.quantity}個 = ${itemTotal}円`);
});

// 消費税を計算
let tax = Math.round(subtotal * 0.1);
let total = subtotal + tax;

console.log(`小計: ${subtotal}円`);
console.log(`消費税: ${tax}円`);
console.log(`合計: ${total}円`);

このコードでは、各商品の価格×数量を計算して、最後に消費税を加算しています。 実際のお買い物サイトと同じような計算ですね。

平均点計算システム

テストの成績管理システムも作ってみましょう。

function calculateAverage(scores) {
    if (scores.length === 0) {
        console.log('エラー: テストデータがありません');
        return 0;
    }
    
    let total = 0;
    scores.forEach(score => {
        total += score;
    });
    
    let average = total / scores.length;
    return Math.round(average * 10) / 10;  // 小数点第1位で四捨五入
}

// 使用例
let mathScores = [85, 92, 78, 95, 88];
let average = calculateAverage(mathScores);

console.log(`テスト結果: ${mathScores}`);
console.log(`平均点: ${average}点`);

この関数では、空のデータが渡された時のエラー処理も含めています。 実際のアプリでは、こういう安全対策が重要なんです。

よくある間違いと対策

文字列と数字の混同

JavaScriptでは、文字列と数字を間違えやすいので注意が必要です。

let userInput1 = '10';  // 文字列
let userInput2 = '20';  // 文字列

// 間違い：文字列として結合される
let wrong = userInput1 + userInput2;
console.log(wrong);  // '1020'（数字じゃない！）

// 正しい：数字に変換してから計算
let correct = parseInt(userInput1) + parseInt(userInput2);
console.log(correct);  // 30

文字列の'10'と'20'を足すと、'1020'という文字列になってしまいます。 parseInt()を使って数字に変換してから計算しましょう。

小数点の計算問題

小数点の計算では、時々おかしな結果になることがあります。

console.log(0.1 + 0.2);  // 0.30000000000000004（なぜ？）

0.1 + 0.2は0.3になるはずですが、微妙にずれてしまいます。 これは、コンピューターの仕組み上仕方のないことなんです。

対策として、四捨五入を使いましょう。

function preciseAdd(a, b) {
    let result = a + b;
    return Math.round(result * 100) / 100;  // 小数点第2位で四捨五入
}

console.log(preciseAdd(0.1, 0.2));  // 0.3

この関数を使うと、きれいな結果が得られます。

まとめ

JavaScriptの四則演算について、基礎から実践まで学びました。

基本の演算子

• 足し算（+）: 数を足し合わせる
• 引き算（-）: 数を引く
• かけ算（*）: 数をかけ合わせる
• 割り算（/）: 数を割る

便利な書き方

• +=: 同じ変数に足し算
• -=: 同じ変数から引き算
• *=: 同じ変数にかけ算
• /=: 同じ変数を割り算

実際の使い道

• お買い物の合計金額計算
• テストの平均点計算
• 給与の計算
• 在庫管理

注意すべきポイント

• 文字列と数字の区別
• 小数点の四捨五入
• 0で割らない対策
• 括弧を使った計算順序の明確化

これらの知識があれば、実際のWebアプリで計算機能を作ることができます。 最初は簡単な足し算から始めて、だんだん複雑な計算にも挑戦してみてください。

ぜひ今日から、これらの計算機能を使って便利なアプリを作ってみませんか？