28記事目（やってよかった財テクシリーズ）
こんばんは。いつも読んでいただきありがとうございます。
趣味で財テクや便利なサービスを試しています。techemoです。
今日はGoogle AI Studioを使って無料でWebアプリを作成・公開した体験を紹介します。
米国株（ドル建て）の価格変動だけでなく、為替レート（USD/JPY）の変動を掛け合わせた「日本円での評価額」の推移をチャート化するアプリを作ってみました
etf-tracker-421439986771.asia-northeast1.run.app
「プログラミングできないけどWebアプリ作ってみたい」
「AIに作らせたコードって本当に動くの？」
そんな疑問を持っている方、ぜひ参考にしてください！
Google AI Studioとは
GoogleのAIモデル「Gemini」を無料で使える開発環境です。
ChatGPTのようにチャットで指示を出すだけでコードを書いてくれます。
・無料で使える（重要！）
APIキーも無料で発行可能。個人開発なら十分な無料枠があります
・日本語で指示できる
「こんなアプリ作って」と自然な日本語で伝えるだけでOK
・コード生成精度が高い
Geminiは最新の技術にも対応しており、React等のモダンなコードも生成できます
🤖 無料で使えるAI開発ツール比較
無料/有料
長文対応◎
Artifacts機能
日本語対応◎
今回作ったアプリ
「円建て米国ETFトラッカー」を作りました。
米国ETF（VOO、VT、SPYDなど）の価格推移を円建てで確認できるWebアプリです。
ドル建ての価格とドル円為替を自動取得して、円換算した価格推移をグラフ表示します。
なぜ作ったか？
米国ETFに投資していると「ドル建てでは上がってるけど円換算だとどうなの？」
という疑問がよく出てきます。これを一目で確認できるツールが欲しかったんです。
開発の流れ
プログラミング経験がなくても、以下の流れで作れました。
🔧 開発フロー（全5ステップ）
最初のプロンプトはこれだけ：
APIでドル建ての価格推移を取得し、合わせてドル円の為替推移を取得して
円建ての価格推移を確認できるようにしてください
まずはVOOで作ってみてください
これだけで動くコードのベースが出てきました。あとは「エラーが出た」「こう直して」と伝えながら修正していくだけです。
GoogleAIStudio内でデプロイまで完結させたかったのですが、エラーがループにハマってしまい断念しました
アプリの構成ファイルをダウンロードしてGoogleAntigravityでセキュリティ対策とデプロイまでを実行しました
必要なファイルのインストールや実行環境を整えるところもやってくれます
つまずきポイント
正直、スムーズにはいきませんでした。でもエラーもAIに聞けば解決策を教えてくれるので、なんとかなります。
⚠️ 実際につまずいたポイントと解決策
❌ つまずき①：Node.jsが入っていない
サーバーを動かそうとしたら「npm コマンドが見つかりません」
✓ 解決： winget install -e --id OpenJS.NodeJS.LTS でインストール → ターミナル再起動
特に④が厄介でした。
セキュリティを強化するためにhelmetというライブラリを入れていたようですが、
設定が厳しすぎてGoogle FontsやTailwind CSSまでブロックしてしまっていたみたいです。
「動くはずなのに動かない」原因がセキュリティ設定だったとは…
エラーメッセージをよく読んで、AIに「このエラーの原因は？」と聞けば解決策を教えてくれます。
エラーメッセージは友達です！
費用は？
開発費用：0円で作れました。
💰 費用内訳
| 項目 | 費用 |
|---|---|
| Google AI Studio（コード生成） | 無料 |
| Google Antigravity（コード修正） | 無料 |
| Google Cloud Run（サーバー） | 無料枠内 |
| Yahoo Finance API（データ取得） | 無料 |
| 合計 | 0円 |
※ Cloud Runは月200万リクエストまで無料。個人利用なら十分すぎる枠です
運用上の注意点：
Cloud Runには無料枠がありますが、万が一のためにGoogle Cloud Consoleで予算アラートを設定しておくと安心です。
「月500円を超えたら通知」のように設定できます。
使ってみた感想
良かった点
・プログラミング未経験でも本格的なWebアプリが作れた
・エラーが出てもAIに聞けば解決策がわかる
・無料でここまでできるのは本当にすごい
・自分専用のツールを作れる達成感
難しかった点
・環境構築（Node.js、gcloudコマンドのインストール）が初心者には難関
・セキュリティ設定のバランスが難しい（厳しすぎると動かない）
・デプロイは何度もやり直しが必要だった
・エラーメッセージを読み解く力は多少必要
📊 難易度評価（5段階）
環境構築とデプロイが山場。ここを乗り越えれば達成感あり！
こんな人におすすめ
・自分専用のツールを作りたい人
・プログラミングに興味はあるけど何から始めていいかわからない人
・AIの力を借りて何か形にしてみたい人
・投資関連のツールを自作したい人
まとめ
Google AI Studioを使えば、プログラミング未経験でも無料でWebアプリが作れる時代になりました。
今回学んだことは3つ：
①セキュリティは大事（でも設定しすぎると動かなくなる）
②エラーメッセージは友達（よく読むと解決策が書いてある）
③環境構築（Node.jsやCLIツールの準備）も基本AIがしてくれる時代
「自分でもアプリが作れた」という体験は、思った以上に楽しいものでした。
興味がある方はぜひチャレンジしてみてください！
今回作ったアプリはこちら：
etf-tracker-421439986771.asia-northeast1.run.app
今日も最後までお付き合いいただきありがとうございました。
