JavaScriptで作る簡単な計算機アプリ：基本構文から実践プロジェクトへ

プログラミング学習の第一歩として、計算機アプリの作成は非常に有益です。JavaScriptの基本文法である変数、関数、イベントハンドリングを実際に使って、四則演算を行うシンプルな計算機アプリを作成します。これにより、コードの基礎を身につけながら、実践的なプロジェクトに取り組む準備ができます。

1. アプリの概要と構成
2. HTML構造の作成
3. JavaScriptでの機能実装
1. 3.1 変数と関数の定義
2. 3.2 ボタンのクリックイベント処理
4. 実践例と改善ポイント
5. まとめ
6. 参考リンク

1. アプリの概要と構成

この計算機アプリは、ユーザーが数字と演算子（+、-、×、÷）を入力し、結果を表示するシンプルなものです。主な機能は次の通りです：

数字と演算子の入力： ユーザーがボタンをクリックして、数値や演算子を入力します。
計算処理： 入力された値に基づいて、四則演算を実行します。
結果の表示： 計算結果を画面上に表示します。

2. HTML構造の作成

まずは、計算機アプリの基本的な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>
  <div id=\"calculator\">
    <div id=\"display\">0</div>
    <div id=\"buttons\">
      <button class=\"btn\" data-value=\"7\">7</button>
      <button class=\"btn\" data-value=\"8\">8</button>
      <button class=\"btn\" data-value=\"9\">9</button>
      <button class=\"btn operator\" data-value=\"/\">/</button>
      <button class=\"btn\" data-value=\"4\">4</button>
      <button class=\"btn\" data-value=\"5\">5</button>
      <button class=\"btn\" data-value=\"6\">6</button>
      <button class=\"btn operator\" data-value=\"*\">×</button>
      <button class=\"btn\" data-value=\"1\">1</button>
      <button class=\"btn\" data-value=\"2\">2</button>
      <button class=\"btn\" data-value=\"3\">3</button>
      <button class=\"btn operator\" data-value=\"-\">-</button>
      <button class=\"btn\" data-value=\"0\">0</button>
      <button class=\"btn\" data-value=\".\">.</button>
      <button class=\"btn\" data-value=\"C\">C</button>
      <button class=\"btn operator\" data-value=\"+\">+</button>
      <button class=\"btn equal\" data-value=\"=\">=</button>
    </div>
  </div>
</body>
</html>

3. JavaScriptでの機能実装

続いて、JavaScriptを用いて計算機の基本機能を実装します。ここでは、ユーザーの入力を取得し、計算処理を実行するロジックを解説します。

3.1 変数と関数の定義


// 計算機の状態を管理する変数
let currentInput = "";
let operator = "";
let previousInput = "";

// 画面に値を表示する関数
function updateDisplay(value) {
  document.getElementById("display").textContent = value;
}

3.2 ボタンのクリックイベント処理


document.querySelectorAll(".btn").forEach(button => {
  button.addEventListener("click", function() {
    const value = this.getAttribute("data-value");
    
    // 「C」が押された場合、状態をリセット
    if (value === "C") {
      currentInput = "";
      operator = "";
      previousInput = "";
      updateDisplay("0");
      return;
    }
    
    // 「=」が押された場合、計算を実行
    if (value === "=") {
      if (previousInput !== "" && operator !== "" && currentInput !== "") {
        let result = 0;
        const num1 = parseFloat(previousInput);
        const num2 = parseFloat(currentInput);
        
        switch (operator) {
          case "+": result = num1 + num2; break;
          case "-": result = num1 - num2; break;
          case "*": result = num1 * num2; break;
          case "/": result = num1 / num2; break;
        }
        
        updateDisplay(result);
        // 計算後、状態をリセットして結果を新たな入力として扱う
        currentInput = result.toString();
        operator = "";
        previousInput = "";
      }
      return;
    }
    
    // 演算子の場合
    if (["+", "-", "*", "/"].includes(value)) {
      if (currentInput === "") return;
      operator = value;
      previousInput = currentInput;
      currentInput = "";
      return;
    }
    
    // 数字または小数点の場合、入力を追加
    currentInput += value;
    updateDisplay(currentInput);
  });
});

4. 実践例と改善ポイント

この計算機アプリは、基本的な四則演算を実行するシンプルな構造となっています。
今後は、以下のような改善が考えられます：
– 複数の演算子を組み合わせた連続計算の実装
– ユーザーインターフェースの強化（アニメーションやエフェクトの追加）
– 計算履歴の保存機能の追加
– エラーチェックの強化（ゼロ除算など）
– スマホ対応のレスポンシブデザインの実装

5. まとめ

本記事では、JavaScriptの基本文法を活用して、シンプルな計算機アプリを構築する方法を解説しました。
変数、関数、イベントハンドリングなどの基礎を学びながら、実際に動くプロジェクトを体験できる内容になっています。
初心者の方は、まずこのシンプルなアプリを作成して、JavaScriptの基本をしっかりと理解することから始めましょう。実践を積むことで、さらに複雑なプロジェクトへのステップアップが可能になります。