プログラムの実装
Codex に次のようにプロンプト入力して送信する。
Codex は、外部ライブラリなし・サーバ不要で、HTML・CSS・JavaScriptをすべて1ファイルにまとめた "index.html" を生成した。
生成されたプログラムには、マウス操作で石を置ける8×8の盤面、置ける場所を薄い丸でハイライトする機能、コンピュータ対戦（CPUは角を優先し危険な場所を避けながら手を選ぶ）、パス判定、勝敗判定、リスタートボタン、ヒントボタン、スマホ対応のレスポンシブレイアウトが含まれる。ファイルをブラウザで直接開くだけで動作し、サーバは不要だ。Codex はコード生成後にHTML内JavaScriptの構文チェックも自動で実行する。
Codex は、外部ライブラリなし・サーバ不要で、HTML・CSS・JavaScriptをすべて1ファイルにまとめた "index.html" を生成した。
生成されたプログラムには、マウス操作で石を置ける8×8の盤面、置ける場所を薄い丸でハイライトする機能、コンピュータ対戦（CPUは角を優先し危険な場所を避けながら手を選ぶ）、パス判定、勝敗判定、リスタートボタン、ヒントボタン、スマホ対応のレスポンシブレイアウトが含まれる。ファイルをブラウザで直接開くだけで動作し、サーバは不要だ。Codex はコード生成後にHTML内JavaScriptの構文チェックも自動で実行する。
プロンプト
JavaScriptで画面上でコンピュータと対戦するオセロゲームを作る。
先攻・後攻のサイコロ機能
次に、ゲーム開始前に先攻・後攻をランダムに決める仕組みを追加する。プロンプトに次のように入力して送信する。
プロンプト
ゲーム開始時に、サイコロを振って先攻・後攻を決める仕組みを追加する。
Codex は既存の "index.html" を読み込んで状態管理の構造を把握してから変更を加える。
ゲーム開始前の画面に「サイコロを振る」ボタンが追加され、ユーザーとコンピュータがそれぞれサイコロを振り、大きい目を出した側が先攻（黒）になる仕組みだ。同じ目が出た場合は振り直しとなる。ユーザーが後攻になった場合はコンピュータが黒として最初に石を置いてからユーザーの入力を待つ。開始後はサイコロボタンが無効化され、「最初から」ボタンで再度サイコロから始められる。スコア表示や盤面の担当色も、その時の決定結果に合わせて動的に切り替わる。コード変更後は構文チェックが自動で実行され、問題がないことが確認される。
ゲーム開始前の画面に「サイコロを振る」ボタンが追加され、ユーザーとコンピュータがそれぞれサイコロを振り、大きい目を出した側が先攻（黒）になる仕組みだ。同じ目が出た場合は振り直しとなる。ユーザーが後攻になった場合はコンピュータが黒として最初に石を置いてからユーザーの入力を待つ。開始後はサイコロボタンが無効化され、「最初から」ボタンで再度サイコロから始められる。スコア表示や盤面の担当色も、その時の決定結果に合わせて動的に切り替わる。コード変更後は構文チェックが自動で実行され、問題がないことが確認される。
"index.html" をスマホにコピーすると、左図のような画面になるが、問題なく動作する。
縦長の画面では情報パネルが上部、盤面が下部に配置されるレスポンシブレイアウトになっており、タッチ操作で石を置くことができる。
縦長の画面では情報パネルが上部、盤面が下部に配置されるレスポンシブレイアウトになっており、タッチ操作で石を置くことができる。
完成したプログラムは Git でバージョン管理する。次のようにプロンプト入力するだけで、Codex がステージングとコミットを自動で実行する。
プロンプト
Gitに保存する。
1行プロンプトの限界
本項で見てきたように、Codex に、わずか1行のプロンプトを入力することで、動くプログラムを作成できる。
だが、このプログラムの安全性は考慮されていない。テストもしていない。
つまり、この段階では、ただ動くと言うだけで、他人に渡していいプログラムになっていないことに留意してほしい。
第2章では、安全なプログラムを作るためのプロンプトの書き方を学ぶ。
だが、このプログラムの安全性は考慮されていない。テストもしていない。
つまり、この段階では、ただ動くと言うだけで、他人に渡していいプログラムになっていないことに留意してほしい。
第2章では、安全なプログラムを作るためのプロンプトの書き方を学ぶ。
参考サイト
- Codex：OpenAI
- Git：Git公式サイト
- JavaScriptによるプログラミング入門：ぱふぅ家のホームページ
（この項おわり）
プロンプトで「コンピュータと対戦するオセロを作る」と一行指示するだけで、Codex が、1ファイル完結のプログラムを自動生成する。次に、ゲーム開始前にサイコロを振って先攻・後攻をランダムに決める機能を追加する。最後に、変更内容を Git でバージョン管理として記録する。すべての操作は日本語の指示だけで完結し、コードを書く必要は一切ない。