【ITニュース解説】Using Gemini for Web Apps

Google Geminiのような大規模言語モデルAI（人工知能）をWebアプリケーション開発に応用する可能性を示唆するニュース記事が公開された。この試みは、長年Webプラットフォームをそのまま利用して開発を続けてきた筆者が、テンプレート、コンポーネント、さらにはアプリケーション全体の生成にAIがどの程度役立つかを探る目的で実施されたものだ。

まず、データの準備から始まった。筆者はGeminiに対し、「古典小説トップ100のリストを含む構造化されたJSONファイルを作成してほしい。その際、著者、タイトル、出版年、簡単なあらすじを含めること」という指示（プロンプト）を与えた。JSONとは、Webアプリケーションでデータをやり取りするためによく使われる、人間にも機械にも読みやすい形式のデータ構造のことだ。数秒のうちに、Geminiは要求通りに正確なデータを含むJSONファイルを生成した。このファイルには、例えばホメロスの「オデュッセイア」やメアリー・シェリーの「フランケンシュタイン」といった作品が、指定された情報とともにリストアップされていた。この素早いデータ生成能力は、開発の初期段階で必要となるダミーデータやテストデータを効率的に用意できる可能性を示している。

次に、このデータをWebページに表示する機能の作成に移った。筆者はGeminiに「このJSONファイルを読み込み、テーブル形式で表示する単独のHTMLページを作成してほしい。ユーザーが著者、タイトル、または出版年でソートできるようにし、外部依存は一切使用しないこと。各項目はWebコンポーネントを使って古い図書館のカードのようにレンダリングし、純粋なWeb標準のみを使用すること」と指示した。HTMLはWebページの構造を定義し、Webコンポーネントは再利用可能なUI部品を作成するための技術だ。ここでもGeminiは数秒で期待通りのコードを生成した。生成されたWebページでは、JSONデータが指定通りに「図書館のカード」のような表示になり、著者名や出版年でデータを並べ替える機能も問題なく動作した。さらに、カードをクリックすると画面いっぱいに拡大表示され、再度クリックすると元のリストに戻る「View Transition（ビュー遷移）」という滑らかなアニメーション機能も追加するよう指示したところ、これも瞬時に実装された。View Transitionは、Webページの要素が変化する際に、アニメーションによってユーザー体験を向上させるための比較的新しいWeb標準技術である。

Geminiが生成したコードの品質は非常に高かった。HTML、CSS、JavaScriptの各コードには、その機能の意図を説明するコメントが適切に含まれており、これはコードを理解し、後から修正する際に非常に役立つ。例えば、出版年を表示する際に、西暦だけでなく紀元前（BCE）の年を適切にフォーマットするヘルパー関数が自動的に含まれていた。これは、筆者が明示的に要求しなかったが、データの特性を考慮した気の利いた機能追加と言える。また、ソート機能のコードは、文字列データ（タイトルや著者）と数値データ（出版年）の両方に柔軟に対応できる汎用的なロジックで実装されていた。さらに、View Transition APIがまだすべてのWebブラウザで完全にサポートされていない可能性を考慮し、APIが利用できない場合の代替処理（フォールバック）もコードに組み込まれていた。このように、単に指示された機能を実装するだけでなく、堅牢性や互換性まで考慮されたコードが生成されたことに、筆者は深い感銘を受けている。

これらの成功を受けて、筆者はさらに難易度の高い課題として、シンプルなゲームの作成をGeminiに依頼した。「純粋なWeb標準を使用して、キーボードの矢印キーで上から見た車を操作できる小さなゲームを単独のHTMLファイルで作成してほしい。Web Audioを使ってリアルな効果音も生成し、車を画面上を自由に動かしてランダムに配置されたコインを集め、右上にスコアが表示されるようにすること」という詳細な指示を与えた。この要求に対しても、Geminiは数秒で完全に機能するゲームのコードを生成した。キーボード入力による車の操作、コインの収集、スコアの更新、さらにはWeb Audio APIを利用した効果音までが実装されており、AIが複雑なインタラクティブなアプリケーションも作成できる能力を示した。

結論として、この一連の試みは、Google GeminiのようなAIがWebアプリケーション開発において、いかに強力なツールとなり得るかを明確に示した。わずかな指示で、機能的なWebデモを迅速に、かつ高品質なコードで作成できることは、開発プロセスの大幅な効率化に繋がる。生成されたコードは構造が整っており、読みやすく、必要に応じて容易に修正できるため、システムエンジニアを目指す初心者にとっても、AIはプログラミング学習の強力なパートナーとなるだろう。AIを活用することで、アイデアを素早く形にし、プロトタイプ開発の速度を飛躍的に向上させることが可能になる。