プログラマー廃業の危機か?!ChatGPTが作ったJS電卓アプリを添削してみよう

少し前までは「AIがプログラマーの代わりにプログラムを作ってくれるようになる」と聞いても誰も信じなかった事でしょう。しかし、最近、様々なAIサービスが登場して、プログラムの自動生成が可能になっています。そこで、本稿では話題のChatGPTを利用して電卓アプリを作らせて、その実力を添削してみましょう。

• ChatGPTが作成した電卓アプリを実行したところ

ChatGPTとは何か？

最近になって、AIによって影響を受ける職業の一つにプログラマーも挙げられるようになってきました。AIがプログラムを作れるようになったら、プログラマーは不要になってしまうのでしょうか。本稿では、その点を考慮しつつ、話題のChatGPTを試してみます。

OpenAIが開発したChatGPTとはチャット型のAI対話サービスで、論文を書かせたり、高度な試験問題も解いたり、小説のプロットを書かせたりと、様々な会話が可能となっています。さらに、ChatGPTはプログラムも生成することが可能です。プログラミング言語や条件、作成するプログラムを指定すると、自動でプログラムを作成できます。

• ChatGPTにアクセスしたところ

ChatGPTには、こちらからアクセスして試すことができます。なお、初回はユーザー登録が必要になります。ユーザー登録をして使用可能になると、次のような画面が表示されます。チャット形式でAIと会話ができるので、まずは適当に話しかけてみると良いでしょう。

• ChatGPTにアクセスしたところ

すごい！本当に動いたAIの作った電卓アプリ

さて、今回はお題として「電卓アプリ」を作成させて添削してみようと思います。難しいことはないので、実際に誰でも試すことが可能です。試す方法は簡単です。画面下部にあるチャットの入力ボックスに「JavaScriptで電卓アプリを作ってください。」と入力するだけです。

• 電卓アプリを作るように指示するだけ

すると、あっという間に、次のようなHTMLとJavaScriptのコードを生成してくれました。果たして正しく動くプログラムなのでしょうか。

• ChatGPTが作ったプログラム

作成されたプログラムをテキストエディタに貼り付け、「calc.html」という名前で保存します。そして、HTMLをWebブラウザにドラッグ＆ドロップして開きます。すると、次のようにAIが作成した電卓アプリが正しく動きました。試しに「500 * 3 =」と入力してみましょう。答えとして「1500」が表示されます。

• AIが作成した電卓アプリが正しく動いた

実際のところ、このような電卓のプログラム自体は、それほど難易度が高いものではありません。それでも筆者が自力でゼロから書いたら10分はかかることでしょう。もちろん、JavaScriptに不慣れなプログラマーなら30分以上はかかるかもしれません。それが、ChatGPTを起動して作りたいアプリ名を一言書いただけで作成できてしまったのです。

しかも、ChatGPTはプログラムを出力しただけではなく、「電卓が計算を行うのにeval関数を使っているのでセキュリティに注してください」という親切なコメントまで添えてくれました。

筆者がHTMLを確認すると、画面上部の計算入力ボックス(input要素)には「readonly」属性が設定されており、セキュリティ的にも自分で使う分には全く問題ないものでした。

AIが生成した電卓のポイント

それでは、AIが生成したコードをレビューしてみましょう。もちろん、このコードは誰かがブログに書いたコードをまるまるコピーしている可能性もあります。そこで、ここでは全体のコードを貼り付けることはしません。電卓アプリのポイントだけを部分的に切り出して紹介しましょう。

まず、電卓のボタンのコードは次のようになっています。これは数字のボタンを押すごとに、画面上部の入力ボックスに数字を追記する仕組みとなっています。

<!-- 画面上部の計算式の入力ボックス -->
<input type="text" name="answer" id="answer" readonly>

<!-- 数字ボタンのコード -->
<input type="button" value="7" onclick="calculator.answer.value += '7'">
<input type="button" value="8" onclick="calculator.answer.value += '8'">
<input type="button" value="9" onclick="calculator.answer.value += '9'">
...

そして「=」ボタンは次のようになっており、ボタンを押すと、JavaScriptの計算式を計算するeval関数を使って計算式を計算して戻り値を画面上部に表示するというものになっています。

<!-- 計算行う「=」ボタンのコード -->
<input type="button" value="=" 
    onclick="calculator.answer.value = eval(calculator.answer.value)">

問題なく動くものの、筆者的には「ちょっと古くさいJavaScriptのコード」という印象です。

とは言え、新規のチャット画面を出して、同じように「JavaScriptで電卓アプリを作ってください。」と入力してみたところ、異なるHTML/JavaScriptのコードを生成しました。同一の質問に対して同一の返答をするのではなく、異なる答えを出すようです。

AIに再注文を加えてみる

なお、ChatGPTでは、前回の質問や自身の回答を覚えており、その内容に沿って、さらに質問したり、注文をつけたりすることが可能となっています。既に作成されたプログラムを改良するように再注文してみましょう。

先ほど、ChatGPTからevalにセキュリティリスクがあることが指摘されました。そこで、「evalを実行する前に入力チェックするコードを加えてください。」と指示してみました。果たしてAIは、こんな曖昧な指示を理解してくれるのでしょうか。

すると、「確かにeval()関数を使う前に入力の検証を行うことが重要です」ともっともらしい事を述べた後、先ほどのプログラムを改良したプログラムを作ってくれました。以下のようなプログラムが生成されました。

<!-- 計算ボタンの処理がcalculate関数に置き換えられました -->
<input type="button" value="=" onclick="calculate()">
〜省略〜
function calculate() {
    var input = calculator.answer.value;
    var lastChar = input[input.length - 1];
    // 最後の文字が演算子であるかどうかをチェックする
    if (lastChar === '+' || lastChar === '-' || lastChar === '*' || lastChar === '/') {
        alert("不正な式です");
        return;
    }
    // 文字列を評価する
    var result = eval(input);
    calculator.answer.value = result;
}

プログラムを修正してみると、確かに正しく動いているように見えます。ただし、残念なことに上記のプログラムは間違っています。確かに、計算にエラーが出るかどうかをチェックしていますが、不正な文字列が入力されないことをチェックしていません。