Lecture 06: Acquiring Gemini API from Google AI Studio & Integrating Intelligence into Your App
← AI駆動趣味開発講座：まとめページに戻る | ← 第五講へ
はじめに：アプリに「本物の知能」を吹き込もう！
前回の 【第五講】 では、クラウドプラットフォーム「Vercel」を活用して手元のWebアプリを世界中へ無料公開し、Git Pushで即時反映されるCI/CDや、スマホのホーム画面追加によるアプリ化までやりきりました。
今回からはいよいよ、本連載の最終章である 「第三部：生成AI（API）機能の組み込み編」 に突入します！
第二講では「今日の占いアプリ」を例にアプリの土台を作りましたが、あのときはプログラムにあらかじめ用意された数種類の固定メッセージや簡単な計算で画面を表示していました。
しかし、今回からは違います。
Googleが提供する最先端のAIプラットフォーム 「Google AI Studio」 から Gemini API を取得し、アプリの裏側に接続します。
お悩み相談、アイデア出し、日々の雑談、仕事のアシスタント、あるいはユニークなアドバイス生成まで……。
ボタンを押したりメッセージを送るたびに、本物の生成AIがあなたのためだけにリアルタイムで文章を考え、賢く・温かく語りかけてくれる「本物のAI搭載アプリ」 を完成させましょう！
もちろん今回も、コードは1行も書かずにAI（相棒）との対話だけで組み込んでいきます。
【極めて重要な大前提：趣味開発ルール】
本連載の「コードを読まない・AIに実装を委ねる」スタイルは、あくまで自分や身近な人のためだけに作る個人の趣味開発・プロトタイプ限定のルールです。
実務・業務の開発現場において、コードやAPIキーのセキュリティ設定を理解・検証しないまま放置することは、重大なインシデントや情報漏えいを引き起こす極めて危険な行為です。 業務開発に携わる際は、必ずセキュリティガイドラインに則り、適切なバックエンド構成とレビューを行った上で活用してください。
本講で体験する全体フロー
今回は「APIの取得」から「安全な保管」、そして「アプリへの組み込みと世界公開」までを一気通貫で進めます：
【ステップ1〜2：APIキーを手に入れる】
① Google AI Studio とは？ なぜ趣味開発に最強なのかを理解する
② ブラウザから Google AI Studio にアクセスし、Gemini APIキーを無料発行・コピー
│
▼
【ステップ3：超重要！APIキーの安全な守り方】
③ APIキーは「家の鍵」。GitHubに絶対に流出させない仕組み（.gitignore）を確認
④ プロジェクト直下に「.env」ファイルを作成してキーを保存
│
▼
【ステップ4：AIに対話で組み込みをオーダー】
⑤ 相棒AI（Cline / Antigravity）に自然言語で「Gemini APIを組み込んで！」と依頼
⑥ AIがSDKのインストールから画面UI・ローディング表示まで全自動で改修
│
▼
【ステップ5：手元で動作確認（バイブコーディング）】
⑦ ブラウザでボタンをクリック！AIがリアルタイムに文章を紡ぎ出す感動を体感
⑧ エラーが起きたら画面のエラーをそのままAIに丸投げして即解決
│
▼
【ステップ6：Vercelにもキーを登録してスマホで楽しむ】
⑨ Vercelの管理画面に「Environment Variables（環境変数）」を登録
⑩ 全世界に公開されたスマホアプリからも、本物のGeminiが元気に返答！
ステップ1：Google AI Studio とは？ なぜ趣味開発に最強なのか？
Google AI Studio（ https://aistudio.google.com/ ）は、Googleが提供する最新の生成AIモデル「Gemini」をブラウザ上で実験したり、アプリ開発用のAPIキーを即座に発行できる開発者向けWebポータルです。
世の中には OpenAI（ChatGPT）や Anthropic（Claude）など様々なAI APIが存在しますが、「趣味開発・個人の最初の第一歩」として Google AI Studio を強力におすすめする理由 が3つあります：
-
手厚すぎる「無料枠（Free Tier）」がある:
多くのAIサービスは利用開始時にクレジットカード登録やデポジット（事前課金）が必要ですが、Google AI StudioのGemini APIは、無料枠の範囲内であればクレジットカード登録なし・完全無料 で利用できます。 -
爆速かつ高性能なモデル（Gemini 1.5 Flash / 2.0 Flash など）が使える:
圧倒的な処理スピードと高い知能を両立したモデルが提供されており、スマホアプリのレスポンス待ち時間も非常に短く、快適に動作します。 -
Googleアカウントさえあれば数分で使い始められる:
普段お使いのGoogleアカウントでログインするだけで、面倒な企業審査や複雑な契約なしに、その場ですぐに開発をスタートできます。
■ 1つのAPIキーで何ができる？ Geminiモデルの比較と広がる世界
Google AI Studioで発行したAPIキーが1つあれば、テキスト対話だけでなく、画像生成や動画・音楽・音声など、Googleの多彩な最新生成AIモデルを目的に応じて呼び分けることができます。
1. 対話・文章生成モデルの比較
テキストを生成・対話するGeminiモデルは、用途やコスト、速度によって複数の選択肢が用意されています：
| モデル | 位置づけ | 向いている用途 |
|---|---|---|
| Gemini 2.5 Flash ★本講座おすすめ | 低レイテンシ・大容量処理向けで、価格と性能のバランスが良い | チャット、要約、コード生成、一般的なWebアプリ |
| Gemini 2.5 Flash-Lite | 2.5系で最も高速・低コスト | 大量処理、分類、簡単なチャット、コスト最優先 |
| Gemini 2.5 Pro | 2.5系で深い推論・コーディングに強い | 複雑な分析、高度なコード生成、難しい推論 |
| Gemini 3.5 Flash-Lite | 3.x系の高スループット・低コストモデル | 新規開発で安さと速度を重視する場合 |
| Gemini 3.8 Flash | 現在のStableなFlash系上位モデル | 複雑なコーディング、エージェント、業務ワークフロー |
| Gemini 3.1 Pro | 高度な問題解決・コーディング向けのPro系 | 高難度な推論や複雑な開発支援 |
【公式の推奨状況について】
公式では、2.5系は非推奨ではないものの、新規プロジェクトには Gemini 3.5 Flash-Lite または Gemini 3.8 Flash を推奨しています。一方で Gemini 2.5 Flash 自体も「価格とパフォーマンスに優れたモデル」として引き続き安定提供されています。
本講座では、コストと性能のバランスから、model: "gemini-2.5-flash" を基本モデルとして扱っていきます！
2. その他の生成AIモデル（画像・動画・音楽・音声）
GoogleのAPIでは、テキストチャット以外にも多彩なメディア生成モデルが提供されています。教材としては系統ごとに押さえておくと全体像が掴みやすいです：
| 種類 | 主なモデル | できること |
|---|---|---|
| 画像生成・編集 | Nano Banana 2 / Nano Banana 2 Lite / Nano Banana Pro | 言葉からの画像生成、画像編集、デザイン作成 |
| 動画生成 | Veo 3.1 / Veo 3.1 Lite | テキストや静止画からのハイクオリティ動画生成 |
| 音楽生成 | Lyria 3.5 / Lyria 3 Clip / Lyria RealTime | 楽曲制作、短いBGM、リアルタイム音楽生成 |
| 音声会話 | Gemini 3.8 Live | リアルタイムな双方向音声対話 |
| 音声合成 | Gemini 3.8 Flash TTS / Flash-Lite TTS | 自然なテキスト読み上げ（音声合成） |
| 音声認識 | Gemini 3.5 Transcribe | 音声データからの高精度文字起こし |
「まずはテキストチャットからスタートし、慣れてきたら画像生成や音声読み上げも追加してみる」といったステップアップも、すべて同じAPIキー1つでAIに指示するだけ で挑戦できます！
ステップ2：Google AI Studio で API キーを発行する（4ステップ）
それでは、実際にブラウザから Gemini API キーを取得してみましょう。
実際の操作画面を見ながら進めれば、迷うことなく3〜5分ほどで完了します！
① Google AI Studio にアクセスし、APIキー画面を開く
まずブラウザで Google AI Studio（ https://aistudio.google.com/ ）にアクセスし、お持ちの Google アカウントでログインします。
ログインすると、上記のような 「Playground（実験室）」 の画面が開きます。
（※右側のパネルでGeminiのモデルを選んで、ブラウザ上で直接AIとチャットテストができる画面です）
ここから API キーの発行画面へ移動します：
- 左側メニューの 「MANAGE」にある「Dashboard」 をクリックする
- または、画面の一番左下にある 「鍵マーク（🔑）」 アイコンをクリックする
これで、API キーの管理ダッシュボードへと移動します。
② 「API キーを作成」をクリックする
「API キー」の一覧管理画面が表示されます。
画面右上にある 「API キーを作成」 というボタンをクリックします。
③ キー名を入力し、プロジェクトを選択（または新規作成）する
クリックすると、「新しいキーを作成する」という設定ウィンドウがポップアップします。
-
キー名の設定:
管理しやすい名前（例:Gemini API KeyやFortune Appなど）を入力します（初期値のままでもOKです）。 -
インポートしたプロジェクトを選択:
プルダウンをクリックするとメニューが開きます。- はじめて利用する場合や、今回のアプリ専用にプロジェクトを分けたい場合は 「＋ プロジェクトを作成」 をクリックします。
- すでに作成済みのプロジェクト（例:
testなど）がある場合は、そのプロジェクト名をそのまま選択しても構いません。
④ プロジェクトが作成されたら「キーを作成」を実行する
「＋ プロジェクトを作成」をクリックすると、Google側で自動的にプロジェクトの立ち上げ処理が行われます。
数秒待つと、画面上部に 「✓ 新しいプロジェクトが作成されました」 という完了通知が表示され、プロジェクト欄に作成されたプロジェクト（例: test など）が自動でセットされます。
あとは、ダイアログ右下の 「キーを作成」 ボタンをクリックするだけです！
⑤ 発行されたAPIキーをコピーして大切に控える
ボタンを押すと、数秒であなた専用の API キー（AIzaSy... から始まる長い文字列）が生成・表示されます。
表示されたキーの横にある コピーアイコン をクリックし、メモ帳などに一時的に貼り付けて大切に控えておきましょう。
このAPIキーは、GoogleのAIサーバーを利用するための「あなた専用のパスポート」です。他人に教えたり、公開チャットやSNS等に貼り付けたりしないよう厳重に管理してください。
ステップ3：【重要】APIキーの安全な守り方（Vercel Functionsの活用）
APIキーを手に入れたら、すぐにコードの中に apiKey = "AIzaSy..." と直接書き込みたくなりますよね。
しかし、それは絶対にやってはいけません！
なぜ直接書いてはいけないのか？
第四講・第五講を思い出してください。私たちは手元のコードを GitHub に Push（送信） して、Vercelと連携させています。
もしコードの中に生のAPIキーを直接書いてしまうと、GitHubを通じて世界中の人（そして世界中を巡回している悪質なBOTプログラム）にあなたの鍵が丸見え になってしまいます。
「でも、ブラウザから直接呼ぶと鍵が見えちゃうのでは？」
ここで、Web開発における非常に重要なセキュリティの壁にぶつかります。
もしフロントエンド（Vueの画面側）でキーを読み込んで直接GoogleのAPIを呼んでしまうと、ブラウザの通信（開発者ツールのNetworkタブ）を覗くだけで、APIキーが誰にでも見えてしまう のです。
【危険な例：ブラウザから直接呼ぶ場合】
ブラウザ（スマホ） ──(APIキー付きで通信)──> Google Gemini API
▲
└─ 通信を覗けば誰でもAPIキーを抜き取れてしまう！
では、どうすれば安全にAIを利用できるのでしょうか？
解決策：秘密鍵を使う場所を「ブラウザ」から「Vercelのサーバー側」に移す！
秘密鍵をAIに渡せなくなるわけではありません。
「秘密鍵を使う場所を、ユーザーのスマホ画面（ブラウザ）ではなく、Vercelのサーバー側に移す」 のが現代のWeb開発における王道の正解です！
【安全な構成：Vercel Function（サーバーレス）を中継】
ブラウザ（スマホ）
│
▼ ①「ユーザーの入力メッセージ」だけを送る（APIキーは一切持たない！）
Vercel Function（サーバー側：/api/ask）
│
▼ ② 安全に保管された process.env.GEMINI_API_KEY を使ってAIへ投げる
Google Gemini API
│
▼ ③ AIの回答を受け取って、スマホへ返す
ブラウザは自分のVercelサーバー（/api/ask）に入力メッセージを送るだけで、APIキーの存在すら知りません。これなら、世界中にアプリを公開してもAPIキーが盗まれる心配はゼロになります！
Vercel側のサーバーロジックはどこに書くの？
「サーバー側を作るなんて、難しいバックエンドの知識が必要なのでは…？」と不安になるかもしれませんが、心配無用です！
Vercelには、「プロジェクト直下に api/ フォルダを置くだけで、自動的にサーバーレス処理（Vercel Functions）として動かしてくれる」 という魔法のような標準機能が備わっています。
Vue/Viteのプロジェクトであれば、ルート直下に以下のようにファイルを配置します：
my-app/
├── src/ ➔ フロントエンド（Vueの画面）
├── public/
├── api/ ➔ ★ここ！サーバー側として実行されるフォルダ
│ └── ask.js ➔ 自動的に「/api/ask」というAPIエンドポイントになる！
├── .env ➔ 秘密鍵（手元のローカル動作用）
├── .gitignore ➔ .env を除外指定
├── package.json
└── vite.config.js
どうやってVercelに認識させるの？
何もしなくても、Vercelが自動で認識します！
プロジェクト直下に api/ フォルダを作ってGitHubにPushするだけで、Vercelが「お、api フォルダがあるな！サーバー側だな！」と検知し、自動的に https://あなたのドメイン.vercel.app/api/ask をAPIとして生やしてくれます。
公式ドキュメントや解説記事でも、Vercelの最も基本的な標準機能として紹介されています：
手順A：.gitignore の確認
まずは、VS Code でプロジェクトフォルダーを開き、ファイル一覧にある .gitignore をクリックして開いてみてください。
ViteやVue公式ツールで作成したプロジェクトの場合、初期状態で以下のように書かれているはずです：
.env
.env.local
.env.*.local
node_modules
dist
このように .env や .env.local という記述があれば、「Gitはこのファイルを追跡・送信しない」 という設定がすでに効いているので安心です！
手順B：手元用の .env ファイルを作成する
プロジェクトの最上位（package.json がある一番上のフォルダー直下）に、新しく .env という名前のファイルを作成します。
ファイルの中に、以下のように記述して保存（Ctrl + S）します：
GEMINI_API_KEY=あなたのAPIキーをここに貼り付け
※例：GEMINI_API_KEY=AIzaSyDXXXXXX_YYYYYYY
サーバー側（Node.js環境）で読み込むため、接頭辞の VITE_ を外した本物の環境変数名 GEMINI_API_KEY として安全に管理します。
ステップ4：AIに対話でAPI組み込みをオーダーする！
準備が整いました！いよいよ、あなたの相棒である生成AI（Cline や Antigravity）に、Gemini API の組み込みを丸投げしてみましょう。
コードの書き方やGoogleのライブラリの使い方は、相棒AIがすべて熟知しています。私たちは 「やりたいことの要望」 を日本語で伝えるだけです。
AIへのプロンプト例（指示メッセージ）
VS Code の AI チャットパネルを開き、以下のような指示文を送ってみてください。
（※ここでは最も人気で汎用的な 「AIチャット / なんでも相談アプリ」 の例を紹介しますが、ご自身の好みに合わせてアイデア部分を自由に書き換えてOKです！）
Google Gemini API を組み込んだAIアプリを作りたいです！
セキュリティのため、APIキーはブラウザ側には持たせず、Vercel Functions（サーバーレスAPI）経由で呼び出す構成にしてください。
【作りたいアプリのアイデア】
ユーザーが入力したメッセージ（質問、お悩み相談、アイデア出し、日々の雑談など）に対して、Geminiが親身に・分かりやすく返答してくれるシンプルな「AIチャット / 相談アプリ」にしてください。
【やりたいこと】
1. プロジェクト直下に `api/ask.js` を作成し、サーバー側で `process.env.GEMINI_API_KEY` を使ってGemini APIを呼び出すVercel Serverless Functionを実装してください。
2. 使用するGeminiモデルは、本講座おすすめの `gemini-2.5-flash` を指定してください。
3. 必要なライブラリのインストールが必要なら自動でコマンドを実行してインストールしてください。
4. フロントエンド（Vue画面）側は、APIキーを一切持たず、`/api/ask` にユーザーの入力テキストだけをPOST送信して回答を受け取るようにしてください。
5. 画面に入力フォーム（テキスト入力欄）と送信ボタンを配置し、Vuetifyで見やすいスマホ向けの綺麗なチャット風デザインにしてください。
6. AIが回答を考えている間は、「AIが考えています…」といったローディングスピナー（アニメーション）を表示してください。
7. ローカル環境（`npm run dev`）でも `/api/ask` が動くように、Viteのプロキシ設定やモック/サーバー処理を適切に設定してください。
8. エラーが発生した場合は、画面に分かりやすくエラーメッセージを表示してください。
コードを読まなくても動くように、必要なファイルの作成・修正をすべて進めてください！
💡 別のアプリを作りたい場合も、プロンプトを少し変えるだけでOK！
例えば「ボタンを押すだけで動くアプリ」にしたい場合は、【作りたいアプリのアイデア】の部分を以下のように変えるだけで、AIが自動でその通りの画面とロジックを組んでくれます：
- 今日の名言・やる気アップアプリ: 「ボタンを押すと、偉人の名言や今日を前向きに過ごすアドバイスを毎回Geminiが考えて教えてくれるアプリ」
- 今日の献立提案アプリ: 「ボタンを押すと、冷蔵庫によくある食材を使った美味しい晩ごはんレシピを1品提案してくれるアプリ」
- オリジナル占いアプリ: 「ボタンを押すと、今日の運勢やラッキーアイテムを面白おかしく占ってくれるアプリ」
AIが自動で進めてくれること
メッセージを送信すると、AIは自律的に以下の作業を順番に実行してくれます：
-
Vercel Functions（
api/ask.js）の作成:
プロジェクト直下にapi/フォルダを作り、Node.js環境で動くサーバーレス関数を作成します。process.env.GEMINI_API_KEYを使ってGeminiへ安全に問い合わせる中継処理が自動で書かれます。 -
必要なパッケージの自動インストール:
ターミナルで@google/genaiなどのSDK導入コマンドを実行します。 -
UI（Vueコンポーネント）のアップデート:
Vue側は/api/askへメッセージをPOSTするだけのクリーンな設計になり、Vuetifyのデザインを活かした入力欄、送信ボタン、ローディングアニメーションが配置されます。
AIから「ファイルを変更してよいですか？」「コマンドを実行してよいですか？」と許可を求められたら、「Approve（承認）」 または 「Always Allow」 を押して進めましょう！
ステップ5：ブラウザで動かしてみよう！
AIの作業が完了したら、ターミナルでローカル開発サーバーを起動して確認します：
npm run dev
ターミナルに表示されたURL（例: http://localhost:5173/）をブラウザで開きます。
感動の瞬間！
画面の入力欄に好きなメッセージ（例:「今日の夕飯のアイデアを教えて！」「最近ちょっと疲れてるんだけど励まして」など）を入力して、送信ボタンをタップしてみてください。
- ボタンを押すと、スピナーがくるくると回り「AIが考え中…」とローディング状態になります。
- 1〜2秒後……画面にスッと Geminiがその場で思考した温かいオリジナル回答 が表示されます！
- もう一度別の質問や言葉を送ると、今度はまったく新しい視点から的確に応答してくれます。
あらかじめ用意された固定のテキストを表示するだけだったアプリとは違い、「本当に画面の向こうに知能が存在して、自分のために言葉を紡いでくれている」 という強烈な実感が湧いてくるはずです！
💡 もしエラーが出たら？（バイブコーディングの極意）
もし「APIキーが無効です」や画面が真っ白になるなどの不具合が出ても、落ち込む必要はまったくありません。
- ブラウザの画面に赤いエラー文字が出ていたら、その英語をそのままコピーする
- もしくは
F12キー（MacはCmd + Option + I）を押して「コンソール（Console）」タブに出ている赤文字エラーをコピーする - AIチャットに 「ボタンを押したらこんなエラーが出たよ。直して！」 と貼り付けて投げるだけ！
AIはエラーログを見れば原因を一瞬で特定し、自動で設定やコードを修正してくれます。これこそがバイブコーディングの醍醐味です。
ステップ6：Vercel にもキーを設定して、スマホから本番体験！
手元のパソコンでAIが動いたら、第五講で全世界に公開した Vercelの本番アプリ でもGeminiが動くように設定しましょう！
ここで1つ疑問が浮かびます：
「手元の
.envは GitHub に送信（Push）していないよね？
じゃあ、Vercelのサーバー（/api/ask）はどうやってGeminiのAPIキーを知るの？」
鋭い疑問です！
Vercelには、サーバー環境へ安全にキーを渡せる 「Environment Variables（環境変数設定）」 という機能が備わっています。
① Vercel のダッシュボードを開く
- https://vercel.com/dashboard にアクセスします。
- 第五講でデプロイしたあなたのプロジェクトをクリックします。
② 環境変数の設定画面へ移動する
プロジェクトの管理画面が開いたら、左側メニュー一覧にある 「Environment Variables」 をクリックします。
上記のように、環境変数の一覧画面が表示されます。
画面右上にある白いボタン 「Add Environment Variable」 をクリックしましょう。
③ APIキーを追加する
「Add Environment Variable」という設定モーダルがポップアップします。
以下のように各項目を設定します：
-
Type（変数の種類）:
デフォルトで選択されている 「Secret」 のままでOKです。
（※「パスワード、APIキー、トークン向け。保存後は値を再表示できない安全設計」となっており、今回の秘密鍵に最適です） -
Key:
GEMINI_API_KEYと入力します。
（※サーバー側のapi/ask.jsでprocess.env.GEMINI_API_KEYとして安全に読み込むため、VITE_は付けずにこの名前にします） -
Value:
ステップ2でコピーしたあなたの Gemini APIキー（AIzaSy...から始まる文字列）を貼り付けます。 -
Environments:
どの環境で使うかを選択します（本番環境のProductionや、開発用も含めた環境を選択できます）。
入力できたら、右下の白い 「Save」 ボタンをクリックして保存します！
💡【フロントエンド用とサーバー用の環境変数の違い】
もしVue/Viteのフロント画面側で使う公開用の設定値（APIのURLなど）であれば、Key に VITE_API_URL のように VITE_ を付けて登録し、コード側からは import.meta.env.VITE_API_URL で取得します。
ただし、フロント用の変数はブラウザの通信等から覗けてしまうため、APIキーや秘密鍵のような機密情報は、今回のように VITE_ を付けずにサーバー側（Vercel Functions）専用として登録するのが鉄則 です。
④ 変更を本番サイトに反映させる（再デプロイ）
環境変数を新しく追加・変更した後は、その内容をアプリに反映させるために 再デプロイ（Redeploy） が必要になります。
- 左側メニュー（または上部タブ）の 「Deployments」 を開きます。
- 一番上にある最新のデプロイの右端にある 「︙（3点リーダー）」 をクリックします。
- 「Redeploy」 をクリックし、確認画面でもう一度「Redeploy」を押します。
数十秒待つとデプロイが完了します！
Vercelが自動的に api/ask.js をサーバーレスAPIとして稼働させ、安全に GEMINI_API_KEY を注入してくれます。
⑤ スマホ実機で開いてみよう！
スマホのホーム画面に追加したアプリ（または発行されたVercelのURL）を開いてみてください。
スマホからメッセージを送ると……手元のパソコンと同じように、スマホの画面上で本物のGeminiがリアルタイムに応答を生成して返してくれます！
しかも、ブラウザの開発者ツールをどんなに調べられても、APIキーはVercelのサーバーに守られているため絶対に流出しません。
これで、あなただけの 「世界中どこからでもスマホで使える、安全で最先端なAI搭載Webアプリ」 が完全に完成しました！
【おまけコラム】Vercel vs Netlify 徹底比較（ホスティングの選び方）
フロントエンドの無料Webホスティングといえば、今回の Vercel と並んで必ず名前が挙がるのが 「Netlify（ネットリファイ）」 です。
どちらも現代のWeb開発をリードする素晴らしいプラットフォームであり、基本性能は甲乙つけがたいほど充実しています。まずは客観的な事実ベースで、両者の特徴と機能の違いを整理してみましょう。
1. 両者の共通点と設計思想の違い
-
共通する強み:
どちらもgit pushするだけで自動ビルド・自動デプロイが走り、PRごとにテスト用のプレビューURLを発行してくれます。また、世界中のCDNから静的ファイルを高速配信する仕組みも共通しています。 -
Vercelの思想:
Next.jsやViteなどのモダンフロントエンド、そしてサーバーレスAPI（Vercel Functions）の開発体験に特化しています。管理画面のUIも極めて洗練されており、デプロイ履歴、ログ、環境変数を直感的に確認できます。 -
Netlifyの思想:
静的サイト（Jamstack）やコーポレートサイトの運用に強く、お問い合わせフォームをHTMLだけで簡単に設置できる「Netlify Forms」など、Webサイト運用に便利な独自機能を豊富に備えています。 -
【重要】無料プランでの「商用利用」の違い:
見落とされがちですが非常に大きな違いが 「商用利用の可否」 です。- Vercel: 無料のHobbyプランは 「非商用（個人の趣味・学習・プロトタイプ）」限定 です。広告掲載や課金、企業の受託開発などで商用利用する場合は、有料のProプラン（月額20ドル〜）が必要になります。
- Netlify: なんと 無料のStarterプランであっても商用利用が認められています！ 個人開発で最初からアフィリエイト広告を貼ったり、小規模な有料SaaSを完全無料で立ち上げたい人にとっては、Netlifyのこの太っ腹さは絶大なアドバンテージです。
2. Vercel vs Netlify 比較表
| 比較項目 | Vercel | Netlify |
|---|---|---|
| 向いている用途 | AIアプリ、動的Webアプリ、Next.js、頻繁に更新する個人開発 | 静的サイト、コーポレートサイト、フォーム中心のサイト |
| 無料での商用利用 | △ 原則不可（Hobbyプランは非商用・個人限定） | ◎ 可能（無料プランでも商用利用・収益化OK！） |
| GitHub連携 | ◎ git push で自動ビルド・自動デプロイ | ◎ 同様に自動デプロイ対応 |
| プレビューデプロイ | ◎ PRごとにPreview URLを自動生成 | ◎ Deploy Previewを自動生成 |
| 管理画面 / UI | ◎ 洗練されていて直感的。Deployments、Functions、環境変数、ログを追いやすい | ○ シンプルで分かりやすい。FormsなどNetlify独自機能の管理もしやすい |
| 静的ファイル配信 | ◎ グローバルCDN配信 | ◎ グローバルCDN配信 |
| サーバーレスAPI |
api/ フォルダを置くだけ で直感的に作れる |
デフォルトで netlify/functions/ を利用 |
| フォーム機能 | ―（自前でAPIを用意） | ◎ Netlify Forms（HTMLだけでフォーム受付可能） |
| AI趣味開発との相性 | ◎ 環境変数 + Functionsの構成がシンプルで迷わない | ○ 十分可能だが独自概念や設定が少し増える |
| 一番の強み | 開発体験（DX）・Functions・Next.js・UIの洗練度 | 無料での商用利用・静的運用・Netlify Forms |
3. 用途に合わせた使い分けの結論
-
静的なコーポレートサイト、フォーム主体のサイト、または「無料で最初から商用化・収益化したい」場合:
無料枠で商用利用OKな Netlify が非常に強力でコストパフォーマンス抜群の選択肢になります。 -
本講座のような「自分や身近な人のためのAIアプリ」や、スマホ向けに頻繁に改善を繰り返す趣味開発:
サーバーレスFunctions（api/）の扱いやすさや、反復開発のテンポの良さから、Vercel が最も扱いやすくおすすめです。
（おまけ）筆者の実感：同じVue/Viteアプリで比較すると、Vercelの方が画像表示が速かった
筆者は、まったく同じVue/ViteアプリをVercelとNetlifyの両方にデプロイして比較したことがあります。
その環境では、写真をはじめとする静的ファイルの表示は、Vercelの方が明らかに軽快に感じられました。
もちろん、CDNのキャッシュ状態、アクセス地域、回線、画像サイズなどによって結果は変わるため、「Vercelが常にNetlifyより高速」と一般化することはできません。
ただし、筆者の実環境では、
Git Push → デプロイ → スマホで確認 → 再修正
という反復開発のテンポも含めて、Vercelの方が快適でした。
本講座では、こうした実体験に加えて、管理画面の分かりやすさ、Vercel Functionsの扱いやすさ、環境変数管理、AIアプリとの相性を総合的に考え、Vercelを採用しています。
謝辞・参考情報について
本講で解説した「Vercel Functions」を活用した安全なAPIキー運用やサーバーレス構成、およびホスティングサービスの比較知見について、以下の公式ドキュメントおよび技術記事を参考にさせていただきました。分かりやすい知見を惜しみなく共有してくださっている著者の皆様に心より感謝申し上げます。
- Vercel Functions 公式ドキュメント （Vercel Inc.）
- Vercelで始める現代的フロントエンド運用入門 （@automation2025 様）
- 【2025年版】Netlify vs Vercel徹底比較｜SaaSを作るならどっちを選ぶ？ （伊東雄歩 様）
第六講のまとめ
今回の一連のハンズオンで、あなたの趣味開発アプリに本物の「知能」と「プロ級のセキュリティ」が宿りました！
| 手順・仕組み | 活用ツール | 実現したこと / メリット |
|---|---|---|
| AIプラットフォーム | Google AI Studio | 無料枠でクレジットカード不要、高速なGemini APIキーを即時発行 |
| 安全なAPI中継 | Vercel Functions (api/) |
ルート直下に置くだけで自動サーバーレス化。ブラウザに秘密鍵を一切渡さない最強の防御 |
| 秘密情報の保護 |
.env と .gitignore
|
APIキーをGitHubに流出させず、ローカルと本番で完全分離管理 |
| AIによる自律実装 | Cline / Antigravity | バックエンドの知識がなくても、自然言語の指示だけでサーバーレスAPIからUIまで全自動構築 |
| バイブコーディング | 対話型デバッグ | エラーが出てもログをAIに投げるだけで即座に自律修正 |
| クラウド本番連携 | Vercel Environment Variables | 本番サーバーに安全にキーを注入し、スマホ実機から安全にAIアプリを駆動 |
手元のパソコンの中での実験にとどまらず、現場の開発者と同じ「サーバーレス中継による堅牢なセキュリティ」まで一気通貫でやりきったことで、あなたは 「実用的なAIアプリを自信を持って世界へ公開できる力」 を手に入れました！
あとがき：AI駆動趣味開発講座の完走によせて
全六講にわたる 「AI駆動趣味開発講座」 を最後までお読みいただき、そして実際に手を動かして完走された皆様、本当にお疲れ様でした！
第一講で環境構築からスタートし、
- 第一部: Vue.jsと相棒AIによるモバイルWebアプリの立ち上げと、反復改善する「バイブコーディング」の実践
- 第二部: コードが読めないからこその命綱となるGit/GitHub管理、そしてVercelによる世界公開とスマホアプリ化
- 第三部: Google AI StudioからGemini APIを取得し、Vercel Functionsで秘密鍵を堅牢に守りながら知能を吹き込む実践
プログラミング言語の文法や難しいインフラ設定に頭を抱えることなく、「自然言語でAIと対話し、アイデアを即座に形にするものづくり」 の圧倒的な楽しさと可能性を体感していただけたのではないでしょうか。
■ 筆者からの切なる願い：「AIはあくまで補助。いつか必ず、コードをしっかり学んでほしい」
最後に、完走された皆様へ、筆者からどうしてもお伝えしたい 「本音のメッセージ」 があります。
本講座では「コードを一切読まない・書かない」スタイルを提唱してきました。これは、プログラミングへの苦手意識や挫折の壁を取り払い、「まずは動く楽しさを知る」ための最初の一歩・導入としては最高の体験です。
しかし、正直に申し上げます。
このやり方を「メインの学習法」にしていくのは無理があります。いつか必ず限界が来ます。
本講座のようなアプローチは、あくまで強力な補助として使っていただくのがベストです。
アプリの規模が大きくなったり、データベースを本格的に扱ったり、思わぬバグやセキュリティの壁にぶつかったとき、「裏で何が起きているのか」を全く理解できていない状態では、AIに的確な指示を出すことすらできなくなってしまいます。
本当に自由にものづくりをしたい、トラブルを自力で解決したい、そして何より一生モノのスキルを手に入れたいなら、遠回りに見えてもまずはコードを泥臭く基礎から学ぶことが不可欠です。
筆者がおすすめする、しっかり力をつけるための「最低限のステップ（土台）」は次のとおりです：
-
まずは C言語 からやる
コンピュータのメモリ構造やポインタ、ハードウェアに近い低レイヤーの挙動を学ぶことで、「コンピュータが物理的にどう動いているか」という根本的な基礎体力が身につきます。 -
次に Python をやる
洗練された文法でアルゴリズムやデータ構造、論理的な処理の流れを学び、バックエンドやデータ解析・AIの基礎を固めます。 -
そして HTML / CSS / JavaScript (TypeScript) をやる
Webブラウザの仕組み、DOM操作、スタイリング、そしてTypeScriptによる静的型付けの堅牢性を学び、Webアプリケーションの全体像を掴みます。 -
そのうえで、AIを「補助」として使いこなす！
基礎が身についているからこそ、AIが出してきたコードの意図や欠陥が一瞬で見抜け、AIを「自分専用の超優秀なアシスタント」として120%活用できるようになります。
また、開発にはプロジェクトの動かし方やアジャイル開発の手法も必要になるため、（資格の肩書きという意味ではなく体系的な知識を網羅するために）できれば「基本情報技術者試験」も受けておくのがおすすめです。
(※これでもまだ「最低限のスタートライン」です。実際のものづくりではここからさらに各種フレームワークもたくさん学んでいく必要がありますが、この土台さえあればどんな技術も怖くありません)
人生で一番役に立つのは、コードを通して鍛えられる「論理的思考力」
そして、なぜここまでコードの基礎学習をおすすめするのか。
それは、コードを学ぶ過程で鍛えられる論理的思考力こそが、どんな職種・仕事においても人生で一番役に立つ最強の武器になるからです。
プログラミングとは、「目的を達成するために、課題を細かく分解し、順序立てて、因果関係を正しく組み立てる」思考の訓練そのものです。
- 問題解決力: 「なぜエラーが起きているのか？何がボトルネックか？」を感情や勘ではなく、事実と論理で突き止める力
- 構造化・設計力: 複雑で曖昧な業務や課題を整理し、「どうすれば再現性高く効率化できるか」を組み立てる力
- 本質を見抜く力: AIが生成したもっともらしい答えや数字の裏にあるロジックを検証し、正しく使いこなす力
この「論理的思考力」さえ身についていれば、エンジニアはもちろんのこと、営業、企画、マーケティング、事務、教育、医療、経営……現代社会のどんな仕事や日常の意思決定においても、あなたを生涯支え続ける圧倒的な強みになります。
もう一つの大きなメリット：「AI頼みの薄っぺらいIT企業」を見抜き、正しく技術評価ができる
生成AIブームに乗って、APIをつないだだけの薄いサービスを「最先端AI」と大げさに売る企業も増えています。
本当に問題なのはAIを使うことではなく、認証・セキュリティ・秘密情報管理・エラー処理すらまともにできていないのに、AIという言葉だけで高額なサービスとして売ることです。
そんなWebサービスを見ると、正直 「客をなめてるのか」 と思います。
だからこそ、コードやフレームワークの基礎を学ぶことに決定的な意味があります。基礎を知っていれば、あらゆる場面で「本当の価値」を見抜けるようになるからです：
-
納品コードや中身が見える場合
受託開発やPoCなどでデモ納品されたコードを見たとき、「そのコードが安全か、セキュリティ対策はしっかりしているか、設計として妥当か」 を自分の目で直接評価できます。「AIに適当に吐かせただけでエラー処理すら考慮されていない粗悪なコード」を掴まされても、基礎が分からなければカモにされて終わりです。 -
SaaSなどでコードが見えない場合
たとえ相手のソースコードが見えなくても、プログラミングや様々なフレームワークを学んでいれば、「この機能なら、あのフレームワークを使って自作した場合、開発費はどれくらいで、月々のランニングコスト（サーバー代やAPI費用）はいくらで済むか」 という現実的な原価・相場感が頭の中に出来上がります。
相手の言い値や営業トークに惑わされず、「自分で作った場合の金額やランニングコストと比較して、本当にこのサービスに払う価値があるか？」を冷静に技術的・経済的に天秤にかけることができる——。
余談ですが、これらに関連して、実際に筆者は、業務で納品されたコードを見て、あまりにひどすぎるのでほぼ作り直した経験もあります。
さらに、自社開発AIです！と豪語したものの実際には海外のオープンソースのLLMをファインチューニングしたものでしたね。滅びろ。法で裁けない悪だろ。
それに今は、コンサルですら裏でAIに聞いていて、くっそ薄っぺらいことしか言わん。実態を学ぶことはめっちゃ大切。なにがDX支援だよ。金取る資格ないですわ。ほぼ詐欺。
単にAIにコードを書かせる力ではなく、「コードそのものを正しく評価できる審美眼」 と 「内製した場合の開発費・運用費と比較できる地力」。これこそが、作る側でも発注する側でも、あなたを一生守り続ける最大の武器になります。
■ 次のステージへ！おすすめの本格学習シリーズ
「動く楽しさ」を知った今だからこそ、次はぜひ 「中身の仕組みを理解する本格的な学び」 へとステップアップしてみてください！
筆者が執筆している以下の2大講座が、あなたの次の冒険の確かな道しるべになります：
① AIの「仕組みと理論」を根本から理解したい方へ
👉 人工知能概論【まとめ】— 講座一覧
単にAIを「使う側」にとどまらず、「機械学習・深層学習・画像認識・自然言語処理・LLM・RAG」といった最先端AI技術の仕組みや歴史、数学的背景、セキュリティリスクまでを体系的かつ分かりやすく解き明かす全17講の決定版です。どんな職種でも絶対に役に立つ「本物のAIリテラシー」が手に入ります。
② 本格的な「プログラミングとWeb開発」を習得したい方へ
👉 DRF × Vue.js 実践講座【まとめ】— 講座一覧
Pythonの強力なWebフレームワーク「Django REST Framework (DRF)」と「Vue 3 + TypeScript」を組み合わせ、コードを一行一行理解しながら、本格的なデータベース連携、認証、フルスタックWebアプリの構築までを徹底的に習得するプロ志向の実践講座です。
生成AIという最高の相棒を手に入れたあなたなら、もうプログラミングを恐れる必要はまったくありません。
趣味開発のワクワクを胸に、ぜひ「コードを学ぶ」「AIの真理を学ぶ」新しい扉を開いてみてください。あなたのこれからの学びと挑戦を、心より応援しています！