はじめに
「AIって便利ですよね」「AIで効率化！」という記事は巷に溢れていますが、「で、実際にAIを使ってどんなプロダクトを作ったの？」と気になっている方も多いのではないでしょうか。
「実例が見たいなら、あなたが作ってよ」と言われそうでなかなか大声では言えなかったのですが、この度ようやく胸を張って言えるようになりました。やりました。
構想から10年越しとなるブラウザパズルゲーム『Four Links』をリリースしました。
制作期間は約4週間です。
この記事では、TypeScriptやPixiJSの知識がゼロの状態から、AI（Gemini Code Assistant）と音声入力（Aqua Voice）を駆使し、自分でコードを一切書かずにアプリを完成させた技術選定と開発の裏側を共有します。
※開発時の様子（音声入力でAIとコーディングしている一部始終）はYouTube Liveのアーカイブに残しています。
1. 10年前の挫折と「起動1秒未満」への執念
今回開発したのは、Wordleのような手軽さと、『TwoDots』やスマホ版パワプロのような「ワンタッチ操作」を融合させたパズルゲームです。
実は、このアプリの構想自体は10年前に遡ります。2016年〜2017年頃にスマホアプリとしてプロトタイプを作り、当時のQiitaにもその知見を投稿していました。
結果としては大赤字。その後、Unity WebGL版も作成したのですが、**「ブラウザで起動に4〜5秒かかる」**という点が手軽さを致命的に損なっており、プロジェクトは完全に頓挫していました。
今回はそのリベンジとして、「1秒以内に起動して、1日3分遊べる」ことを至上命題としています。
2. 技術選定とアーキテクチャ
至上命題をクリアするための今回の技術スタックです。
- フロントエンド: TypeScript + PixiJS
- バックエンド (BaaS): Supabase
- ホスティング: Netlify
- 開発環境: VS Code + Gemini Code Assistant + Aqua Voice
なぜ Vue.js ではなく PixiJS なのか？
「超軽量」を目指す上で、フロントエンドの技術選定が鍵でした。
今回はテキストベースのUIではなく、2Dパズルとしての「つながる・消える・落ちる」アニメーションの手触りを重視しています。DOM操作（VueやReact）ではなく、より軽量で描画パフォーマンスに優れたCanvasベースの PixiJS を採用しました。
インフラの変遷：さくらインターネット → Vercel → Netlify
当初はさくらインターネットでサーバーを契約する予定でしたが、ビルド結果を見るとアプリ全体で5MB未満。専用サーバーは明らかにオーバースペックでした。
次にVercelへのデプロイを試みましたが、VercelのHobbyプランは「個人商用利用（将来的な広告や寄付なども含む）」の規約が厳しめです。今は商用利用の予定はないものの、不要なリスクを避けるため、規約が比較的柔軟な Netlify に最終着地しました。
データベースは Supabase（ただし「個人情報」は持たない）
問題の投稿やバグ報告・フィードバックのフォームデータ保存用として Supabase を導入しました。データ量が小さいため、無料枠でずっと運用できる見込みです。
ここでセキュリティ設計として一つ大きな割り切りをしています。
それは「ユーザーの個人情報（メールアドレス等）を一切取得・保持しない」ということです。AIを使って超高速でコードを生成している以上、潜在的な脆弱性がゼロであるとは言い切れません。「守るべき個人情報を持たなければ、情報漏洩の最大リスクは回避できる」という方針で、アカウント登録機能などは完全に削ぎ落としました。
3. 開発スタイル：キーボードを叩かず「喋って」作る
ここが今回のハイライトです。
前述の通り、私はTypeScriptもPixiJSの書き方も知りません。しかし、以下のフローで開発を進めました。
- VS Codeを開く
- Aqua Voice（音声入力ツール）に向かって、実現したい機能やUIの配置を喋る
- Gemini Code Assistant がコードを生成・提案する
- そのまま適用する
自分でキーボードを叩いてロジックを書くことはほぼゼロでした。なんならキーボードを叩くことも最小限でした。
エラーが出た場合も、エラー文をGeminiにそのまま投げるだけです。
再度同じリンクですが開発風景がこちらになります。
なぜ知識ゼロでも破綻しなかったのか？
AI開発において最も重要なのは「作りたいもののビジョン（仕様）が明確であること」だと痛感しました。
私の場合、過去にUnityでプロトタイプを作っていたため、「どのようなアルゴリズムが必要か」「どういうデータ構造にすべきか」という設計の解像度が高かったのです。
「どうコードを書くか（How）」はAIがすべて担当し、私は「何を作るか（What）」のディレクションに100%集中することができました。
おわりに
もしAIなしで、TypeScriptとPixiJSの勉強から始めて自分でコードを書いていたら、完成までに半年〜1年はかかっていたはずです。いや、そもそもそこまで集中力が続くとも思えず、結局個人では作れなかったんじゃないかなと思っています。
構想から10年。それが実質1ヶ月未満、約4週間で、しかもゼロ知識の言語で完成してしまいました。
結局TypeScriptやPixiJSについては一切勉強もしていないですし、専用の書き方とかは知識ゼロのままここまで来てしまいました。
本当に時代が変わったと実感すると同時に、個人開発者にとってこれ以上ない夢の環境が整ったと感じています。
「AIを使って何が作れるのか？」の一つのアンサーとして、この記事が誰かの開発のモチベーションに繋がれば幸いです。
ぜひ、5MB未満の爆速ロードで作られた『Four Links』を遊んでみてください！