今年も各地で花火大会が開催されました。家族や友人で見に行って夏の良い思い出になった方もいる一方、忙しくて見に行けなかったという方もいることでしょう。そこで、今回は、バイブコーディングで花火を打ち上げる環境プログラムを作成してみましょう。

  • バイブコーディングで花火を打ち上げよう(左がGPT-5/右がClaude Sonnet 4

    バイブコーディングで花火を打ち上げよう(左がGPT-5/右がClaude Sonnet 4

バイブコーディングで花火を打ち上げよう

今回は、OpenAIの最新モデルGPT-5と、プログラミング能力が高いと話題のClaude Sonnet 4の両方で作成して、花火打ち上げ対決をしてみましょう。

まずは、何も考えず、ブラウザ版のChatGPT(最新モデルGPT-5搭載)を利用して花火の打ち上げプログラムを作ってみましょう。最初に下記のようなプロンプト（指示文）を与えてみました。

画面一杯に巨大な花火を打ち上げるツールを作成します。
HTML/JavaScriptのプログラムを作成してください。
連続で華やかでブラウザを彩る美しい花火を描画してください。
定期的に連続で同時に打ち上げてください。

すると、40秒の思考の後、花火を打ち上げるプログラムを作ってくれました。作成されたHTML/JavaScriptのコードを、エディタに貼り付け「v1.html」という名前で保存して、ブラウザにドラッグ＆ドロップしました。すると、次のような花火を打ち上げるプログラムが動きました。簡単な指示しか出してないのに、なかなか良い感じです。

  • GPT-5を利用して作った花火の打ち上げプログラムを実行したところ

    GPT-5を利用して作った花火の打ち上げプログラムを実行したところ

実際のソースコードをこちらにアップロードしています。

なお、生成AIの特徴でもあるのですが、同じプロンプトを与えても、異なるプログラムが生成されます。

追加の指示を与えよう

ただし、ちょっと鮮やかさが足りないと思いましたので、次のような指示を追加で与えました。

いろいろな色の火薬を入れて、空中で華やかに開くようにしてください。
そして、もう少し、パーティクルを大きくしつつ、ぼかして綺麗にしてください。

すると、1分の思考の後、『色とりどりの薬玉（パレット）を混ぜ、芯→中殻→外殻の多層構造で開くようにコードを更新しました。飛翔中に色相が変化し、時々クロセット（途中分裂）や白金の芯火花も入ります。』という解説と共にプログラムを生成してくれました。

これをエディタに貼り付け、「v3.html」という名前でファイルに保存して、ブラウザにドラッグ＆ドロップしました。しかし、作成されたプログラムが正しく動かなかったので、ブラウザのメニューから「その他のツール > デベロッパーツール」のコンソールを開いて、JavaScriptのエラーメッセージを調べました。以下のようなエラーでした。

> Uncaught TypeError: Cannot read properties of undefined (reading 'length') at Rocket.draw (v3.html:126:37) at loop (v3.html:337:61)

このメッセージをそのまま、ChatGPTのチャットに貼り付けて送信すると、エラーを認識して、プログラムを修正してくれました。このような手順で完成したのが、次のプログラムです。だいぶ良い感じになりました。

  • 追加の指示で華やかさが増した花火の打ち上げプログラム

    追加の指示で華やかさが増した花火の打ち上げプログラム

生成されたプログラムは、こちらにアップしました。

Claude Sonnet 4を使ってみよう

続いて、ChatGPTではなく、Claudeを使ってみましょう。Claudeは、2021年創業のAnthropic社によって開発された対話型AIです。Sonnet 4は、Claudeの第四世代モデルで、じっくり思考するモードを持ち、最大100万トークンのコンテキストに対応しているのが特徴です。

今回は、コーディング用エディタのVisual Studio CodeにGitHub Copilotの拡張をインストールし、モデル「Claude Sonnet 4」を指定した上で、GPT-5に与えたのと同じプロンプトを与えてプログラムを作ってもらいました。

しかし、残念ながら、最初は、縦横無尽に斜めに花火が発射されるものが作成されてしまいました。これだとまったく花火に見えませんでした。

そこで、追加で下記のようなプロンプトを与えて、プログラムを作ってもらいました。

画面一杯に巨大な花火を打ち上げるツールを作成します。
HTML/JavaScriptのプログラムを作成してください。
連続で華やかでブラウザを彩る美しい花火を描画してください。
定期的に連続で同時に打ち上げてください。

なお、画面下部から真っ直ぐ上に花火を打ち上げてください。
色とりどりの薬玉（パレット）を混ぜ、芯→中殻→外殻の多層構造で開くようにしてください。

このように、曖昧な指示を与えるのではなく、どのように描画したら良いかを与えることで、より具体的なプログラムが生成できます。

  • Claude Sonnet 4で作成した打ち上げ花火のプログラム

    Claude Sonnet 4で作成した打ち上げ花火のプログラム

作成したプログラムは、こちらにアップしました。

まとめ - 性能はどちらが上か？！

今回は、OpenAIの最新AIモデルのGPT-5と、Claude Sonnet 4の二つの生成AIを利用して、花火を打ち上げるプログラムを作ってみました。個人的には、GPT-5の作った花火の方がリアルだったので好みだったのですが、Claude Sonnet 4も悪くありませんでした。引き分けです。皆さんは、どちらが好みでしょうか。簡単なプロンプトで生成できるので、ぜひ試してみてください。

なお、本連載の姉妹連載(こちら)では、2023年にも、ChatGPTを活用して打ち上げ花火を描画するプログラムを作成していました。

その当時は、あまり長いプログラムを作ることができなかったので、一部分をAIに作ってもらうという形にしました。たった2年で、プログラムの生成能力は大幅に向上し、簡単な指示でも、かなり長いプログラムを生成できるようになりました。そして、今後の発展も期待できるので楽しみです。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。