🤖

GPT-5を使ってオセロアプリを10分でデプロイした話

に公開

GPT-5でオセロアプリを作ってデプロイした話

先週、満を持してOpenAIの最新モデルGPT-5が発表されました。
コーディング能力が高そうということで、
試しにブラウザで作れるオセロアプリを作ってみようと思いました。

完成品はこれ→ https://otsukimi-tanuki.github.io/othello-ai/

オセロアプリにした理由は、
先日100日かけて大学生が生成AIで100個アプリを作った話の本を読んだのですが
その中で最初に作ったアプリがオセロだったからです。
今だとどれぐらい簡単にできるかわかると技術の進歩がわかりやすいのかな、と思いました。

機能について

漠然とこんなものを作りたい、と考えていた内容は下記の通り。

盤面描画:8×8のマス目
初期配置:中央4マスに黒白を配置
手番管理:プレイヤーは黒、AIは白
ルール処理:石の反転、置ける手がないときはパス
終了判定:全マスが埋まる or 両者が打てないとき
スコア表示
AI思考:取れる石の枚数が最大になる手を選ぶ
その他:ブラウザで遊べる

雑なプロンプトでも形になる(!)

考えていたものは上に書いたようにぼんやりとありましたが、GPT-5がどれぐらい気を利かせてくれるのかにも興味があったので雑に質問していく。

GPT-5の実力まずこんな指示をしてみます。

おお。質問されたぞ。
素直に答えてみます。

他にも2回質問されました。

これだけで簡単にindex.html, style.css, script.jsが作成されました。
index.htmlで動作を確認しながらプロンプトを加えれば自分好みに調整できるはずです。

Githubで簡単に公開ができる

この記事のように作ったウェブアプリを簡易的に共有したいというケースはよくあると思いますが、
今回はGithubの機能である「Github Pages」を使って簡単にURL付で公開することができました。

GitHub Pages(無料&URLで公開)の手順

(1) GitHubで新しいリポジトリを作成する
(2) 公開したいファイルをアップロード
… 私のオセロアプリは、index.html, style.css, script.jsの3ファイルをアップしました。

Gitが苦手という人も多いと思いますが(私も得意ではありません)、
GithubDesktopを使ってみたら直感的な操作がしやすかったです。

(3)GitHubのリポジトリ設定を開く

(4)Pages を有効化しブランチを main/root に設定する

ここまでやると数分後には

"https://ユーザー名.github.io/リポジトリ名/"

でアクセスできるようになります!

所要時間や感想など

ここまでの所要時間は応答にかかる時間も含めて10~15分程度。
コードどころかVisual Studioも触らずこんな簡単にアプリをデプロイできるようになったんだな、
と進歩を実感せざるを得ませんでした。

これはGPT-5が公開された当日の朝に作ったのですが、
それと同じぐらいのタイミングに #keep4o などのハッシュタグが生まれて
GPT-5の返答が共感性が低い、といった非難やメモリにバグがあるのでは?という指摘が
SNSにあふれたりもしましたが、それはまた機会があれば記事にしてみようと思います。

お読みいただきありがとうございました。

Discussion