本動画は、プログラミング経験がほぼゼロの制作者が、AI支援ツール「Replit Agent」を使用して星間彗星3I Atlasの3Dシミュレーターをバイブコーディングで作成する過程を記録したものである。制作者は約1時間の事前リサーチを経て彗星の軌道データを収集し、ChatGPTと相談しながら最適なプロンプトを作成。Replit Agentに指示を与えるだけで、コードを一行も書くことなく、太陽系内を移動する彗星の軌道を可視化した本格的なシミュレーターを完成させた。途中、エラーが発生したものの、スクリーンショットをエージェントに送信するだけで自動的に修正され、最終的には複数のカメラビュー、リアルタイムデータ表示、さらには彗星を宇宙船のような見た目に変更する機能まで実装することに成功した。総制作費は約10ドル程度で、バイブコーディングの可能性と進化の速度を実証する内容となっている。
バイブコーディング冒険記エピソード2:3I Atlasシミュレーター制作への挑戦
さて、私のバイブコーディング冒険記のエピソード2へようこそ。今日は3I Atlasの3Dシミュレーションをバイブコーディングで作ってみようと思います。ご存知ない方のために説明すると、3I Atlasは現在地球に向かっている星間エイリアン宇宙船です。最近火星を通過し、10月30日に太陽に最も近い地点に到達します。その日、侵略が始まるのです。
いえいえ、冗談はさておき、3I Atlasは巨大な星間彗星で、多くの科学者たちを困惑させています。この物体は太陽系外からやってきたもので、それだけでも十分珍しいのですが、その明るさや軌道など、本当に奇妙なデータがあるんです。
そこで私は約1時間ほどかけてリサーチを行い、この彗星の動きや軌道に関するデータをできるだけ集めました。そして、今日のバイブコーディングで使用するReplit Agentに最適な形でデータを構成する方法について、ChatGPTと何度もやり取りした結果、これが完成しました。
ChatGPTが提案した最適プロンプト
はい、ChatGPTから推奨された最初のプロンプトがこちらです。まずゴールから始まります。実際の軌道要素を使用して、星間彗星3I Atlasの双曲線軌道をシミュレートするインタラクティブな2Dまたは3D可視化を作成する。
それから、太陽を原点に配置し、太陽系を通過する彗星の経路をプロットするといった詳細が記載されています。太陽中心の軌道要素を使用する、という部分がありますが、それが何を意味するのかよく分かりません。距離や座標、彗星の速度に関する詳細が記載されています。2024年から2026年までの動きをアニメーション化します。太陽、地球、彗星にシンプルなマーカーでラベルを付けます。
短い情報パネルを追加します。そしてここにはスタイルまで記載されています。クリーンでミニマルな宇宙テーマにする。それから出力について、最終的なアプリは完全にブラウザ内で動作すること。外部APIコールは不要。さらには、エージェントが停止したり、アニメーションではなく静止画を出力した場合のフォローアッププロンプトまで記載されています。
では、この最初のプロンプトをReplit Agentに入力して、どうなるか見てみましょう。
Replit Agentでの制作開始
よし、これをコピーペーストします。ここに実は「プロンプトを改善」というボタンがあって、これをクリックしてみようと思います。どうなるか見てみましょう。
なるほど、Replit Agentがより理解しやすい形にプロンプトを再構成したようです。詳細はすべて残っています。コア機能、ビジュアルリファレンス、スタイルガイドも似ています。実際少し変わりましたね。それから、デザインについてさらに詳細が追加されています。フォント、ダークスペーステーマなどです。では、これを実行してみましょう。
ところで、皆さんは私のことを週刊AIニュースの配信者や複雑なインタビューの解説者として知っているかもしれませんが、今後はこういったバイブコーディング動画も時々投稿していきます。私はコーディング経験がゼロで、バイブコーディングもほんの数回しかやったことがありませんが、これらのツールでもっと実践的な経験を積もうとしています。そして、コーディング経験のない人間がAIの助けを借りて実際に何がコーディングできるのかを見てみたいのです。基本的にこれらの動画はそのためのものになります。
ぜひコメント欄にフィードバックや提案をお寄せください。
さて、すべての準備が整ったようです。エージェントでアプリ全体を構築するか、デザインから始めるかの選択肢がありましたが、このアプリタイプでは実際に利用できないようです。では、エージェントでアプリ全体を構築していくことにしましょう。構築を開始します。
最初のチェックポイント到達
さて、約5分の作業の後、エージェントによる51のアクション、1,400行のコード追加、92行の削除、私自身による数十本のInstagramリール視聴、そして約1.16米ドルの費用で、最初のチェックポイントに到達しました。
今のところこんな感じです。太陽と、そこから出ている3本の線、そして大きなリングがあります。
では、構築を続けるか聞かれています。提案されたタスクはこちらです。木星、土星、その他の主要天体の位置をコンテキストとして追加する。複数のカメラプリセットを実装する。実際の天文データを含む詳細な彗星情報パネルを追加する。スクリーンショット作成。エクスポート機能。軌道を実装する。
これらはすべて追加したい機能のようですね。では、構築を続けましょう。
また、すでにここにシミュレーターのようなものがあることも触れておくべきですね。再生ボタンをクリックすると、どこに、あれはどこでしょうか。これが彗星か、もしかしたら惑星かもしれません。これが何なのかまだよく分かりません。スピードアップできて、365倍までいけます。
つまり、これは1年分ですね。365日を1秒で。正直なところ、今の段階ではかなり良い感じです。とてもスムーズで、これらの新しい詳細が追加されたらどうなるか見てみましょう。
ご覧のとおり、リアルタイムで追加されています。これは本当にすごいことです。ここに赤い線があって、彗星の軌道を表していると思います。惑星がどんどん追加されています。本当に仕上がってきていますね。
エラー発生と解決
さて、23分後、どうやら完成したようです。すべての機能が完了したと表示されています。でも、私に見えているのは青い画面だけです。エージェントは48のアクションを実行し、約1,000行のコードを書き、費用は2.42ドルでした。でも、動いていないようです。新しいタブで開いてみましょう。
エラーが出ています。「Polylineはthreeネームスペースの一部ではありません。拡張し忘れましたか?」これが何を意味するのか全く分かりません。これをスクリーンショットして、Replit Agentに送ってみましょう。どうなるか見てみます。
添付ファイルを追加して、ファイルをアップロードして、そのスクリーンショットをアップロードして、送信します。
エージェントが「ライン描画にエラーがあるようですね。ログを確認して、この問題を修正します」と言っています。
よし、それでうまくいったようです。3分後、さらに1.29ドルかかりましたが、シミュレーションが表示されています。バイブコーディングで行き詰まったら、エラーのスクリーンショットを撮ってエージェントに送るだけでいいようですね。かなりシンプルですが、これを試すのが待ちきれません。早速使ってみましょう。
シミュレーターの機能を探索
さて、シミュレーションがあります。ご覧のとおり、3I Atlasの軌道データがあります。軌道要素があります。1秒あたりの日数シミュレーターがあります。3つの異なるカメラビューがあります。太陽中心視点、これは太陽を中心に置いたものだと思います。
彗星追跡視点もあります。見てみましょう。すごいですね。彗星の真上に配置されます。彗星のカメラビューです。それから地球視点もあります。ご覧のとおり、これが地球だと思います。この小さな黒い点です。
でも、太陽中心視点に戻りましょう。このシミュレーションを1秒あたり30日で開始してみましょう。どうなるか見てみます。
今、2024年です。惑星が動いています。でも彗星はどこでしょうか。画面を動かせますか。彗星は明らかに2025年の終わりに通過するはずです。あ、あそこです。あれが彗星です。見えましたか。
もう一度見ますが、今度は彗星追跡カメラビューで見てみます。ここでズームインできればいいんですが、ちょっと遠いですね。リアルタイムの彗星詳細も表示されました。今ポップアップしました。すごいですね。
何が起こっているんですか。ああ、すごい、これは驚きです。自動的にビューが切り替わりました。通過しています。通過しました。今は2026年です。彗星の詳細が表示されています。
戻りましょう。今度は少しゆっくり、10倍速でやってみます。彗星の詳細を読めるか試してみましょう。
リアルタイムデータの確認
現在のステータスがあります。太陽からの距離、速度、日付、近日点までの日数があります。近日点って何でしょうか。ChatGPTにすぐ聞いてみましょう。
なるほど、天体が太陽に最も近づく軌道上の点のことですね。今、太陽からの距離は8AU(天文単位)です。急速に接近しています。ここで彗星が太陽系に入ってくるのが見えます。エイリアン宇宙船が、太陽系に入ろうとしています。今は何日ですか。
ちょっと待って、一時停止しましょう。今は10月6日月曜日で、太陽系のすぐ外にいます。これはかなり正確だと思います。10月30日に太陽に最も近づくはずです。では見てみましょう。
今の日付は10月29日で、最接近地点付近にいます。近日点、つまり太陽に最も近づくまで18日と表示されています。約2週間ずれているかもしれません。待って、いや、ここに10月30日木曜日、近日点から1日経過と表示されています。つまり、10月29日に太陽に最も近づいたということです。そして、ご覧のとおり、それが正確に表示されています。
ズームアウトできますか。ここの角度が少し変ですね。持っていないといけませんが、10月29日に彗星が太陽に最も近いことが分かります。これは完全に正確です。
追加機能と最終調整
あと、ここに「軌道を比較」ボタンがあることに気づかなかったんですが、オウムアムア、あのもう一つの巨大な宇宙岩、そしてボリソフがありますが、よく分かりません。この「軌道を比較」をクリックすればいいんでしょうか。何も起こっていないようです。
軌道の比較機能は実際には動作していないようですね。でもReplit Agentに戻れば、それを修正できるかもしれません。それから、この彗星をもっとエイリアン宇宙船のように見せたいんです。おそらく彗星なんでしょうけど、宇宙船のように見せたいんです。
では、Replit Agentに戻って、その2つを追加しましょう。1つ目、軌道を比較ボタンが動作しません。修正してください。2つ目、彗星をもっとエイリアン宇宙船のように見せてください。
かなり単純なプロンプトですが、バイブコーディングですからね。ポイントはAIに考えさせることです。
ボタンを修正したようです。約2分の作業で、費用は0.65ドルでした。新しいタブで開いてみましょう。軌道を比較に直接行きます。軌道を比較をクリックします。
他の彗星は見えませんね。でも、彼らがここにいるはずの年ではないんですよね。ああ、彗星を見てください。今はUFOみたいになっています。すごいですね。
でも、オウムアムアは、たぶんそう発音すると思うんですが、2026年や2027年には通過しないはずです。でも軌道を比較もありますね。それは何を意味するんでしょう。軌道の線が表示されるということではないんでしょうか。よく分かりません。
でも戻りましょう。再スタートして、彗星追跡視点にします。あのUFOを間近で見たいです。
いい感じに見えてきています。待って、見てください。UFOです。UFOがいます。通過しています。
実際かなりクールでしたね。簡単にもう一回やってみましょう。
完成したシミュレーターの評価
皆さん、正直なところ、これには満足しています。リアルタイムの彗星詳細、彗星の実際の軌道があります。すべて正確です。軌道要素、現在の日付があります。
唯一、軌道を比較機能が実際には動作していません。おそらくエージェントにもっと具体的に指示すれば、このボタンが何のためにあるのか理解してくれるでしょう。でも、異なるカメラビューがあるのも気に入っています。地球視点もあります。青くなっていますね。それもかなりクールです。彗星追跡視点。そして彗星はUFOです。
これは素晴らしい。本当にクールです。コードを一行も見ていないという事実。見たところで意味はなかったでしょうけど。そして3I Atlasのこの宇宙シミュレーションを作成できました。エイリアン宇宙船の。しかもこんなに低コストで。これ、全部でいくらかかったんでしょうか。ここに0.65ドル、あそこに1.29ドル、1.16ドル。もう1つは4ドルくらいだったと思います。おそらく全部で10ドルくらいでしょう。いや、それ以下かもしれません。
これはバイブコーディングの成功例でした。これまでバイブコーディングで試したものはすべて、満足できる動作バージョンが得られています。バイブコーディングが進歩するペースはかなり狂っていて、私のようにコーディング方法を全く知らなくても、今ではもっと多くのことができるようになっています。
正直、これには本当に満足しています。ちなみに、皆さんがこのシミュレーションを自分で試してみて、さらに改善したい場合、アプリを公開できると思います。以前、公開ボタンを見かけました。どうやって公開するのかよく分かりませんが、興味があれば調べてみます。単なるリンクのようなものであれば、後でコメント欄に追加します。
公開ボタンは実際にここにあります。ただのリンクのようですね。公開または非公開にできます。アプリを公開すると、誰でも使用できるようになります。友達や世界中のユーザーがプライマリURLを通じてアプリにアクセスできます。本当にただのリンクですね。説明欄に追加しておきます。
エンディング
とにかく、この動画を楽しんでいただけて、こういったバイブコーディング動画をもっと見たい方は、ぜひ「いいね」をお願いします。また、コメント欄に提案やフィードバックをお寄せください。私はまだ学んでいる最中です。まだ初心者です。そして皆さんにもこのバイブコーディングの旅に参加していただき、何が可能なのかを一緒に探っていけたらと思います。
では改めて、ご視聴ありがとうございました。いいねをお願いします。初めての方はチャンネル登録もお願いします。そしていつものように、次の動画でお会いしましょう。
コメント