Gemini Code Assistで15パズルを作ろう

アジャイルグループの石田です。今回はアジャイルやスクラムといったテーマから少し離れて、生成AIについてお話しします。

Googleが提供するGemini Code Assistは、生成AIを用いたコーディング支援ツールの1つです。2025年2月以降、個人向けの無料版が提供されており、コード補完は1日6,000件、チャットリクエストは1日240件まで利用できます。個人開発で使うには十分すぎるほどの利用制限で、非常に魅力的です。

そこで今回は、このGemini Code Assistを使ってコーディングに挑戦した体験記です。

早速ですが、今回作成した15パズルをご覧ください。GitHubにプッシュし、GitHub Pagesで公開しています。

15パズルは、1から15までの数字が書かれたパネルを4x4の盤面でスライドさせ、数字を正しい順に並べる古典的なパズルです。プログラミングで初めて作るパズルとしては、ファミコン時代から15パズルと相場が決まっています^[1]。

この15パズルには、以下のような基本的な機能を実装しました。

• 見た目: 木製をイメージした色合い
• 操作性: 矢印キーでのパネル移動
• スクランブル機能: ボタンまたはショートカットキー（Sキー）でのシャッフル
• タイマー機能: スクランブルから完成までの時間を測定
• スマホ対応: スワイプ操作に対応し、横幅を最大500pxに制限

ぜひ、以下のURLから遊んでみてください。

https://mamezou-ishida.github.io/15puzzle/

開発にはMacを使用し、エディタはVS Codeを選びました。
プログラミング言語はJavaScriptで、画像やアニメーションを簡単に作成できるライブラリ「p5.js」を利用しています。

VS Codeでp5.jsを使う方法は、p5.jsの公式サイトに詳しい説明があります。
https://p5js.org/tutorials/setting-up-your-environment/#vscode

とはいえやることは、VS Codeの拡張機能「p5.vscode」をインストールするだけです。
これをインストールすれば、コマンドパレットから「Create p5.js Project」を実行し、フォルダを指定するだけでプロジェクトが作成されます。

さらに、VS CodeでGemini Code Assistを使えるようにします。
これもVS Codeの拡張機能「Gemini Code Assist」をインストールし、Googleアカウントでログインするだけで準備完了です。

注意点として、個人向けの無料版を利用する際は、会社のGCPアカウントやWorkspaceに関連付けられているアカウントではなく、個人で使っているGoogleアカウントを使用してください。

完成したコードはGitHubで公開しています。実際にコーディングしたのは「sketch.js」ファイルのみで、その他のファイルはプロジェクト作成時に自動生成されたものです。
mamezou-ishida/15puzzle

VS CodeのGemini Code Assistプラグインを使えば、VS Code上からチャット形式でAIに指示を出し、コードを生成させることができます。

今回、この15パズルを開発するためGemini Code Assistに出した指示は、わずか10回でした。

p5.jsを使って、15パズルを作ろうと思います。まずはその準備として、四角形を4x4の形に16個作ってください。
その周りに四角形の直径の4分の1の太さの枠を作ってください。全体的に木製のイメージとなるような色合いにしてください

次に、各四角形の中央に、左から右、上から下にかけて1から15までの数字を入れてください。
親しみやすいポップなフォントが良いです。余った右下の四角形は空白となっていることが分かるような色にしてください。

空白部分の色は、薄めの色のほうが良いです。

次は、パズルの動きを実装していきます。
上下左右のキーを押したときに、空白部分にその隣のパネルが移動するようにしてください。

パネルが移動する際に、0.1秒かけて移動するアニメーションを作ってください。

次はスクランブル機能を追加します。パズルの下に「Scramble(S)」ボタンを追加して、
そのボタンを押したときにパズルがバラバラになるようにしてください。
また、Sキーを押したときにも同じ動きをするようにしてください。

ボタンは、もう少しポップな見た目にして。

次は、時間計測機能をつけます。スクランブルボタンの下に、少数第一位までのタイマーを表示してください。
表示は「0.0 秒」の形にしてください。スクランブルした後に、最初のパネルを動かしたときにスタートし、
完成したらストップして、タイマーの色を赤くしてください。
スクランブルボタンとタイマーは、中央に寄るようにしてください。

次はスマートフォン対応をします。パズルの横幅を、最大500pxとしてください。
また、パネルをスワイプでも動かせるようにしてください。

下記のエラーになっています。 
sketch.js:415 Uncaught ReferenceError: 
touchX is not defined at touchStarted (sketch.js:415:7) at e.default._ontouchstart (p5.min.js:2:607198)

途中で色や見た目の調整、エラー修正の指示も含まれているため、実質的な機能追加の指示は7回で完了しました。GitHubのコミット履歴も、最初のコミットを除けば7回となっています。

Gemini Code Assistは、チャットで指示を出すとそれに応じたコードを生成し、「Accept Changes」ボタンを押すだけで自動的にマージまでしてくれます。まさに指示を出し、マージボタンを押すだけで15パズルが完成してしまいました。

ちなみに、GitHub Pagesで公開するにはどうすればいいかという質問に対しても、かなり細かく教えてくれました。

ここからは、今回Gemini Code Assistを使うにあたって分かったことについてです。

今回の15パズルは7回のコミットで完成しましたが、実はこの記事を書くために、今回完成したものは4回目に作成したものでした。
最初は仕様がはっきり決まっていなかったこともあり、試行錯誤しては最初からやり直す、ということを繰り返しました。
しかし、これは生成AIを用いたコーディングを学ぶ上で非常に有用な方法だったと感じています。
何度か繰り返しているうちに、適切な指示の出し方が分かってきて、最終的に7回というほぼ最短と言える方法で完成させることができました。時間的にも、最初のコミットから完成まで1時間もかかっていません。
また、同じ指示でも見た目やコードも全く同じものは生成されない、というのも面白い発見でした。
例えば、完成した15パズルでは各パネルの角が少し丸みを帯びていますが、これは最後に作ったもの以外では提案されなかったものでした。

15パズルを作るにあたって、一番最初の指示で「15パズルを作ります」と宣言をしました。これはかなり重要なポイントだと考えています。
当初は、四角を16個作って、その中に数字を入れて、といった具体的な指示をすることに注力していました。
しかし最初に作りたいものを明確に宣言することで、生成AIがこちらの意図を深く理解した上でコードを生成してくれるようになりました。
これまで定義していない「パネル」や「スクランブル」といった言葉を突然使っても、難なく受け入れてくれたのは、全体のコンテキストをAIが把握していたからでしょう。

これは当然のことですが、指示を出したからといって一発で欲しいものが得られるとは限りません。思ったような見た目や動きになっていなかったり、時にはエラーになるコードを生成することもあります。そういった時、矢継ぎ早に指示を出していると、そのうち引き返せない状況に陥り、「やっぱりあの時の指示を変えればよかった」と後悔することが多くなります。そのためにも、こまめにコミットをして、いつでも前の状態へ戻れるようにしておくことが非常に大切です。これをしておかないと、どんどんドツボにはまってしまいます。

これはVS Codeの拡張機能に関する話ですが、特に変更が多い場合、コード生成後にマージできないことが多々ありました。
その場合には「マージができないのでマージできるようにして」といったような指示をしてみたり、それでもできない場合は「マージができないので全文を出力して」といった指示をすれば、大抵は解決します。

Gemini Code Assistは、コードを生成するだけでなく、それに対するかなり詳細な説明もしてくれます。趣味の個人開発であれば、何も考えずにマージするだけでも良いかもしれません（実際に今回は全くコードを読まずに完成させました）。しかし、仕事としてコードアシストを使う際にはそうはいきません。何かバグや問い合わせがあったときに、「生成AIが作ったので分かりません」では通用しないからです。あくまでアシストとして、あるいはコーディングの勉強として活用するのが、少なくとも現時点では最も賢い使い方だと言えるでしょう。

ここ最近の生成AIの成長は目覚ましく、その進化のスピードには目を見張るものがあります。もはや、生成AIを使わずに仕事をするのは効率が悪すぎて考えられない、という時代がすぐそこまで来ています。これは、紙と鉛筆の時代からワープロやパソコンが普及したのと同じくらいの、あるいはそれ以上の社会と働き方の大きな変革期と言えるかもしれません。

Gemini Code Assistのようなツールは、私たちのコーディングの生産性を飛躍的に向上させるだけでなく、「これを作りたい」と思ったときのハードルを大きく下げてくれます。プログラミングの経験が浅い人でも、AIの力を借りて短期間に動くものを作り出せるようになります。もちろん、AIが生成したコードの品質を理解し、適切に修正・管理するスキルは引き続き求められますが、それもAIと一緒に開発を進める中で自然と身についていくはずです。

AI時代のエンジニアとして、今後もコードアシストとうまく付き合っていこうと思います。