【JavaScript】4つの関数で作る「シンプル四則演算計算機」

今日は課題で、2つの数字を入力して「足し算・引き算・掛け算・割り算」ができる計算機ページを作成しました。

それぞれの演算を個別の関数で定義し、ボタンをクリックした時に実行される仕組みを練習しました。

課題の内容と設計

1.画面構成: 数字入力欄 2, 演算ボタン 4, 結果表示用の領域 (div or p)

2.主な機能: 各ボタンをクリックすると、対応する関数（add, sub, multi, div）が呼び出され、計算結果を表示する。

3.注意点: 入力値は「文字列」として取得されるため、計算前に「数値型」に変換する。

1. 骨組み（HTMLのデザイン）を先に考える

まずは画面に何が必要か整理します。
ユーザーが数字を入力する場所と, 計算を実行するボタン, そして結果が出る場所が必要です。

💡 ユーザーへの配慮
placeholder は必須ではありませんが, 書いておくとユーザーが「何を入れればいいか」すぐわかるので, 親切な設計になります。

2. JavaScriptで「動き」を作る準備

計算処理はJavaScriptで行います。まずボタンに「クリックされたら関数を動かす」設定をします。
足し算
引き算
掛け算
割り算

3.関数の作成とデバッグの習慣

getElementById を使って入力された値を取得します。ここで大切なのが console.log です。

function add() {
    const firstNum = document.getElementById("num1").value;
    const secondNum = document.getElementById("num2").value;

    // 次のステップに行く前に必ず確認！(デバッグ)
    console.log("入力された1番目の数字: " + firstNum);
    console.log("入力された2番目の数字: " + secondNum);
}

コードに打ち間違い（タイポ）がないか, 次の処理に進む前にコンソールで確認する習慣をつけると, 大きなエラーを未然に防げます。

4. 型変換の重要性

一番の落とし穴は、取得した値が「文字列」として認識されることです。

let num1 = Number(firstNum);
let num2 = Number(secondNum);

このように Number() を使わないと, 数字ではなく文字としてつながってしまいます（例: 1+2=12）。計算機を作る時は必須の作業です！

5. 結果の出力

最後に, 計算式と一緒に結果を画面に表示させます。

<h2>四則演算計算機</h2>
<input type="number" id="num1" placeholder="1番目の数値を入力">
<br>
<input type="number" id="num2" placeholder="2番目の数値を入力">
<br>

<button type="button" onclick="add()">足し算</button>
<button type="button" onclick="sub()">引き算</button>
<button type="button" onclick="multi()">掛け算</button>
<button type="button" onclick="div()">割り算</button>

<p id="result">結果:</p>

<script>
  function add() {
    // 入力された2つの数値を足して結果を出力
    const n1 = document.getElementById("num1").value;
    const n2 = document.getElementById("num2").value;
    const result = document.getElementById("result");
    
    // 文字列を数値型に変換して計算
    const res = Number(n1) + Number(n2);
    
    result.innerHTML = "結果: " + res;
    result.style.color = "blue";
  }

  function sub() {
   const n1 = document.getElementById("num1").value;
    const n2 = document.getElementById("num2").value;
    const result = document.getElementById("result");

    const res = Number(n1) - Number(n2);
    
    result.innerHTML = "結果: " + res;
  }

  function multi() {
const n1 = document.getElementById("num1").value;
    const n2 = document.getElementById("num2").value;
    const result = document.getElementById("result");

    const res = Number(n1) * Number(n2);
    
    result.innerHTML = "結果: " + res;
  }

  function div() {
   const n1 = document.getElementById("num1").value;
    const n2 = document.getElementById("num2").value;
    const result = document.getElementById("result");

    const res = Number(n1) / Number(n2);
    
    result.innerHTML = "結果: " + res;
  }
</script>

まとめ

関数の活用: onclick を使って、HTMLとJavaScriptの関数を繋げる方法に慣れてきました。

型変換の重要性: 特に足し算の場合、Number() を忘れると数字がつながって表示されてしまう（例：1+2=12）ので、型変換の大切さを再確認しました。