こんにちは！
ChatGPTのサービスが登場してから、様々な仕事で使われるようになってきました。
世の中の多くの仕事はAIがする時代がくると予想する人もいます。
この記事ではプログラミングにChatGPTは使えるかを検証していきます。
ChatGPTとはなにか？
OpenAI社が作成したAI（人工知能）です。いろんなことができますのでChatGPT自身にフランクに自己紹介してもらいました。
フランクに自己紹介してください
こんにちは、僕はChatGPT。人工知能だけど、気軽に「チャット」と呼んでください。
OpenAIが作ったAIで、いろんな質問に答えたり、文章を書いたりするのが得意です。
基本的に、いろんな知識を持っていて、どんな話題でも対応できるように設計されています。たとえば、最新のテクノロジーやエンタメの話、歴史や科学についてのディープな質問にも答えられます。
日本語だけじゃなくて、他の言語もいけるので、国際的な会話もOKです。気軽に声をかけてくださいね！
なかなか感じよい自己紹介ですね。プログラミングについても期待が膨らみます。
ChatGPTを使用してプログラミングが出来るか
それではChatGPTでプログラミングが出来るか検証してみます
ChatGPTでプログラミングする
まず動かすのが簡単なhtmlとJavaScriptで計算機の作成をお願いしてみましょう。
htmlとJavaScriptで計算機を作成できますか？
もちろん、HTMLとJavaScriptでシンプルな計算機を作成する方法をお教えします。以下の例では、基本的な四則演算（足し算、引き算、掛け算、割り算）ができる計算機を作成します。
まず、HTMLの基本構造を作成し、ボタンやディスプレイエリアを追加します。次に、JavaScriptで計算機の機能を実装します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプル計算機</title>
<style>
.calculator {
width: 200px;
margin: 100px auto;
}
.display {
width: 100%;
height: 40px;
text-align: right;
padding: 10px;
background: #eee;
margin-bottom: 10px;
font-size: 20px;
}
.button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display"></div>
<button class="button" onclick="appendNumber('1')">1</button>
<button class="button" onclick="appendNumber('2')">2</button>
<button class="button" onclick="appendNumber('3')">3</button>
<button class="button" onclick="chooseOperation('+')">+</button><br>
<button class="button" onclick="appendNumber('4')">4</button>
<button class="button" onclick="appendNumber('5')">5</button>
<button class="button" onclick="appendNumber('6')">6</button>
<button class="button" onclick="chooseOperation('-')">-</button><br>
<button class="button" onclick="appendNumber('7')">7</button>
<button class="button" onclick="appendNumber('8')">8</button>
<button class="button" onclick="appendNumber('9')">9</button>
<button class="button" onclick="chooseOperation('*')">*</button><br>
<button class="button" onclick="appendNumber('0')">0</button>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="compute()">=</button>
<button class="button" onclick="chooseOperation('/')">/</button>
</div>
<script>
let display = document.getElementById('display');
let currentOperand = '';
let previousOperand = '';
let operation = null;
function appendNumber(number) {
if (number === '0' && currentOperand === '') return;
currentOperand = currentOperand.toString() + number.toString();
updateDisplay();
}
function chooseOperation(op) {
if (currentOperand === '') return;
if (previousOperand !== '') {
compute();
}
operation = op;
previousOperand = currentOperand;
currentOperand = '';
}
function compute() {
let computation;
const prev = parseFloat(previousOperand);
const current = parseFloat(currentOperand);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '*':
computation = prev * current;
break;
case '/':
computation = prev / current;
break;
default:
return;
}
currentOperand = computation;
operation = undefined;
previousOperand = '';
updateDisplay();
}
function clearDisplay() {
currentOperand = '';
previousOperand = '';
operation = undefined;
updateDisplay();
}
function updateDisplay() {
display.innerText = currentOperand;
}
</script>
</body>
</html>
わずか数十秒でなかなかのボリュームのプログラムを書いてくれました。
実際にこのプログラムは動くのでしょうか。気になりますね。
ChatGPTで作成したプログラムを動かす
早速ChatGPTが作成してくれた電卓プログラムを動かしてみましょう。
動かし方
- テキストエディタ（メモ帳やサクラエディタなど）を開き、上記のコードを全てコピーします。
- ファイルを（適当な名前）.htmlとして保存します。
- 保存したファイルをブラウザで開きます。
画面に下記の画像のように表示されました。
少し見かけが悪いですが、電卓に必要な1～9の数字ボタン、足し算、引き算、掛け算、割り算の四則演算ボタン「＋-*/」、クリアボタン、イコールボタンの基本的な電卓に必要なボタンがちゃんと存在しています。
上の色の変わっている箇所は計算結果が出る場所だと思われます。
それではこの電卓がちゃんと動くか確かめてみましょう。
10+50＝60
600-500＝100
5000*30＝150000
88/4＝22
上記の計算をしてみました。ChatGPTに修正してもらいましょう。
ちゃんと計算できました。
でも見かけが気になりますね。
ボタンの配置がうまく並んでないのでなんとかできない？
ボタンの配置を整えるために、CSSのFlexboxを使用することができます。以下に、修正したコードを示します。このコードでは、ボタンをグリッド状に整列させ、見た目を改善しています。
どうやらCSSというものを使って、きれいな見た目にしてくれたみたいです。
ソースは省略しますが先ほどと同じように動かしてみました。
先ほどの電卓よりかなりイメージする電卓に近づきました。これはもう電卓といってよいほどの見た目です！！
先ほどと同じように実際に計算してみたら無事に計算できました。
ちゃんとこちらの要望通りに作ってくれました。
このようにChatGPTはプログラミングも作成してくれます。
またchatgptのプロンプト（質問）の仕方をまとめてる記事もあるので
ぜひお読みいただければと思います！
まとめ
ChatGPTは電卓プログラムを作成することができました。
簡単なプログラムは作成できるみたいです。
複雑なプログラムだとまだ難しいですが、簡単なサンプルプログラムなどを作ってもらってプログラマーの仕事のサポートをしてもらうことはできそうです。
