最近話題のChatGPT、みなさん使っていますか？ChatGPTは検索や、作文以外に、プログラムを書くこともできるよ、というニュースをよく見ます。難しいプログラミングの勉強をしなくても、やりたいことを日本語で書くだけで正しいコードが書けてしまうというのはすごいですよね。
ただ、ChatGPTがやってくれることは、プログラムのコードを書いてくれるだけです。プログラミング未経験者は、そのコードをどうすればいいの？ と悩んでしまう人もいると思います。私自身も、プログラミングはちょっとかじった程度で、全然詳しくないのでそんな人向けに、ChatGPTが書いてくれたコードを具体的にどうすればいいのか、という部分について書きます。
使う言語は、HTML
まずは、ブラウザに、『こんにちわ』と表示させてみましょう。
(『こんにちは』じゃなくてスミマセン)
ChatGPTに、
『ブラウザに、『こんにちわ』と表示するプログラムを、HTMLで書いて』
とお願いします。HTML以外で書かれると、ハードルが上がってしまうので、念のためにHTMLで書いてもらいます。
すると、ChatGPTは次のようなコードを書いてくれました。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hello World</title>
</head>
<body>
<h1>こんにちわ</h1>
</body>
</html>
さらに、このコードをどうすればいいのかについても説明してくれています。
ChatGPT『このコードを、テキストエディタなどのプログラムを書くためのアプリケーションで開いて、ファイルとして保存します。ファイル名は「index.html」にして、保存場所は好きな場所に選んでください。その後、ブラウザを開き、ファイルを開くか、ファイルをドラッグ＆ドロップすることで、このHTMLファイルをブラウザで開くことができます。すると、ブラウザに「こんにちわ」と表示されます。』
ここまでの動画
コードをメモ帳にコピペする
ただ、本当の未経験者だと、この説明だけではよくわからないと思うので、もう少し詳しく説明します。まずは、Windows 標準の「メモ帳」を開いてください。そして、先程のコードをコピペします。
そして、次がポイントなのですが、ファイル名を、『index.html』にして、保存します。ピリオド(.)の左は何でもいいのですが、右は『html』にしてください。仮に保存先をデスクトップにしている場合、デスクトップ上に見慣れたブラウザのアイコンがひとつできてると思います。
次に、このアイコンをダブルクリック、あるいはブラウザに、ドラッグ＆ドロップしてみてください。すると、ブラウザ上に、無事、『こんにちわ』と表示されました！このように、htmlで書かれたコードは、プログラム未経験者でも簡単に実行できます。
ここまでの動画
大リーグでおなじみのピッチクロックを作ってみる
ピッチクロックとは？
次に、今日の本題である、ピッチクロックを作ってみます。大谷選手、鈴木誠也選手ほか、大リーグの試合を見ている人は、今年から導入されたピッチクロックを知ってると思いますが、大リーグを見ていない人向けに、ピッチクロックについて説明します。
ピッチクロックは、メジャーリーグの試合短縮のために今年から導入された、タイマーのようなものです。今年からピッチャーは、ランナーがいないときは、15秒以内、ランナーがいるときは、20秒以内に次のボールを投げなければいけない、というルールになりました。ピッチクロックはそれを測るためのタイマーのようなものです。
ピッチクロックの機能
今回は、ランナーがいないときの、15秒用のピッチクロック(タイマー)を作ります。
機能は次の通り、
ボタンがひとつ
ボタン上に15と表示
ボタンを押すと、15からカウントダウンを開始
再び押すと、タイマーが止まり、表示は再び15に
以下、繰り返し
こんな感じです。これで、ピッチャーがキャッチャーからボールを受け取ったときに、ボタンを押して、ピッチクロックスタート。ピッチャーが投球モーションに入ったところで再度ボタンを押して、ピッチクロックストップ、表示は15に。そして、次の球へ、といった具合に動作するピッチクロックができるはずです。
ChatGPTへ
ここで、ChatGPTに次のようにお願いしました。
ーーー
次の条件のプログラムをHTMLで書いて
ボタンが一つ
ボタンに、15と表示
ボタンを押すと、15から0まで、1秒間隔でカウントダウンする。
再びボタンを押すと、カウントダウンが停止し、表示が15に戻る
もう一度ボタンを押すと、ふたたび0までカウントダウン開始。
以下、同じことの繰り返し
ーーー
なお、改行で、普通にEnterを押すと、その場でChatGPTが動いてしまうので、改行は、Shift+Enterにします。
最初のコード(pitchclock.html)
次が、ChatGPTの書いたコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>カウントダウン</title>
<script>
var timerId;
var count = 15;
var countingDown = false;
function countDown() {
countingDown = true;
document.getElementById(“countdownButton”).innerHTML = count.toString();
count–;
if (count < 0) {
clearInterval(timerId);
document.getElementById(“countdownButton”).innerHTML = “15”;
countingDown = false;
}
}
function toggleCountDown() {
if (!countingDown) {
timerId = setInterval(countDown, 1000);
} else {
clearInterval(timerId);
document.getElementById(“countdownButton”).innerHTML = “15”;
countingDown = false;
count = 15;
}
}
</script>
</head>
<body>
<button id=”countdownButton” onclick=”toggleCountDown()”>15</button>
</body>
</html>
かなり長いですね。これを初心者が自力で書こうと思うと相当時間が必要だと思います。中身は私もちんぷんかんぷんです。これを自動で書いてくれるのはやはりすごいですね！
では、これも先程と同じ手順で、「メモ帳」にコピペして、ここでは、「pitchclock.html」として保存します。そして新しくできたアイコンをダブルクリックしてみてください。
ここまでの動画
文字を大きくする(pitchclock2.html)
動作としては、一応成功しましたが、あまりにも文字が小さかったです。そこで、次のように、ダメだしします。
『ボタン、及び、文字の大きさを5倍にして』
すると、すぐにプログラムを書き直してくれます。
同じ手順で、「pitchclock2.html」として実行します。無事、文字が大きくなりました！
動画
0(ゼロ)まで表示させる (pitchclock3.html)
ただ、このピッチクロック、0(ゼロ)までいかずに、15に戻ってしまいます。つぎはこれを直しましょう。
『1までしか表示されないので、0まで表示されるようにして』
こうして、生成されたコードを、「pitchclock3.html」として、実行します。今度は残念ながら結果は同じで修正されませんでした。
動画
もう一度修正 (pitchclock4.html)
しつこく、もう一度修正です。
『まだ、1までしか表示されない』
今度は、「pitchclock4.html」にして、実行します。無事、0(ゼロ)まで表示されるようになりました！ とりあえず、これでオッケーにしましょう👍
動画
まとめ
今回はここまでです。ChatGPTを使えば、プログラム未経験の人でもこんな感じで簡単なプログラムなら書けてしまいます。ChatGPTはコードの説明もきちんとしてくれているので、コードの勉強もできてしまいます！ 作りたいプログラムによっては、何回修正してもうまくいかないこともありますが、みなさんも何か作ってみてください！
注意）なお、ChatGPTは同じ質問をしても毎回答えが違うので、このブログのようなやり取りにならないこともあります。
コメント