はじめに
最近、「いまゲーム」というWebアプリをリリースしました。
「ゲームの『いま』と思い出、ゆるくメモ」をコンセプトに、自分が最近プレイしているゲームを画像付きで簡単に共有できるWEBアプリです。
今回の記事ではアプリの紹介と、AIを活用した開発プロセスについて簡単に解説したいと思います。
「いまゲーム」アプリの概要
「いまゲーム」は、以下のようなWebアプリです：
- 最近プレイしているゲームを最大10個まで登録可能
- 登録したゲームを画像付きでX（旧:Twitter）で共有可能
- 登録不要で利用可能（アカウント登録で複数デバイス間の同期も可能）
検索してゲームを選んでツイートすると、
以下のように画像がツイートされます。
登録不要で、一度共有するくらいなら5分で利用できるので、気軽に利用してください。
なぜ作った？
私自身、ゲームが好きで、よくX（旧Twitter）のプロフィールに「最近やっているゲーム」を書いたり、年末に「今年やったゲーム」をまとめたりしています。また、友人と「最近なんのゲームやってる？」という会話をよくしています。
そんな中で、「画像付きで、最近こんなゲームをやっているよ、というのを簡単に共有できるアプリがあると面白いんじゃないか」と思ったのが開発のきっかけです。イメージとしては、最近プレイしているゲームの情報を固定ツイートにおいておくような使い方をしてもらえると嬉しいなと思っています。
使用技術
- フロントエンド：Next.js 14.2.5（App Router）, React 18, TypeScript
- UIライブラリ：Material-UI (MUI) v5
- バックエンド：Supabase（認証、データベース、ストレージ）
- ホスティング：Netlify（サーバーレス関数も利用）
- 外部API：IGDB API（ゲーム情報取得）, 楽天API（アフィリエイトリンク）
- その他：ESLint, Prettier, axios, sharp, canvas（OGP画像生成）
開発の特徴 （AIを活用した開発プロセス）
今回の開発では、生成AIであるClaude 3.5 Sonnetを積極的に活用しました。企画から設計、実装、faviconの描画まで、ほぼすべての工程でAIをガッツリと利用しています。
AI活用の個人開発のメリット
AIと並走しながら開発することで、以下のようなメリットがありました
ほぼ触れたことのない技術でも導入が可能
以前どこかの記事で、「個人開発で挫折しないためには、学ばなければいけないような新技術の利用は全体の2割以下にとどめておけ」というような記載を見た記憶があります。
AIを利用しない場合はそうだろうなとも思うのですが、今回は体感6割くらいが過去使ったことのない新技術です。
（Supabase、Netlify、外部API全般、sharp、canvasなど今回初めて。）
利用したことのない技術であったとしても、一定のクオリティを伴ってプロジェクト内での使い方を教えてくれるので、挫折せずに完成まで持っていくことができました。
苦手分野が底上げされる
私はデザインが苦手ですが、MUIを利用しながらAIに実装をしてもらうことで、最低限見られる見た目にはなったのかなと思っています。自分が苦手な範囲でも及第点以上の提案をすぐに貰えるのは、大きなメリットだと思います。
圧倒的に早い
言わずもがなですね。早いのは正義で、多少の設計変更も即反映できますし、妥協も減ります。細かなデザイン改修や機能の追加もプロンプト一つで即やってもらえるので、「時間が掛かるから一旦諦めるか…」というケースが圧倒的に少なかったと思います。
AIを活用した個人開発の注意点
AIを活用した開発には多くのメリットがありましたが、同時にいくつかの課題も浮かび上がりました。
※AIを使った開発に関する細かな工夫などは、また別途記事にしようと思います。
最新の技術情報へキャッチアップできていないことが有る
Claude 3.5 sonnetの最新の知識は2024年4月のものとのことで、2024年4月17日に発表された、supabaseの匿名認証の機能のことは知りませんでした。今回の開発においては非常に使いたかった機能なので、ドキュメントを読み込ませて実装してもらったり、という手段を取りました。
また、今回はNext.jsのApp Routerを利用していますが、所々でPages Routerの書き様が現れたり、サーバーコンポーネントであることを忘れて実装をしてしまったりなどが頻繁に起こりました。
やはり実感として最新技術のキャッチアップは（AIにも依りますが）限界がある印象です。
結構カジュアルにやばめなコードを書いていたりする
今回のアプリではIGDB APIからゲーム情報を取得しているのですが、100個のゲームを取得→ループで100回IGDB APIを呼び出す、というコードを書いていたりしました。
また、SupabaseのService Role Key（秘匿情報）が露出する造りになってしまっていることもありました。
触れたことのない技術でも導入可能、と上では述べましたが、どんな処理が行われているのか、最低限自分で理解する必要はあります。指摘すればすぐ直してくれるので、自分がレビュアーであるつもりで、一定の勘所を持って監視する必要があるのは念頭に入れた方が良さそうです。
長いやり取りをするとすぐにトークンが枯渇する
文脈を知ってもらいたいと最初はなるべく同じチャット続けてしまいましたが、少し長くなった段階でProプランでも即トークンが枯渇してしまう様になりました。 反省してタスク別に細分化したり要約を駆使しましたが、その際、コンテキストが共有されなくてヤキモキしたタイミングがあります。
最終的にはこのアプリに関して90個くらいのチャットのスレッドが立っています。（もちろん大小はありますが。）
冗長なコード
どうしても単発のロジックの組み合わせになるので、冗長なコードであったり、ひどい設計が乱立します。ファイル単体で見たらそこまで悪くないものも多いのですが、ディレクトリ構成や共通化などの観点では正直60点くらいかな…と個人的には思っています。
ある程度、必要に迫られたタイミングで指示して直してもらっていますが、キリは無いですし、困った/困りそうなタイミングで修正するつもり、位の温度感が良いように思います。
AIを利用した開発をしての感想
実はコードを書くのは好きなので、コードを書く部分をAIにお願いするというのは正直、若干物足りなさや寂しさを感じるところも有りました。
ただ圧倒的にメリットの方が大きいと思いますし時代の流れなので、コードを書くこと自体以外のところ（企画すること、企画を形にしていくこと、効率的な依頼方法の模索など）に面白みを感じることができる様に、価値観をアップデートしていくべきなのだろうと思っています。
今回、どっぷりと浸かってみることで、面白みが別のところに出てきたのを感じており、やって良かったなと感じています。
今後の展望
「いまゲーム」は、今後も機能の拡充や改善を続けていきたいと思っています。
- 年間（半年・四半期）のサマリ機能のつぶやき
- ゲームの日本語版画像の追加
- 検索機能の改善
- 統計情報の可視化（年間プレイしたゲームのジャンル分布や、人気ランキングなど）
利用者がいなくとも自分が使いたいのでアップデートはするつもりですが、応援していただけると励みになります。
おわりに
『いまゲーム』はおそらそこまで多機能なアプリではないと思うのですが、個人的にはそれなりに魂を込めて作ったつもりのサービスです。
まだ利用者もおらず、妻には「そんなにいっぱいゲームやる人いないよ」と言われて悲しい気持ちになったので、助けてください（切実）
きっとエンジニア界隈にはいっぱいゲームをやる人もいると信じています。
※X(Twitter)など見えるところで共有するのは恥ずかしいという人向けに、コピーだけで共有する動線も用意しました。
匿名でフィードバックを送ることもできます。使っていただいたり、フィードバックをいただけたら泣いて喜びます。
良ければX(Twitter)もフォローしてもらえると嬉しいです。
よろしくお願いします。