人生ゲーム風ルーレット

言わずとしれた国民的ボードゲームのルーレットです。クリックするとルーレットが回転し、止まったときに▼が示すところが出た目です。

生成AIをもちいた制作

なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。

現実に存在しているものをプログラムで再現するだけなので、すぐに納得できるものができるだろうと考えて着手しました。有名なプロダクトでもあり、すでに先達がプログラムした例がたくさんあるだろうと推測していたのもあります。

予想を裏切って、結構時間がかかりました。

ちなみに、書いたプロンプトは以下のような感じです。

1回目

JavaScriptで人生ゲームで使うようなルーレットを作ってください。

2回目

提示されたコードでは見た目、動きが不十分でした。修正してください。また、下記を追加してください。
・1～10までの数字が選択できるルーレットとしてください。
・ルーレットの中心方向が数字の上部、ルーレットの外周方向が数字の下部として表示してください。

3回目

以下のコードをベースに改良してください。
・矢印を▼としてください。
・数字の位置がズレているので、扇型の中心に数字が表示されるようにしてください。
・コードの短縮をこころみてください。

～コード省略～

4回目

以下を改良してください。
・表示されている数字と、ルーレットが止まったときに表示される出た目の数字が一致していません。一致させてください。
・１～2が表示されていません。3が切れています。適切に表示してください。
・色の区分けの線上に数字が表示されます。色の真ん中に表示してください。
・数字を時計回りに90度回転させて表示してください。

5回目

以下のコードをベースに改良してください。
・表示された数字と、止まったときに表示される出た目を一致させてください。
・表示される数字を、時計回りに90度回して表示させてください。言い換えると、円周中心方向が数字の下方向になるように表示させてください。

～コード省略～

6回目

ルーレットの数字と、止まったときに表示される出た目の数字が一致しません。一致させてください。

7回目

「出た目」の表示は不要です。関係箇所を、他に影響がないように削除してください。

当初AIから提案されたコードには、「出た目」の表示がありました。しかし、出た目の表示が、ルーレットの表示と合わず、なんども修正を試みました。AIが提示したコードでは、ルーレットを回すロジックと出た目を表示するロジックが全く別の計算担っていました。

おそらくこのロジックを、数字のセクション（オブジェクト）と矢印（オブジェクト）が重なったことを検知するロジックに変えたらうまくいきそうでした。

しかし、「出た目」そのものが不要だと考え直しました。なぜなら、ルーレットの出た目は一目瞭然だからです。

具体的なできあがりがサッと出てくるがゆえに、一息ついて考えないと無駄なことをしてしまうなあと思いました。また、AIが提示するロジックが最適解とは限らない、というのも実感しました。

人間がコードは書けなくても、ロジックは考えてあげないと、より優れたプロダクトは生まれないのかと思います。