こんにちは！今回の記事では、ちょっと変わったプログラミング開発の体験談をお話ししたいと思います。
今回はWebページで３Dのオブジェクトを使用しておもしろいアプリをAI主導で作っていこうと思います。
３Dのオブジェクトの扱いには「Three.js」というJavaScriptのライブラリを使用します。
Three.jsは複雑な3Dグラフィックスの描画を容易にする強力なツールですが、その学習にはある程度、専門的な知識と時間が必要とされます。
しかし、今回はその学習コストをAIの力を借りて大幅に削減することを目指しました。
まず、完成したものをご覧ください！
どうでしょう？ Webブラウザ上で動くオリジナルの3Dロゴジェネレーターです！
好きな文字を入れて、フォントや色、アニメーションなどをカスタマイズできます。
※日本語は対応できていません。
HTML、CSS、JavaScriptだけで動いています。
特別なプラグインや高度なサーバーサイドの技術は使用していません。
そしてロゴのアニメーションを動画として保存できます。
これは、作成したロゴをSNSで共有したり、プレゼンテーションに使用したりする際に非常に便利な機能です。
私は普段からプログラミングをしていますが、3D技術、特にThree.jsに関してはほとんど知識がありませんでした。
通常であれば、Three.jsの公式ドキュメントを読み込み、基本的な概念やAPIの使い方を習得するところから始める必要があります。
しかし、今回はそのプロセスをスキップし、高性能AIを主要な開発パートナーとして迎え入れました。
実は、このアプリのコードのほとんどは、私自身ではなくAIが書いたものなのです。
「Three.jsっていうので、Webで3Dを動かせるらしい。なんか面白いアプリ作れないかな？」という漠然とした思いだけを持ち、自分ではコードをほとんど書かずに、AIにコード作成を依頼するスタイルで開発に挑戦しました。
これは、従来の開発手法とは大きく異なるアプローチであり、どのような結果になるのか、私自身も非常に興味がありました。
この記事では、AIにコードを依頼する開発の現実とおもしろさ、そしてその過程で直面した課題と解決策について、具体的な体験談を交えながらお伝えします。
開発したコードと公開先
今回開発した3Dロゴジェネレーターのコードは、GitHubで公開しています。
GitHubリポジトリはこちらです：https://github.com/aipro-jp/Logo3D
また、このアプリはGitHub Pagesを使用してインターネット上に公開しています。
GitHub Pagesで公開中のアプリはこちらです：https://aipro-jp.github.io/Logo3D/
GitHub Pages は無料で静的なWebページを公開できる便利なサービスです。
その設定方法や活用方法については、以下の記事で詳しく解説していますので、よろしければご覧ください。
開発準備
今回の開発にあたり、開発環境としてVisual Studio Code (VS Code) を使用しました。
VS Codeは軽量で拡張機能が豊富であり、JavaScript開発に適しています。
そして、AIとの連携をスムーズにするために、Gemini Code Assistを導入しました。
個人向けGemini Code Assistは、コード生成能力に非常に優れたAIモデルであるGemini 2.5を利用できます。
ChatGPTやGoogle Geminiのような汎用的なAIチャットインターフェースも利用可能ですが、今回のようにHTML、CSS、JavaScriptといった複数のファイルを効率的に扱うためには、コーディングに特化した開発環境がより適しています。
GitHub CopilotやCursorなど、他のAI搭載開発ツールも同様に活用できます。
VS Code や Gemini Code Assist のインストールおよび詳細な設定については、別の記事を参照してください。
開発開始：AIに最初のコードを依頼
Three.jsの存在は知っていましたが、具体的に何ができるのか、どのようにコードを書けば3Dオブジェクトを表示できるのか、全く見当がつきませんでした。
そこで、まずはThree.jsの基本的な挙動を理解するために、AIに簡単なサンプルコードの作成を依頼することから始めました。
Three.jsを使って簡単なサンプルを作ってください。
するとAIは、Three.jsのシーン、カメラ、レンダラーの基本的なセットアップを行い、緑色の立方体を作成してそれを回転させるコードを生成してくれました。
このコードをローカル環境で実行してみると、確かにブラウザ上に緑色の立方体が表示され、滑らかに回転しているのが確認できました。
Three.jsのドキュメントを自分で最初から読み解き、環境構築から始めて同様のサンプルを作成するよりも、AIに依頼してコードを生成してもらう方が、圧倒的に手軽でスピーディーだと感じました。
AIが生成したコードは、Three.jsの基本的な構造を理解するための良い出発点となりました。
機能探索と目標設定
最初のサンプルはThree.jsで3Dが表示できることを確認できましたが、どの面も同じ色で、光の当たり方による色の濃淡もなく、まだ「3Dらしい」表現とは言えませんでした。
そこで、もう少し視覚的にリッチで、おもしろみのあるものをAIにお願いしてみることにしました。
もっと高度でおもしろいサンプルを作って。光の当たり方や影も表現してほしい。
このリクエストに対して、AIは光源を追加し、マテリアル設定を調整することで、赤い球体などが上下に滑らかに動いているサンプルコードを生成してくれました。
このサンプルでは、球体に影が描かれ、光の当たる面と当たらない面で色の濃淡が表現されており、よりリアルな3Dオブジェクトに見えました。
3D表示にはモデリングしたオブジェクトが必要？それとも…
基本的な図形が表示できることは分かりましたが、ここで一つの疑問が浮かびました。
立方体や球のような基本的な図形は表示できるけれど、もっと複雑な形状、例えばオリジナルのキャラクターやロゴのようなものを表示するには、Blenderなどの3Dモデリングツールで作成したオブジェクトデータを読み込む必要があるのではないか？
ネット上に公開されている既存のモデルを使うか、それとも自分でモデリングを学ぶ必要があるのか。
そこでAIに以下の質問をしてみました。
Three.jsで、文字を立体にして表示することはできますか？
するとAIはThree.jsのTextGeometryという機能を使用して、文字列から直接3D形状を生成するコードを教えてくれました。
モデリングツールを使わなくても、JavaScriptのコードだけで文字を立体にできることがわかりました。
この基本的な3Dテキスト表示コードから、私の「3Dロゴジェネレーターを作りたい」という具体的なアイデアが浮かびました。
さらに、AIとの対話を重ねることで、このアイデアを具体化していきました。
「もっと見栄え良くして。立体感をもっと出して。」とお願いすると、表面の質感を調整するパラメータをコードに追加してくれました。
次に「金属のような光沢感のあるようにして」と伝えると、AIは対応したマテリアルの使用方法や、環境マップの設定方法を提案し、コードに反映させました。
さらに「アニメーションを付けて。ロゴがゆっくり回転したり、脈打つような動きが欲しい。」とリクエストすると、AIはアニメーションループ内でオブジェクトのプロパティ（回転角度やスケールなど）を時間経過に合わせて変化させるコードを生成しました。
このように、AIとのインタラクティブなやり取りを通じて、私の頭の中にある漠然としたアイデアが、次々と具体的な3D表現として画面に表示されていくプロセスは、非常に楽しく、創造性を刺激される体験でした。
機能追加とコードの課題
「3Dロゴジェネレーターを作る」という具体的な目標が定まってからは、開発のペースがさらに加速しました。
AIとの対話を通じて、このアプリに盛り込みたい機能がどんどん膨らんでいきました。
最終的に実現した主な機能は以下の通りです。
- テキスト入力: ユーザーが自由にロゴの文字列を変更できるようにする。
- フォントの選択: 複数のフォントから好きなものを選べるようにする。
- マテリアルプリセット（ゴールド、シルバーなど）: 事前に定義された質感を選択するだけで、簡単に見た目を変更できるようにする。
- カラーの選択: ロゴの色を自由にカスタマイズできるようにする。
- マテリアルの調整機能: 粗さ、金属感などのパラメータを細かく調整できるようにする。
- 照明設定: シーンの明るさや光源の種類、位置などを変更できるようにする。
- アニメーション設定（複数のアニメーション）: 回転、揺れなど、複数のアニメーションパターンから選択できるようにする。
- ポストプロセス（ブルーム効果、被写界深度 (DOF)）: 描画後の画像に対して、光の滲みや被写界深度などの特殊効果を適用できるようにする。
- パーティクルエフェクト: ロゴの周囲にカラフルなパーティクルを発生させるなどの視覚効果を追加する。
- 動画の録画機能: 作成したロゴのアニメーションを動画ファイルとして保存できるようにする。
AIはこれらの機能を実現するためのThree.jsに関するコードや、それらを操作するためのUI（ユーザーインターフェース）に関するコードを生成しました。
私はAIが生成したコードを、既存のコードベースに組み込んでいく作業を行いました。
AIが生成するコードは多くの場合、そのまま使用できましたが、時折、私の既存のコード構造と合わなかったり、意図した通りに動作しなかったりすることもありました。そのような場合は、AIにエラーメッセージを伝えて修正コードを依頼したり、AIのコードを参考にしながら自分で少しコードを調整したりといった作業が必要でした。
調子に乗って機能を増やすのは非常に楽しかったのですが、AIに生成してもらったThree.jsの初期設定、3Dテキストの生成、色変更、フォント変更、アニメーション制御、UI要素の作成、イベント処理などのコードを、一つのJavaScriptファイルにひたすら追加し続けた結果、コードの行数が増え、コード全体の見通しが非常に悪く、どこに何が書いてあるのかを把握するのが困難になりました。
問題が起きたときなど、目的のコードを探すのに時間がかかり、開発効率が低下していきました。
コード管理とエラー対処
コードが肥大化したことで、開発プロセスにおいていくつかの問題が出てきました。
- 見通しが悪い： コードが単一のファイルに詰め込まれているため、特定の機能や処理がどこに書かれているのか、ファイル内をスクロールして探すのが一苦労でした。関連するコードが離れた場所に散在していることもあり、コードの全体像を把握するのが困難でした。
- エラーの原因特定が難しい： 機能が増え、コードが複雑になるにつれて、エラーが発生する頻度も高くなりました。後述しますが、シンタックスエラーやランタイムエラーが発生した際、この巨大なコードの中からエラーの原因となっている箇所を特定し、修正するのは非常に時間と労力がかかる作業でした。
「これはまずい！このままでは開発が収取がつかなくなる…」と、コードの保守性の低さに危機感を覚えました。
そこで私は、再びAIに相談しました。
今度は「コードを書いて」という依頼だけでなく、「既存のコードを整理して」という、より依頼です。
このJavaScriptファイルは、機能を追加しすぎて非常に大きくなってしまい、どこに何があるか分かりにくくなっています。
コードの役割ごとに、複数のファイルに分割して、管理しやすくしてください。
AIはこの依頼に対して、Three.jsのシーン管理、オブジェクト生成、UI操作、アニメーション制御など、それぞれの役割に基づいたクラスや関数ごとにコードを抽出し、結果として7個のJavaScriptファイルに分割する構成案と、それぞれのファイルに記述すべきコードを生成してくれました。
コード分割を適用した結果、コードの見通しと管理しやすさが劇的に改善しました。
各ファイルが特定の機能に特化しているため、コードを探したり修正したりする作業が格段に容易になりました。AIはThree.jsアプリケーションの一般的な構造や、モジュール分割の概念をよく理解しており、適切な分割案を提示できたことに賢さを感じましたが、既存のHTML構造や、分割されたファイル間でのデータの受け渡しなど、プロジェクト固有の連携に合わせて微調整する必要は少しありました。
規模拡大とファイル分割が進むにつれて、エラーも以前にも増して頻繁に出るようになりました。
JavaScriptの基本的なシンタックスエラーから、Three.jsのAPIの誤った使い方によるランタイムエラー、そして複数の機能が連携する際に発生する論理エラーなど、様々な種類のエラーに直面しました。
AIは一般的な解決策やデバッグのヒントを提示してくれますが、特定の状況や、私のコードの微妙なバグに対して、AIの提示する解決策がそのまま適用できないことも多々ありました。
AIはコード記述を効率化する強力なツールですが、コードが複雑になった際の管理や、発生したエラーの根本原因を特定し、修正するデバッグ作業には、まだまだ人間のプログラミングスキルと経験が必要だなのかもしれません。
AIはあくまでツールであり、それを効果的に使いこなし、問題解決に導くのは人間の役割です。
まとめ
「面白いアプリを作りたい」という漠然とした目標から始まり、AIにコード生成をほとんどまかせるという、私にとっては全く新しいスタイルでThree.js開発に挑戦しました。
Three.jsの知識がほとんどない状態から、AIとの対話を通じて次々と機能を形にしていく楽しさ、コードが肥大化して管理が困難になるという壁、そしてそれを乗り越えるためのコード分割、さらに発生する様々なエラーへの対処…開発プロセス全体を通して、様々な出来事がありましたが、最終的にはWebブラウザ上で動作するオリジナルの3Dロゴジェネレーターを完成させることができました。
AIを使わずにゼロからThree.jsを学び、同じ機能を持つアプリを開発しようとしたら、もしかしたら1週間以上はかかったかもしれません。
AI主導で開発することにより、開発にかかる時間を大幅に短縮できました。
AIにコードを書いてもらう開発は、新しい技術領域への挑戦のハードルを劇的に下げてくれることを実感しました。
Three.jsのような専門性の高いライブラリであっても、AIに質問し、サンプルコードを生成してもらうことで、自分でゼロからドキュメントを読み込み、理解するのにかかる膨大な時間を短縮できます。
アイデアを思いついたら、すぐにAIにコード生成を依頼し、画面でその結果を確認できる。
このサイクルは非常に効率的で、開発のモチベーションを高く維持することにつながりました。
しかし、今回の経験を通じて、AIにコードを書いてもらうだけでは、特に規模が大きくなったり複雑になったりする開発においては、限界があり、人間の開発経験やスキルが不可欠な場面が多々あるということも同時に強く実感しました。
コードが大きくなれば、それをどのように整理し、保守していくかというコード管理の課題が出てきます。
予期せぬ問題やバグが発生すれば、AIの一般的な回答だけでは解決できない、より深いレベルでのデバッグが必要になります。
そして、そこにエラーメッセージの読解能力、デバッグツールの効果的な使用方法、コードの構造を理解する力、過去の経験に基づいた問題解決能力といった、人間のプログラミングスキルが活きる場面がたくさんあります。
AIの進化は目覚ましいですが、厳密な仕様、高い品質、そして長期的な保守性が求められる大規模で複雑な業務システムなどの開発においては、現状ではシステム全体の設計、アーキテクチャの構築、そして高度なデバッグができるスキルを持った人間の役割が引き続き重要になると考えられます。
AIを適切に活用すれば、私たちの強力な共同開発者になってくれます。AIにコード記述や定型的な作業を任せることで、私たちはシステム全体の設計、ユーザー体験の向上、新しいアイデアの創出、そして発生した問題の根本的な解決といった、より本質的で創造的な部分に時間とエネルギーを集中できるようになります。
これが、AIを最大限に活用する新しい開発スタイルなのかもしれません。
このAI共同開発スタイルは、今回のように、個人で趣味レベルで何か面白いものを短期間で形にするには非常に有効だと感じました。
アイデアを素早くプロトタイプにし、試行錯誤を繰り返すのに適しています。
一方で、厳密な仕様や品質基準が求められるビジネスレベルの開発においては、AIが生成したコードの品質保証や、チームでの開発におけるコードの整合性など、考慮すべき課題も多く、このままのスタイルでは向かないかもしれないとも感じています。
しかし、AIの進化は止まりません。今後は、AIがコードの品質管理やテスト、さらにはより複雑なシステム設計の一部を支援できるようになる可能性も十分にあり、AI時代の開発スタイルはさらに進化していくでしょう。
コメント