GitHub Copilot ChatではじめるJavaScript開発(2) 四則演算ができる計算機アプリを作る

AIプログラミングアシスタントツール「GitHub Copilot Chat」を使って、JavaScriptによるWebアプリケーションの開発の仕方を学ぶ本連載。前回は、GitHub Copilot Chatをセットアップし、HTMLとJavaScriptで「Hello, Copilot!」と表示するプログラムを作成した。今回は、Copilot Chatと対話しながら、四則演算ができる簡単な計算機アプリを作ってみよう。

Copilot Chatで計算機のHTMLを作る

まずは任意の場所に「simple-calculator」という名前のフォルダーを作り、それをVisual Studio Code（VSCode）で開く。そして、Copilot Chatパネルを開いて前回同様に「Edit」モードにセットし、チャット欄に次のように入力してみよう。

計算機のHTMLを作ってください。数字ボタンと演算子ボタン、結果表示エリアが欲しいです

Copilot Chatに計算機の見た目のHTMLをさくせいするように指示

筆者の環境では、Copilotは次のようなindex.htmlファイルを生成した（長いのでスタイル指定の部分は省略する）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>シンプル計算機</title>
  <style>
    /* スタイル記述は省略 */
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
      <button class="clear" id="clear">C</button>
      <button class="operator" data-operator="÷">÷</button>
      <button class="operator" data-operator="×">×</button>
      <button data-number="7">7</button>
      <button data-number="8">8</button>
      <button data-number="9">9</button>
      <button class="operator" data-operator="-">-</button>
      <button data-number="4">4</button>
      <button data-number="5">5</button>
      <button data-number="6">6</button>
      <button class="operator" data-operator="+">+</button>
      <button data-number="1">1</button>
      <button data-number="2">2</button>
      <button data-number="3">3</button>
      <button class="equal" id="equal">=</button>
      <button data-number="0" style="grid-column: span 2;">0</button>
    </div>
  </div>
</body>
</html

このindex.htmlをWebブラウザで開くと、次のように計算機っぽい見た目のページが表示される。この段階では、ボタンは表示されるが、クリックしてもまだ何も反応しない。

計算機のようなユーザーインタフェースができた

なお、前回も説明したように、同じ指示を出してもAIは毎回同じコードを生成するとは限らないので、みなさんの環境ではこのコード例とは違うコードが生される可能性もある。AIにコード生成してもらう場合、コードの細部にはこだわらずに、正しい動作をするかどうかに注目して開発を進めるのがポイントだ。

この例だとCSSのスタイル指定もHTMLファイルの中に書き込まれてしまっている。一般的にはHTMLとCSSはファイルを分けることが望ましいので、次のように指示して修正してもらう。

HTMLとCSSを別のファイルに分けてください

Copilotは新しくstyle.cssというファイルを作って、CSSのコードはそちらに書き直してくれた。

HTMLファイルとCSSファイルを分割した

index.htmlの方では、次のようにstyle.cssを読み込むようにlinkタグが追加されている。

<head>
  <meta charset="UTF-8">
  <title>シンプル計算機</title>
  <link rel="stylesheet" href="style.css">
</head

チャットで指示して見た目を調整する

基本となるコードができたら、これをベースに細部を調整していこう。もちろん、HTMLやCSSが分かるのであれば自分で書き換えてもいいが、チャットで指示してCopilotに書き換えてもらうこともできる。先程の例だと「0」と「=」の配置が少し不自然なので、修正してもらうために次のような指示を出してみた。

=ボタンと0ボタンの配置を入れ替えてください

Copilotは、HTMLで「0」と「=」の配置を変えるように修正してくれた。

      <button data-number="1">1</button>
      <button data-number="2">2</button>
      <button data-number="3">3</button>
      <button data-number="0" style="grid-column: span 2;">0</button>
      <button class="equal" id="equal">=</button

Webブラウザでindex.htmlをリロードして、「0」と「=」のボタン配置が入れ替わったことを確認できた。