生成AIを（無料でできる範囲で）フル活用した開発体験記

はじめに

今年（2024-2025年）の年末年始は久しぶりにまとまったおやすみだったので、AIを活用した開発というのを体験してみようと思いました。

体験してみる、というのにお金かけるのは抵抗ありますよね。私もそうです。ですので、「無料でできる範囲で」という制約下で２つのアプリ開発をやってみることにしました。

一つは、以前作ったギター練習用アプリの改修。もう一つは、年末の振り返りのお供になるようなキャリア棚卸しアプリの新規開発です。

この記事では、私がどのように生成 AI ツールを使い、どんな発見やつまずきがあったのかを書いていきます。同じようなことをやろうとしている方の参考になったら嬉しいです。

まずは、今回の挑戦に利用した生成 AI ツール（とその他ツール）の紹介です。

各ツールの紹介と無料枠でできること

記事執筆時点の情報ですので、最新情報は各ツール公式サイトをチェックしてみてくださいね。

Google AI Studio

無料でトップレベルの性能の最新モデルが試せるので使わずにはいられませんでした。今回は「Gemini 2.0 Flash Thinking Experimental」が発表されて間もなかったため、これを利用しました。

無料枠でできること

• テキスト生成、コード生成、翻訳などの LLM ができる基本的なこと
• Gemini シリーズの様々なモデルを試せる（1 回のチャットで利用可能なトークン数に制限あり）
• 今回利用した Gemini 2.0 Flash Thinking Experimental も無料枠で利用可能

今回のプロジェクトでは、主にギター練習アプリの改修案のアイデア出しと、具体的なコード生成をお願いしました。（それとこの記事の執筆も手伝ってもらいました。）

Google AI Studio ではディレクトリごとファイルアップロードはできなかったので、大規模アプリのコード生成でこれを利用するのは厳しそうでしたが、今回の対象アプリは小規模だったので、十分活用できました。

v0

爆速UIプロトタイピングツールとして有名なv0。少しプロンプトを書くだけで Next.js でコードをガシガシ書いてUIを作ってくれます。

無料枠でできること

• プロンプトを利用したUIプロトタイピング作成
• プロンプト入力数にも制限あり（月間 200 回 、日毎に 10 回。日本時間で毎日 9:00 にカウントリセットされる）

キャリア棚卸しアプリのアイデアをスピーディーに形にするための、UIのモックアップ作成で大活躍しました。

お試しで利用する分には、プロンプト入力数の制限はそこまで気になりませんでした。あくまでプロトタイプ作成の用途で機能を完成させる必要がなかったため、プロンプトの往復が少なかったからかもしれません。

Cursor

「AI搭載の最強エディタ」との呼び声も高い Cursor。コード補完や生成はもちろん、チャット形式での指示出しも可能です。

無料（トライアル期間）でできること

• トライアルは 2 週間の期間だけ、Pro プランの機能を利用可能（高性能なモデルの利用、回数制限の緩和など）

今回は登録時のトライアル期間を利用し、キャリア棚卸しアプリのロジック実装やバックエンド連携をほぼ Cursor にお任せしました。

これが一番衝撃を受けたかもしれません。Composer 機能で何でも指示できるので、ほとんどコードを書き換えることがありませんでした。コードを触ったのは、UI の微調整や ESLint のエラー対応のために型定義に export つけたりしたくらいです。あとは Composer とコード補完（ Tab キー押しまくる）で何とかなってしまいました。

ただ残念ながら無料プランでは Composer 機能は利用できないようなので、今後同じように個人開発をしたくなったときは課金するかもしれません。

Felo

AI検索エンジンの Felo。日本語で質問すると、日英のサイトを調べてくれて、答えてくれます。そのときに参考にしたサイト情報も 10 〜 20 程度つけてくれるので、自分で探しにいくよりかなり早くほしい情報に辿り着けます。

無料枠でできること

• 基本的な検索は無料
• 回数制限はあるものの、高精度な検索が可能（今回とくに使わなかった）

Node.js でのローカル開発環境で迷ったとき、Supabase や Vercel の登録の仕方や使い方を調べるのに重宝しました。

Supabase

Firebase のようなサーバーレスバックエンドプラットフォーム。PostgreSQL をベースとしたデータベースや認証機能などを簡単に利用できます。

無料枠でできること

• データベース、認証、ストレージなどの基本機能を利用可能（容量制限あり）
• API での各機能の利用

キャリア棚卸しアプリのバックエンドとして、DB と認証サービスを利用しました。

無料プランだと 1 週間アクセスがないとデータベースが停止させられてしまいます。個人開発ですし今回それは許容しました。

Vercel

Next.jsなどのWebアプリケーションを簡単にデプロイ・ホスティングできるプラットフォーム。v0 提供元でもあるので、ホスティングサービスとして相性がいいです。

無料枠でできること

• GitHub リポジトリとの連携による自動デプロイ
• 小規模プロジェクトのホスティング

作成したキャリア棚卸しアプリをWebで公開するために利用しました。

ギター練習アプリをパワーアップ！

以前作成したアプリはこちらの記事で書いた通りのシンプルなものでした。

これを題材に、どんな機能開発を行うかから AI と壁打ちして進めることにしました。

Google AI Studio を開き、Model は Gemini 2.0 Flash Thinking Experimental を選択。一番最初のプロンプトは以下のように入力しました。

System Instruction

あなたはWebアプリ開発のスペシャリストです。さらにジャズギタリストでもあります。その知見を活かし、最大限のアウトプットを出してください。

User Prompt

これからReactで作られた画面上にギターの指板を表示し、ルート音とダイアトニックコードの種類を選択するとそのコードトーンを指板上に表示するアプリのコードを添付するので覚えてください。これをもとにより発展させたアプリを考えたいので、そのあとディスカッションに協力してください。
## ここから下に実際のコードを貼り付け

かなり雑な投げかけでしたが、最初の応答で具体的な機能拡張のアイデアを 10 個出してもらえました。

10 個のアイデア

1. スケールの種類を増やす
   • 現状のメジャースケール（イオニアンスケール）だけでなく、マイナースケール（ナチュラルマイナー、ハーモニックマイナー、メロディックマイナー）、ペンタトニックスケール、ブルーススケールなど、様々なスケールに対応させましょう。
   • スケールを選択できるドロップダウンメニューを追加し、ユーザーが自由に切り替えられるようにします。
   • 各スケールの構成音を視覚的に理解できるように、色分けやラベル表示を工夫しましょう。
2. コードフォームの表示
   • 選択されたコードの代表的なコードフォームを指板上に重ねて表示する機能を追加します。
   • 複数のボイシング（押さえ方）に対応させ、ユーザーが選択できるようにします。
   • コードフォームをクリックすると、その構成音がハイライトされるようにすると、理解が深まります。
3. インターバルの表示を拡張
   • 現状では音名と度数が表示されていますが、さらに具体的なインターバル（長3度、完全5度など）を表示できるようにします。
   • インターバルを色分けすることで、視覚的な理解を助けます。
4. コード進行の練習機能
   • 複数のコードを順番に表示し、それらのコードトーンやコードフォームを指板上で確認できる機能を追加します。
   • シンプルなコード進行（例：I-IV-V-I）から、複雑なジャズのコード進行まで対応できるようにします。
   • コード進行に合わせて、指板上の該当箇所がアニメーションでハイライトされるようにすると、視覚的に理解しやすくなります。
5. スケールとコードの関係性の可視化
   • 選択されたスケール上で、指定されたコードを構成する音（コードトーン）がどのように配置されているかを明確に表示します。
   • これにより、スケールの中でどの音がコードトーンになるのか、視覚的に理解できるようになります。
6. アドリブ練習サポート
   • 選択されたコード進行に合わせて、使用できるスケール（アベイラブルノートスケール）を提案する機能を追加します。
   • 提案されたスケールを指板上に表示し、アドリブの練習をサポートします。
7. チューニングの変更機能
   • スタンダードチューニングだけでなく、ドロップD、オープンGなど、様々なチューニングに対応できるようにします。
8. ギターの種類を選択
   • ギターの種類（一般的な6弦ギターだけでなく、7弦ギターなど）を選択できるようにします。
9. ユーザー設定の保存
   • 選択したルート音、コード、スケールなどの設定をブラウザに保存し、次回アクセス時に復元できるようにします。
10. UI/UXの改善
    • より直感的で使いやすいインターフェースを目指しましょう。
    • 指板の表示方法（色、デザインなど）をカスタマイズできるオプションを追加するのも良いでしょう。
    • レスポンシブデザインに対応させ、様々なデバイスで快適に利用できるようにします。

そこからはどのアイデアをまずやってほしいか伝えて具体的な機能案を出してもらったり、その案を元に実装を指示して書き換え後のコードを出力してもらったりと進めて行きました。

結果、10 個出してもらったアイデアのうち、1, 4, 5, 9 の機能をほとんど自分でコードを書くことなく追加していくことができました。あれこれ説明をしなくても、コードをすべて渡してしまえばほとんど理解してくれたので、トークン上限となり別チャットに移行するときでも続きからやっていくのが簡単でした。

最終的な成果物はこちらです。

キャリア棚卸しアプリを 0 から開発！

始める前にテーマ（年末年始にやりたい仕事面、私生活面の振り返りと今後の目標立てに使いたい）と、どんな順番で開発を進めるつもりか（ v0 でフロントエンドのコードを大体作る → Cursor でその他修正）だけ決めてから取り掛かりました。

v0 でフロントエンド開発

v0 に一番最初に入力したプロンプトは以下の内容でした。

自分の職務経歴書を作るため、あるいは自分の強みや弱みを理解するため、そして今後の目標を立てるために利用できるアプリが作りたい。

かなり雑。。。ですが、これだけで 5 つのファイルをちゃんとしたディレクトリ構造で作ってくれたのは驚きがありました。

ここからプロンプトで指示を出して、データの保存こそできないものの、動くアプリを作成することができました。

Cursor へ移行して DB アクセス、認証も実装

v0 からローカル開発へ移行するには、v0 の画面の右上「コードベースに追加」から npx shadcn add ... のコマンドを取得できるため、それを Node.js 導入済みの環境で実行するだけなはずでした。

ただ、私の環境に導入されていた Node.js のバージョンが古く、途中でエラーとなってしまいこれで一発で移行することができませんでした。

結局以下の手順で移行しました。

1. まずはローカル環境の Node.js のバージョンを上げる
2. Next.js のプロジェクトを作成する（Tailwind CSS はありで作成）
3. v0 の「コードベースに追加」から zip ファイルで作成したファイルをダウンロード
4. Next.js のプロジェクトにそのファイルをコピー
5. TypeScript のエラーの解消を Cursor と行う
   • この方法だと v0 が UI で利用している shadcn で利用しているコンポーネントがないので、以下のようなコマンドで導入していく

     npx shadcn@latest add button
     

Cursor で開発できるようになってからは、ひたすら Composer に指示出ししまくってました。Supabase のことも利用していた claude-3.5-sonnet が知っていたのか聞けたので、コーディングと共に Supabase 側でやること（ DDL の作成など）も教えてもらえました。

開発を進めながらバックエンドサービスは以前聞いたことがあった Supabase を利用してみようだとか、フロントエンドのデプロイ先は Next.js と相性が良くて以前使ったこともある Vercel にしようだとか決めたのですが、無料枠の制限や具体的な利用方法など調べる必要があったことはすべて Felo で調べていました。

ちなみに Felo には次のようなことを聞いていました。

Felo に聞いていたこと

• nodeとnpmのアップグレード
  • v0 からの移行に失敗したからですね。
• npx shadcnの使い方
  • v0 で提示されたコマンドが何なのかわからなかったので。
• どのバックエンド技術がv0と最も相性が良いですか？
• 簡単なAPIとそのストレージとなるDBが合わさった無料で使えるサービスは？
• firebase と supabase の無料プランにおける違いは？
  • Supabase は知っていたもののこれを選択すべきか迷っていたため調べていました。
• cursorに.envファイルみさせていい？
• cursorに.envファイルを見せないためには？
  • セキュリティ面で気になったので。
• supabaseのgoogle認証かgithub認証は無料で実装可能？
• githubのoauthアプリケーションの作成って？
• supabaseでパスワードログインさせるには？
  • 認証周りはどうするのが一番軽くできそうか調べていました。
• vercelでシークレットはどうすればいいの？
• vercelへデプロイするときのsupabaseの環境変数にはNEXT_PUBLICは付けるべき？つけないべき？
  • シークレット周り気になったので。

さいごに

感想は一言、楽しかったです。

私の技術力はそれほど高くなく、Udemy で React や Next.js の基礎講座は一通りやっていて、AWS SAA を過去に取ったことがあるくらいなのですが、そのくらいのレベルでも動くものを短時間で作ることができるのはやはり楽しかったです。

様々なマネージドサービスが出てきていて、さらに無料枠も充実している中、生成 AI を使うことでプログラムのハードルもけっこう下がっているのは、自分のようなジェネラリスト的な人には楽しい時代になってきたなと思いました。

一方で、これだけの力を持った生成 AI のことは常にキャッチアップし続けて、使って理解していくようにしないと、これからの時代を生きていくことはできないかもしれないと危機感も持ちました。

常にキャッチアップ！ですね。これからも新しいものは調べて使って理解していきたいと思います！