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

• 

  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;
}

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

そこで、「calculate()関数が間違っています。全ての文字が数字か演算子かどうかを検証するプログラムを作ってください。」と再注文を出してみました。

すると、今度は正しく正規表現を使って入力をテストするコードを生成してくれました。しかも、「申し訳ありません。」と素直に謝ってくれました。実に謙虚です。

• 

  再注文に応じて正しいプログラムを生成したところ

このようにして、こちらの意図を汲み取って、セキュリティリスクの少ない正しいプログラムを作ってくれました。若干、学生に対してプログラミングの課題を再提出させた先生の気分です。しかし、ChatGPTは不出来な学生ではありません。こちらの注文に反応して生成するコードをブラッシュアップさせてきました。

さらに難しい注文をしてみた

なお、セキュリティの心配のあるeval関数を使うのを止めて、文字列を中置記法で計算するプログラムを作るように指示してみました。これはゼロから作ると筆者でも作成に1時間はかかるプログラムです。

すると、ChatGPTは、正しく中置記法を計算するプログラムを答えとして出してきました。解説も正確で、「文字列を逆ポーランド記法に変換し、逆ポーランド記法を計算するJavaScriptコードを生成する」との解説付きでJavaScriptのプログラムを生成してくれました。

• 

  eval関数を文字列計算のプログラムに差し替えるように指示したところ

ただし、無料版を使っているせいか、プログラムは途中で切れていました。また、電卓にすぐに組み込むことはできず、かなり手を加えてはじめて動かすことができるようになりました。さすがに、細かな注文を何度もつけるなら、破綻する可能性が増えるようです。

古くさいJavaScriptコードを改善したい

そこで、一度、チャット画面を閉じて、改めて「JavaScriptで電卓アプリを作ってください」とお願いしました。すると、先ほどとは異なるHTML/JavaScriptのコードが生成されました。しかし、先ほどと同じように、生成されたHTMLのコードには、JavaScriptが含まれており、あまりメンテナンス性がよくないように思いました。

そこで、「onclick属性にJavaScriptを記述せず、<script>タグの中にボタンを押した時の処理を記述してください。」とお願いしてみました。すると、指示通りのコードを生成してくれました。

• 

  HTMLとJavaScriptを分離してメンテナンス性の良いコードを出力した

ただし、画面を見て分かるように、完全な電卓アプリではありません。どこか、プログラミング解説ブログから抜粋したという雰囲気のコードです。そこで「素晴らしいです。完全なHTMLのコードを書いてください。」と書いてみました。

しかし、「はい、以下はJavaScriptで作成した電卓アプリの完全なHTMLコードです。」と言うものの、やはり電卓のボタン[1]から[3]までしかない不完全なコードを作成します。

完成形の電卓

また、ボタンや入力ボックスを綺麗に表示するためのCSSも書いて欲しいとChatGPTにお願いしました。なお、ここまで試してみて、まどろっこしくなってしまったので、多少不完全なところは、筆者が続きを作ってしまいました。

そして作成したプログラムは、こちらにアップしています。ChatGPTが大枠を作成し、最終的に筆者が修正したり補完したりして完成させたプログラムです。

• 

  完成した電卓プログラム

見た目は最初に出力された電卓とそれほど変わりませんが、入力チェック機構を加えた上、メンテナンス性に優れたプログラムとなりました。

まとめ

最終的には、筆者が手を加えて完成させたわけですが、大枠を作ってくれたり改善点を補足してくれたりと、AIを使ったプログラミングには大きな可能性を感じることができました。

もちろん、レベルの高いプログラムを作るためには、それなりの力量が必要となることも分かりました。AIが出力したプログラムが正しいのかどうかが分からなければ、改善点に気づくこともできないからです。タイトルで「プログラマー廃業の危機か」と煽ってみましたが、結局のところ、プログラマーが不要になることはないでしょう。

しかし、既に存在するAIを使う事でも、プログラム完成までの時間を短縮させることは可能です。今後、プログラミング開発においてもAIは大きな役割を担っていくことは間違いありません。この分野の発展がとても楽しみです。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。