JavaScriptで計算をマスターしよう！

プログラムを書く上で避けては通れないのが、計算です。今回はJavaScriptを使った基本的な計算方法から、少し複雑な計算方法までを一緒に学びましょう。

基本的な算術演算
複合代入演算子
Mathオブジェクトで高度な計算を
サンプルコード簡易電卓
1. HTML
2. JavaScript (calculator.js)
まとめ

基本的な算術演算

加算

JavaScriptでの加算は非常にシンプルです。+ 記号を使って、数値を簡単に足し合わせることができます。

let sum = 10 + 20;
console.log(sum); // 出力結果: 30

減算

減算も同じく-記号を使用します。次の例では30から10を引いています。

let difference = 30 - 10;
console.log(difference); // 出力結果: 20

乗算

乗算は*記号を使います。この例では5に6をかけています。

let product = 5 * 6;
console.log(product); // 出力結果: 30

除算

除算は/記号で行います。以下の例では20を4で割っています。

let quotient = 20 / 4;
console.log(quotient); // 出力結果: 5

剰余

% 記号を使うと、ある数値を別の数値で割った際の余りを計算できます。

let remainder = 7 % 5;
console.log(remainder); // 出力結果: 2

複合代入演算子

複合代入演算子を使用すると、計算と代入を一度に行うことができ、コードをシンプルに保つのに役立ちます。

加算代入 (+=)

+=演算子は、左の変数に右の値を加算して、結果を左の変数に再代入します。

let a = 10;
a += 5; // a = a + 5;
console.log(a); // 出力結果: 15

減算代入 (-=)

-=演算子も同様に、左の変数から右の値を減算し、結果を左の変数に再代入します。

let b = 20;
b -= 5; // b = b - 5;
console.log(b); // 出力結果: 15

乗算代入 (*=)

*=演算子は、左の変数に右の値を乗算して、結果を左の変数に再代入します。

let c = 3;
c *= 7; // c = c * 7;
console.log(c); // 出力結果: 21

除算代入 (/=)

/=演算子は、左の変数を右の値で除算して、結果を左の変数に再代入します。

let d = 40;
d /= 8; // d = d / 8;
console.log(d); // 出力結果: 5

Mathオブジェクトで高度な計算を

JavaScriptのMathオブジェクトは、より高度な数学的な操作を提供しています。

四捨五入 (Math.round())

Math.round()関数は、指定された数値を最も近い整数に四捨五入します。

let rounded = Math.round(7.8);
console.log(rounded); // 出力結果: 8

最大値と最小値 (Math.max() と Math.min())

Math.max()関数とMath.min()関数を使用すると、与えられた数値群の中で最大値と最小値を簡単に見つけることができます。

let maximum = Math.max(5, 10, 15, 20);
console.log(maximum); // 出力結果: 20

let minimum = Math.min(5, 10, 15, 20);
console.log(minimum); // 出力結果: 5

乱数の生成 (Math.random())

Math.random()関数は、0以上1未満のランダムな数を生成します。これを利用して任意の範囲のランダムな整数を生成することも可能です。

let randomInt = Math.floor(Math.random() * 10) + 1;
console.log(randomInt);

サンプルコード簡易電卓

例としてシンプルな「簡易電卓」を作る例を紹介します。この電卓は、2つの数値を入力し、加算、減算、乗算、除算の結果をコンソールに表示する機能を持ちます。

ユーザは２つの数値を入力し、「計算」ボタンをクリックすると、その２つの数値の加算、減算、乗算、除算の結果がコンソールに表示されます。

この例を基に、更に機能を追加したり、UIを改善したりすることができます。例えば、計算結果をWebページ上に直接表示するようにしたり、入力のバリデーションを追加したりすることが可能です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡易電卓</title>
</head>
<body>
    <h1>簡易電卓</h1>
    <form id="calculator-form">
        <input type="number" id="first-number" placeholder="第一数値">
        <input type="number" id="second-number" placeholder="第二数値">
        <button type="submit">計算</button>
    </form>

    <script src="calculator.js"></script>
</body>
</html>

シンプルなフォームを用意しています。2つのinputフィールドは、それぞれ第一数値と第二数値を入力する場所です。
「計算」ボタンをクリックすると、フォームが送信され、JavaScriptのコードが実行されます。

JavaScript (calculator.js)

document.getElementById('calculator-form').addEventListener('submit', function(e) {
    // ページのリロードを防ぐ
    e.preventDefault();

    // 入力値を取得
    let firstNumber = document.getElementById('first-number').value;
    let secondNumber = document.getElementById('second-number').value;

    // 数値に変換
    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    // 計算
    const sum = firstNumber + secondNumber;
    const difference = firstNumber - secondNumber;
    const product = firstNumber * secondNumber;
    const quotient = firstNumber / secondNumber;

    // 結果をコンソールに表示
    console.log(`加算: ${sum}`);
    console.log(`減算: ${difference}`);
    console.log(`乗算: ${product}`);
    console.log(`除算: ${quotient}`);
});

document.getElementById(‘calculator-form’).addEventListener(‘submit’, function(e) {…}:これにより、フォームが送信されると指定した関数が呼び出されます。
e.preventDefault();:これは、フォームが送信されるとページがリロードされるのを防ぎます。
let firstNumber = document.getElementById(‘first-number’).value;とlet secondNumber = document.getElementById(‘second-number’).value;:これらの行で、HTMLから入力された値を取得します。
firstNumber = parseFloat(firstNumber);とsecondNumber = parseFloat(secondNumber);:これらの行で、取得した文字列を数値に変換します。
const sum = firstNumber + secondNumber;など:これで、2つの数値の加算、減算、乗算、除算の結果を計算します。
console.log(…):最後に、計算の結果をコンソールに表示します。

まとめ

これで、JavaScriptを使った基本的な計算の方法を学ぶことができました。これらの基本をマスターすると、もっと複雑な計算も自在に操ることができるようになります。

JavaScriptの計算はこれだけではありませんが、これらの基本を押さえておけば、多くの場面で活躍することができるでしょう。

これからも続けて学び、より高度な計算もできるようになりましょう！