実例 電卓を作ろう！ | 算術演算子 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク

HTML、CSS、JavaScriptを組み合わせて、これらの機能を実現します。

スポンサーリンク

電卓アプリ

今回は、JavaScriptを使ってシンプルな電卓アプリを作成し、その仕組みを詳しく解説します。電卓アプリは、基本的な操作を学ぶのに最適で、数値の入力、計算、結果の表示といった基本的な機能を通して、JavaScriptの基礎を理解することができます。

電卓アプリの仕組み

電卓アプリは、以下の基本的な機能で構成されています：

  • 数値の入力
  • 演算子（+, -, *, /）の入力
  • 計算の実行（=キー）
  • 入力のクリアや削除（Cキーや⌫キー）
  • 結果の表示

HTML構造

まず、HTML部分から見ていきます。HTMLは、電卓の外観を作り出すための要素を配置しています。<input>タグを使って、ユーザーが入力や計算結果を見るためのディスプレイ部分を作り、各ボタンは<button>タグで配置されています。

<input type="text" id="display" disabled />

この部分はディスプレイを表し、ユーザーが操作した内容や計算結果が表示されます。disabled属性を付けることで、ユーザーが直接入力できないようにし、JavaScriptでのみ値を更新するようにしています。

<div class="calculator">
  <input type="text" id="display" disabled />
  <button onclick="clearDisplay()">C</button>
  <button onclick="deleteLast()">⌫</button>
  <button onclick="appendOperator('/')">/</button>
  <button onclick="appendOperator('*')">*</button>
  <button onclick="appendNumber(7)">7</button>
  <button onclick="appendNumber(8)">8</button>
  <button onclick="appendNumber(9)">9</button>
  <button onclick="appendOperator('-')">-</button>
  <button onclick="appendNumber(4)">4</button>
  <button onclick="appendNumber(5)">5</button>
  <button onclick="appendNumber(6)">6</button>
  <button onclick="appendOperator('+')">+</button>
  <button onclick="appendNumber(1)">1</button>
  <button onclick="appendNumber(2)">2</button>
  <button onclick="appendNumber(3)">3</button>
  <button class="equals" onclick="calculate()">=</button>
  <button class="zero" onclick="appendNumber(0)">0</button>
  <button onclick="appendDot()">.</button>
</div>

CSSでのスタイル設定

次に、電卓の見た目を調整するために、CSSを使用しています。CSSでは、電卓全体をグリッドレイアウトでデザインし、各ボタンやディスプレイのスタイルを設定しています。

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.calculator button {
  padding: 20px;
  font-size: 18px;
  border: none;
  background-color: #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
}
.calculator button:hover {
  background-color: #d0d0d0;
}
.calculator button.operation {
  background-color: #ff9500;
  color: white;
}
.calculator button.operation:hover {
  background-color: #ff8500;
}
.calculator button.equals {
  background-color: #34c759;
  color: white;
}
.calculator button.equals:hover {
  background-color: #28a745;
}
.calculator button.zero {
  grid-column: span 2;
}

display: grid：グリッドレイアウトを使用して、電卓のボタンを行列状に配置しています。
grid-template-columns: repeat(4, 80px)：1行あたり4つのボタンを配置し、それぞれ80pxの幅にしています。
gap: 10px：ボタン間の隙間を10pxに設定しています。

JavaScriptで機能を実装

JavaScript部分が、この電卓アプリの「頭脳」です。ここでは、ボタンが押されたときの動作や、計算の処理を行います。主な関数とその動作を見ていきましょう。

    let displayValue = '';

    function appendNumber(number) {
      displayValue += number;
      updateDisplay();
    }

    function appendOperator(operator) {
      displayValue += operator;
      updateDisplay();
    }

    function appendDot() {
      if (!displayValue.includes('.')) {
        displayValue += '.';
        updateDisplay();
      }
    }

    function clearDisplay() {
      displayValue = '';
      updateDisplay();
    }

    function deleteLast() {
      displayValue = displayValue.slice(0, -1);
      updateDisplay();
    }

    function calculate() {
      try {
        displayValue = eval(displayValue);
        updateDisplay();
      } catch (e) {
        displayValue = 'Error';
        updateDisplay();
      }
    }

    function updateDisplay() {
      document.getElementById('display').value = displayValue;
    }

数字や演算子の入力

まず、数字や演算子が入力された際の処理を見てみましょう。数字が押されると、appendNumber()という関数が呼ばれ、ディスプレイにその数字が追加されます。

function appendNumber(number) {
  displayValue += number;
  updateDisplay();
}

演算子の入力も同様です。演算子が押されたときにはappendOperator()が呼び出され、入力された演算子がdisplayValueに追加されます。

function appendOperator(operator) {
  displayValue += operator;
  updateDisplay();
}

計算結果の表示

=ボタンが押されたときには、calculate()関数が実行され、入力された数式を計算します。

function calculate() {
  try {
    displayValue = eval(displayValue);
    updateDisplay();
  } catch (e) {
    displayValue = 'Error';
    updateDisplay();
  }
}

クリアや削除

Cボタンを押すと、clearDisplay()関数が実行され、ディスプレイがリセットされます。

function clearDisplay() {
  displayValue = '';
  updateDisplay();
}

また、⌫ボタンを押すと、deleteLast()関数が呼ばれ、最後の文字が削除されます。

function deleteLast() {
  displayValue = displayValue.slice(0, -1);
  updateDisplay();
}

ディスプレイの更新

updateDisplay()関数は、常にディスプレイに表示される内容を最新の状態に更新します。

function updateDisplay() {
  document.getElementById('display').value = displayValue;
}

まとめ

以上が、JavaScriptを使ったシンプルな電卓アプリの解説です。基本的な数値の入力、演算子の操作、計算の実行、クリアや削除といった機能を、HTML、CSS、JavaScriptを組み合わせて実装しました。この電卓アプリを通じて、JavaScriptの基礎的な操作や関数の仕組みを理解できるようになるでしょう。

スポンサーリンク