JavaScriptで電卓を作るための7つのステップ

はじめに
●JavaScript電卓の概要
- ○電卓の基本機能
●JavaScript電卓の作り方
●応用例とサンプルコード
- ○サンプルコード4：四則演算以外の機能追加
- ○サンプルコード5：履歴機能の追加
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptを使って独自の電卓を作成することができるようになります。

初心者でも分かりやすいように、手順別に解説しているので、ぜひ挑戦してみてください。

●JavaScript電卓の概要

○電卓の基本機能

JavaScriptを使った電卓は、様々な計算が可能な便利なツールです。

基本的な四則演算（加算、減算、乗算、除算）はもちろん、拡張機能を追加することで、より高度な計算も可能になります。

●JavaScript電卓の作り方

ここでは、JavaScriptで電卓を作るための手順を説明します。

まずはHTML、CSS、JavaScriptの3つの要素を使って、基本的な電卓を作成していきましょう。

○サンプルコード1：HTMLの基本構造

次のコードは、電卓のボタンや入力欄を配置するためのHTMLの基本構造です。この例では、数字や演算子のボタンが配置され、入力欄には計算結果が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript電卓</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="calculator">
    <input type="text" class="display" readonly>
    <div class="buttons">
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>÷</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>×</button>
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>－</button>
      <button>0</button>
      <button>.</button>
      <button>=</button>
      <button>+</button>
    </div>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

○サンプルコード2：CSSでデザインを整える

次に、CSSを使って電卓のデザインを整えます。

この例では、ボタンの大きさや色を設定し、見やすいデザインになっています。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.calculator {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  padding: 20px;
}

.display {
  width: 100%;
  margin-bottom: 10px;
  text-align: right;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 0;
  font-size: 18px;
  cursor: pointer;
}

button:hover {
  background-color: #e0e0e0;
}

○サンプルコード3：JavaScriptで電卓の機能を実装

このコードでは、JavaScriptを使って電卓の機能を実装しています。

この例では、ボタンがクリックされたときに、入力された数値や演算子を処理して計算結果を表示する機能を実装しています。

const display = document.querySelector('.display');
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    if (button.textContent === '=') {
      display.value = eval(display.value);
    } else if (button.textContent === 'C') {
      display.value = '';
    } else {
      display.value += button.textContent;
    }
  });
});

●応用例とサンプルコード

○サンプルコード4：四則演算以外の機能追加

このコードでは、四則演算以外の機能を追加しています。

この例では、平方根やパーセント計算を行う機能を追加しています。

// 平方根ボタン
const sqrtButton = document.createElement('button');
sqrtButton.textContent = '√';
sqrtButton.addEventListener('click', () => {
  display.value = Math.sqrt(parseFloat(display.value));
});
buttons.appendChild(sqrtButton);

// パーセントボタン
const percentButton = document.createElement('button');
percentButton.textContent = '%';
percentButton.addEventListener('click', () => {
  display.value = parseFloat(display.value) / 100;
});
buttons.appendChild(percentButton);

○サンプルコード5：履歴機能の追加

このコードでは、電卓に履歴機能を追加しています。

この例では、過去に行った計算の履歴を表示・非表示する機能を実装しています。

const historyButton = document.createElement('button');
const historyList = document.createElement('ul');
let isHistoryVisible = false;

historyButton.textContent = '履歴';
historyButton.addEventListener('click', () => {
  isHistoryVisible = !isHistoryVisible;
  historyList.style.display = isHistoryVisible ? 'block' : 'none';
});
buttons.appendChild(historyButton);

document.querySelector('.calculator').appendChild(historyList);

function addToHistory(expression, result) {
  const listItem = document.createElement('li');
  listItem.textContent = `${expression} = ${result}`;
  historyList.appendChild(listItem);
}

buttons.forEach(button => {
  button.addEventListener('click', () => {
    if (button.textContent === '=') {
      const expression = display.value;
      const result = eval(expression);
      display.value = result;
      addToHistory(expression, result);
    } else if (button.textContent === 'C') {
      display.value = '';
    } else {
      display.value += button.textContent;
    }
  });
});