四則演算ができる計算機アプリを作る

JavaScriptで計算処理を実装する

続いて、JavaScriptで計算機の動作を段階的に実装していく。まずは、チャットで次のように依頼して数字ボタンの処理を追加しよう。JavaScriptもHTMLとはファイルを分けたいので、CSSのときの反省を生かして、今度は最初から別ファイルにするように指示を付け加えてみた。

数字ボタンをクリックしたら、その数字が表示エリアに表示されるようにしてください。
JavaScriptは別のファイルに分けて記述してください

するとCopilotは、script.jsというファイルを作ってJavaScriptの処理を記述し、それに合わせてindex.htmlも修正してくれた。

• 

index.htmlの方は、下の方にscript.jsを読み込むタグが追加された。

  </div>
  <script src="script.js"></script>
</body>
</html

そして肝心のscript.jsの方は次のようなコードになった。

document.addEventListener('DOMContentLoaded', function () {
  const display = document.getElementById('display');
  const numberButtons = document.querySelectorAll('[data-number]');

  numberButtons.forEach(button => {
    button.addEventListener('click', function () {
      display.value += button.getAttribute('data-number');
    });
  });
})

数字のbuttonタグには「data-number」という属性が付いているので、この属性の要素をすべて取得して、イベントリスナーをセットするというコードになっている。イベントリスナーの中では、クリックされたボタンの数字を特定して、その数字を表示領域のテキストフィールドにセットするという処理を行っている。

Webブラウザで動作を確認すると、次のように数字が入力できるようになった。

• 

  数字ボタンが反応するようになった

数字ボタンが反応するようになったので、同じように演算子の処理も作ってみる。チャットには次のように指示してみよう。

演算子ボタンの処理を追加してください

script.jsが書き換わって、演算子ボタンの処理が実装された。

document.addEventListener('DOMContentLoaded', function () {
  const display = document.getElementById('display');
  const numberButtons = document.querySelectorAll('[data-number]');
  const operatorButtons = document.querySelectorAll('.operator');

  // 中略

  operatorButtons.forEach(button => {
    button.addEventListener('click', function () {
      display.value += button.getAttribute('data-operator');
    });
  });
});

演算子のbuttonタグにはclass属性に「operator」が指定されているので、これを使ってイベントリスナーをセットしている。Webブラウザで動作を確認すると、次のように演算子も入力できるようになった。

• 

  演算子ボタンも反応するようになった

同じようにして計算処理も実装しよう。チャットには次のように依頼してみる。

=ボタンをクリックしたら計算結果を表示する機能を作ってください

script.jsには、「=」ボタンをクリックした場合に、表示領域の式を実行した上で、計算結果を表示するという処理が追加された。

document.addEventListener('DOMContentLoaded', function () {
  const display = document.getElementById('display');
  const numberButtons = document.querySelectorAll('[data-number]');
  const operatorButtons = document.querySelectorAll('.operator');
  const equalButton = document.getElementById('equal');

  numberButtons.forEach(button => {
    button.addEventListener('click', function () {
      display.value += button.getAttribute('data-number');
    });
  });

  operatorButtons.forEach(button => {
    button.addEventListener('click', function () {
      display.value += button.getAttribute('data-operator');
    });
  });

  equalButton.addEventListener('click', function () {
    let expression = display.value
      .replace(/×/g, '*')
      .replace(/÷/g, '/');
    try {
      // eslint-disable-next-line no-eval
      const result = eval(expression);
      display.value = result !== undefined ? result : '';
    } catch (e) {
      display.value = 'Error';
    }
  });
});

Webブラウザでindex.htmlをリロードすれば、電卓のように計算処理が実行できるようになったことを確認できる。

• 

  「=」ボタンで計算処理が実行されるようになった

さて、「=」ボタンの動作では、演算方法に関する細かい指示を出していないが、これで良かったのだろうか。厳密には「+の場合はこういう計算をする」のような指示を出す必要があるだろう。しかし、計算機の一般的な演算はすでにCopilotも把握していると考えてよいので、今回のような簡潔な指示でもうまく実装してくれる。

もし正しく動作しないのであれば、その場合は生成されたコードをいったん破棄して、より詳細な指示を出すようにチャットへの入力を修正すればよい。

最後に、「C」ボタンで表示領域をクリアする処理を追加する。チャットへの入力は次のような具合になる。

Cボタンをクリックしたら結果表示がクリアされるようにしてください

script.jsには次のようにコードが追加され、計算結果をクリアできるようになった。

document.addEventListener('DOMContentLoaded', function () {
  const display = document.getElementById('display');
  const numberButtons = document.querySelectorAll('[data-number]');
  const operatorButtons = document.querySelectorAll('.operator');
  const equalButton = document.getElementById('equal');
  const clearButton = document.getElementById('clear');

  // 中略

  clearButton.addEventListener('click', function () {
    display.value = '';
  });
});