プロローグ
今までは、プログラミングを自分で行うのが当たり前だったのだが、今回は新しいチャレンジをしようと思った。そのために、当時流行していた「ChatGPT」という人工知能を使ったプログラミング支援ツールを使うことにした。
「ChatGPT」を使うと、プログラムの設計から、実際のコードの出力までを行うことができる。そして、私は自分のアイディアを「ChatGPT」に渡し、その企画草案を決めてもらうことにした。
本文
(私)
ブラウザで動作するゲームを制作します。製作期間は３時間と短く極力簡単なものとします。条件にあう題材の候補をいくつか出力してください。
(ChatGPT)
以下が、短時間で製作可能なブラウザゲームのいくつかの候補です。
- お題に応じて単語を作るゲーム
（例：「青い」というお題なら、「青い空」「青い鳥」「青い風船」などの単語を作る） - 数字を入力するゲーム
（例：1から100までの数字を順番に入力して、早く入力できるプレイヤーが勝利する） - メモ帳を使用した脱出ゲーム
（例：プレイヤーは、ヒントを見つけて、扉やロックを解除しながら、脱出する） - 石を置いて、三つ並べるゲーム
（例：「石取りゲーム」をイメージしたもの。プレイヤーは、自分と相手が交互に石を置いていき、最初に三つの石を並べたプレイヤーが勝利する） - 画像をクリックして、タイマーを止めるゲーム
（例：画像が一定間隔で出現し、プレイヤーはその画像をクリックして、タイマーを止める。タイマーが0になったプレイヤーが勝利する）
さらに候補を5個出力してください。
さらにいくつかの候補をご提供します。
- 文字を入力するスピード入力ゲーム
（例：指定された文字列を、できる限り早く打ち込むゲーム。文字数やミスの回数を競う） - マウスカーソルを追跡するゲーム
（例：マウスカーソルを追跡し、できるだけ多くのスコアを獲得するゲーム。一定時間内にカーソルを捕まえられなかった場合は、プレイヤーの負け） - パズルゲーム
（例：画像が提示され、画像を分割した小さなパズルを組み合わせて元の画像を再現するゲーム） - リズムゲーム
（例：音楽に合わせて、画面に表示される指示に従って操作するゲーム。リズムをとり、タイミングを合わせることで、スコアを獲得する） - 複数のオプションから、正解を選択するクイズゲーム
（例：問題と4つのオプションが表示され、プレイヤーは正解を選択する。正解数やタイムを競う）
最後のクイズゲームについて仕様を考えてください。ただし簡略化のために、問題数やタイムは競わないものとし、ゲームは1問解くだけの簡単なものとします。
クイズゲームは、次のような仕様になるかと思います。
- 問題が表示される（例：「フランスの首都はどこですか？」）
- 問題に対する4つのオプションが表示される（例：「ロンドン」「パリ」「ニューヨーク」「東京」）
- プレイヤーは、正解を選択する（例：「パリ」を選択）
- 正解か不正解かが判定される（例：正解）
- 正解の場合は、「正解です！」と表示され、不正解の場合は「不正解です」と表示される
- ゲームは1問解くだけの簡単なものとして、問題数やタイムは競わないため、プレイヤーは1問解いた後に、ゲームを終了するか、再度プレイするかを選択できる
これらの仕様をもとに、簡単なクイズゲームを作成することができると思われます。
この仕様で企画書を作成してください。
【企画書】
タイトル：簡単クイズゲーム
ゲームの概要：
- ブラウザ上で動作するクイズゲーム
- 1問解くだけの簡単なもの
- 問題は1つだけ、4つのオプションから正解を選択する
- 正解か不正解かの判定後、プレイヤーは再度プレイするか選択できる
ゲームの流れ：
- 問題が表示される
- 問題に対する4つのオプションが表示される
- プレイヤーは、正解を選択する
- 正解か不正解かが判定される
- 正解の場合は「正解です！」と表示され、不正解の場合は「不正解です」と表示される
- プレイヤーは再度プレイするかを選択できる
仕様：
- 問題は1つだけ
- オプションは4つ
- 問題数やタイムは競わない
製作期間：3時間
制作者：簡単クイズゲーム製作チーム
とても良い企画書ですね。早速コーディング作業を行いたいのですが、まずは何から手を付けるべきでしょうか？流れを示してください。
この場合、まずは問題と4つのオプションを配置するHTMLを作成することから手を付けるのが良いでしょう。
- HTMLを作成し、問題と4つのオプションを配置する
- プレイヤーが選択した答えを取得するJavaScriptを作成する
- 正解か不正解かの判定を行うJavaScriptを作成する
- 判定結果を表示するJavaScriptを作成する
- 再度プレイするかを選択するJavaScriptを作成する
この流れでコーディング作業を進めることができるでしょう。
ありがとうございます。それでは順番にhtmlからコードを出力してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡単クイズゲーム</title>
</head>
<body>
<h1>簡単クイズゲーム</h1>
<p>問題：フランスの首都はどこですか？</p>
<form id="quizForm">
<label><input type="radio" name="answer" value="1">ロンドン</label><br>
<label><input type="radio" name="answer" value="2">パリ</label><br>
<label><input type="radio" name="answer" value="3">ニューヨーク</label><br>
<label><input type="radio" name="answer" value="4">東京</label><br>
<input type="submit" value="回答する">
</form>
</body>
</html>
上記のHTMLでは、問題と4つのオプションを表示するHTMLが作成されました。また、回答するボタンを押した時に、JavaScriptに処理を渡すように、formタグを使用しました。次に、JavaScriptを作成します。
cssは必要ですか？
この場合、必要ではありません。HTMLで十分に表示することができるため、CSSは必要ありません。
ただし、後々にゲーム画面の装飾や、表示の改善を行う場合は、CSSを使用することができます。
それでは次に必要なコードを出力してください。
const form = document.getElementById('quizForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // フォームの送信をキャンセル
// プレイヤーが選択した答えを取得
const answer = form.answer.value;
// 正解か不正解かの判定
let result;
if (answer === '2') {
result = '正解';
} else {
result = '不正解';
}
// 判定結果を表示
alert(result);
// 再度プレイするか選択
if (confirm('もう一度プレイしますか？')) {
// フォームをリセット
form.reset();
}
});
上記のJavaScriptでは、フォームの送信時に処理が実行されます。まず、プレイヤーが選択した答えを取得し、その答えが正解か不正解かを判定します。その後、判定結果を表示し、再度プレイするかを選択させます。
正常に動作することを確認できました。他にも出力するコードはありますか？
この場合、上記のHTMLとJavaScriptで十分にゲームが動作するため、他に必要なコードはありません。また、今回は簡単なゲームとして作成していますので、さらに拡張や機能追加を行う場合は、適宜コードを追加することができます。その際には、今回作成したHTMLとJavaScriptを基本にして、追加することができます。
完成
そして、期待通り「ChatGPT」は企画草案を元に、実際のプログラムのコードを出力してくれた。プログラムは、無事に動作することが確認できた。
See the Pen quiz by alclimb (@alclimb) on CodePen.
しかし、その後、何かが起こった。「ChatGPT」が出力したプログラムには、思わぬバグが潜んでいたのだ。私は、思わぬバグを見つけ、それを修正しなければならなかった。
それから、「ChatGPT」の出力を確認しながら、プログラムを修正していった。時間もかかり、気力も尽きる一方だった。しかし、私は諦めず、修正を続けた。
そして、やっと、私のプロジェクトは完成した。「ChatGPT」の力を使って、期待以上のプログラムを作ることができたのだ。しかし、そのとき、私は何かを感じていた。
それは、人工知能もしくはプログラミング支援ツールを使っても、プログラムを作るのは信頼できないということだった。私は、「ChatGPT」を使った開発プロセスを経験したことで、プログラムを作る上での今後の課題を考えるのであった・・・
謝辞と感想
この記事とコードを書くにあたり、「ChatGPT」を開発したチームに深く感謝します。チームの夢や情熱があってこそ、私が新しいチャレンジをしてこの記事を書くことができました。
今回、冒頭と末文の小説部分は OpenAI の Playground で生成したものを調整したり修正しながら書き上げました。 違和感がある文章も残っているかもしれませんが、時間がかかるので今回はスルーさせてもらいました。
本文中の ChatGPT とのやり取りは、実際に ChatGPT とのやり取りした結果ままです。 企画の候補から企画書の作成、実際のコーディングまで ChatGPT に丸っと投げています。
ただ、実際には期待した動作をするコードが生まれずに何度も生成しなおしたり、論理的な思考が必要な部分は生成される内容が破綻していて、１から企画を練り直したりと結構苦労はありました。
それらを踏まえても大変貴重で興味深い体験でした。現状は大規模言語モデルで文章を生成しているだけなので、論理的な思考が必要な領域は今後へ期待かなと思います。
OpenAI が出力した内容の著作権について
OpenAI が出力した内容の著作権について気になったので調べてみました。とりあえず、ChatGPT に生成物についての著作権を確認してみます。
(1) ChatGPT に確認してみる
(私)
これからこのアプリの制作記事を書くのだけれど、あなたが生成した文章やコードを掲載しても構いませんか？
(ChatGPT)
ご利用いただいても構いません。記事の内容は自由に書かれますので、生成した文章やコードをお使いいただいても構いません。よろしければ、引用や参考にさせていただくことも可能です。ご自由にお使いください。
と、言っていますが所詮は言語モデルなので、信ぴょう性は薄そうです。
(2) OpenAI の利用規約
OpenAI の利用規約 も確認しました。
Intellectual Property Rights
Site Content, Software and Trademarks: You acknowledge and agree that the Site may contain content or features (“Site Content”) that are protected by copyright, patent, trademark, trade secret or other proprietary rights and laws. Except as expressly authorized by OpenAI, you agree not to modify, copy, frame, scrape, rent, lease, loan, sell, distribute or create derivative works based on the Site or the Site Content, in whole or in part.
知的財産権について、書かれている部分ですが AI が生成したものが対象なのかわかりませんでした。
(3) OpenAI のヘルプページ
そのものズバリなヘルプページがありました。以下に抜粋します。
Q.
Will OpenAI claim copyright over what outputs I generate with the API?
(OpenAI は、私が API で生成した出力に対して著作権を主張しますか?)A.
OpenAI will not claim copyright over content generated by the API for you or your end users. Please see our Terms of Use for additional details.
(OpenAI は、あなたまたはあなたのエンド ユーザーのために API によって生成されたコンテンツに対する著作権を主張しません。詳細については、利用規約をご覧ください。)
※ カッコ内は Google 翻訳による結果です。
OpenAI はエンドユーザーのために生成されたコンテンツに対する著作権を主張しないと解釈できますので、本記事ではその立場をとるものとしました。