♾️

TypeScriptでシンプルな電卓を作成する

に公開
JavaScript
TypeScript
frontend
web開発
tech

TypeScriptで電卓を作ってみた

TypeScriptを使ってシンプルな電卓を作成しました。
基本的な四則演算（+、-、*、/）を実装し、ボタンを押して計算できるようになっています。

デモページ
GitHubリポジトリ

プロジェクトの構成

この電卓は、次の3つのファイルで構成されています。

  • index.html（HTMLの構造）
  • styles.css（スタイル）
  • script.ts（TypeScriptで処理）

1. HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TypeScript 電卓</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="calculator">
      <input type="text" id="display" disabled />
      <div class="buttons">
        <button data-value="7">7</button>
        <button data-value="8">8</button>
        <button data-value="9">9</button>
        <button data-value="/" class="operator">/</button>
        <button data-value="4">4</button>
        <button data-value="5">5</button>
        <button data-value="6">6</button>
        <button data-value="*" class="operator">*</button>
        <button data-value="1">1</button>
        <button data-value="2">2</button>
        <button data-value="3">3</button>
        <button data-value="-" class="operator">-</button>
        <button data-value="0">0</button>
        <button data-value="C" class="clear">C</button>
        <button data-value="=" class="equal">=</button>
        <button data-value="+" class="operator">+</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

2. TypeScript（script.ts）

1. DOM 要素の取得

const display = document.getElementById("display") as HTMLInputElement;
const buttons = document.querySelectorAll("button");
  • display: 計算結果を表示する <input> 要素を取得し、HTMLInputElement 型としてキャスト。
  • buttons: すべての <button> 要素を取得。

2. 状態を管理する変数

let currentInput: string = "";
let operator: string | null = null;
let previousInput: string = "";
let isResultDisplayed: boolean = false; // 計算結果が表示されたかどうか
  • currentInput: 現在の入力（数字）。
  • operator: 選択された演算子（+, -, *, /）。
  • previousInput: 演算子を押した後の、前の数値。
  • isResultDisplayed: 計算結果が表示されているかどうかのフラグ。

3. ボタンのクリック処理

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const value = button.getAttribute("data-value");

    if (!value) return;

    if (value === "C") {
      clearDisplay();
    } else if (value === "=") {
      calculate();
    } else if (["+", "-", "*", "/"].includes(value)) {
      setOperator(value);
    } else {
      appendNumber(value);
    }
  });
});
  • すべてのボタンに click イベントを追加。
  • data-value 属性の値を取得し、適切な処理を実行。

4. 数字を入力する関数

function appendNumber(num: string) {
  if (isResultDisplayed) {
    currentInput = "";
    isResultDisplayed = false;
  }
  currentInput += num;
  updateDisplay();
}
  • 数字を入力する関数。
  • 計算結果が表示された後は currentInput をリセット。

5. 演算子を設定する関数

function setOperator(op: string) {
  if (currentInput === "") return;

  if (operator) {
    calculate();
  }

  operator = op;
  previousInput = currentInput;
  currentInput = "";
}
  • operator を設定し、計算を行う準備をする。
  • すでに演算子がセットされている場合、計算を実行して連続計算。

6. 計算を実行する関数

function calculate() {
  if (!previousInput || !currentInput || !operator) return;

  const num1 = parseFloat(previousInput);
  const num2 = parseFloat(currentInput);
  let result: number;

  switch (operator) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      result = num2 !== 0 ? num1 / num2 : NaN;
      break;
    default:
      return;
  }

  currentInput = result.toString();
  operator = null;
  previousInput = "";
  isResultDisplayed = true;
  updateDisplay();
}
  • previousInput, currentInput, operator を使って計算を実行。
  • 計算結果を currentInput に格納し、次の計算に備える。

7. 画面をクリアする関数

function clearDisplay() {
  currentInput = "";
  previousInput = "";
  operator = null;
  isResultDisplayed = false;
  updateDisplay();
}
  • currentInput や previousInput をリセット。
  • updateDisplay() で画面を更新。

8. 表示を更新する関数

function updateDisplay() {
  display.value = currentInput;
}
  • display の value を currentInput に設定して画面を更新。

まとめ

TypeScriptを使ってシンプルな電卓を作成してみました。
TypeScriptのみでここまで書けることに感動しました。

Discussion