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

JavaScriptで作成された電卓の画像JS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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;
    }
  });
});

●注意点と対処法

電卓アプリケーションを作成する際には、入力値のバリデーションやエラー処理に注意してください。

例えば、0で除算した場合にエラーメッセージを表示するなど、ユーザーにわかりやすい形でフィードバックを提供しましょう。

●カスタマイズ方法

電卓アプリケーションは、さまざまなカスタマイズが可能です。

例えば、デザインやレイアウトを変更したり、新たな計算機能を追加したりすることができます。

また、キーボード入力に対応させることも可能です。

自分のニーズに合わせてカスタマイズしてみましょう。

まとめ

この記事では、JavaScriptを使って電卓アプリケーションを作成する方法を紹介しました。

基本的な電卓機能から、履歴機能の追加やデザインのカスタマイズ方法まで解説しました。

これを機に、ぜひ自分だけの電卓アプリケーションを作成してみてください。