🌤
天気予報アプリ
API連携の王道題材。位置情報と外部データ活用を学ぶ
どんなもの?
現在地や指定した地域の天気予報を表示するアプリ。天気APIからデータを取得して見やすく表示します。外部APIの使い方・位置情報の取得・データの見せ方という、Web開発の基礎が詰まった王道の学習題材。自分好みの天気アプリが作れます。
こんな人におすすめ
API連携を学びたい初心者。実用的な小品を作りたい人
🎯 完成すると手に入るもの
現在地や指定地域の天気予報を表示する自分好みの天気アプリが手に入ります。外部API連携という、Web開発でよく使う基礎技術が身につく王道の学習題材です。
おすすめの技術スタック
天気アプリは「APIからのデータ取得」が中心の軽量アプリ。実装はCursorに任せ、公開はCloudflareで無料・高速に。よく見る地点を保存したくなったらSupabaseを足す、シンプルな構成です。
費用の目安
✓ 完全無料で始められます
完全無料で作って公開できます。天気APIも無料枠のあるサービスを選べば費用はかかりません。
| 項目 | 費用 | 補足 |
|---|---|---|
| Bolt.new / Cursor | 無料プランでOK | 無料枠で作れます |
| Cloudflare(公開先) | 無料 | 個人利用は無料枠内 |
| 天気API | 無料枠あり | OpenWeatherMap等に無料枠 |
| GitHub | 無料 | 個人利用は無料 |
必要なアカウント
開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。
必要なAPIキー・設定
APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。
天気APIキー 取得先: OpenWeatherMap等の天気APIサービス(登録後に発行) 天気データを取得するための鍵。無料枠のあるサービスが多いです。
作り方: まずこのプロンプトをClaudeに送る
細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。
📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、天気予報アプリの作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。
【私の状況】
- プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。
- パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください
- AIエディタ「Cursor」をインストール済みです。
- 必要な無料アカウント(このページに記載のもの)は作成済みです。
【作りたいもの】
- 現在地や指定した地域の天気予報を表示するアプリ。
- 無料の天気API(OpenWeatherMap等)からデータを取得して表示したい。
- 今日・週間の予報を、アイコンや色で直感的に見やすく表示したい。
- 現在地の天気を自動表示し、地域検索もできるようにしたい。
- APIキーを安全に扱う方法(環境変数)も教えてほしい。
- 最終的にCloudflareで無料公開したい。
【進め方のお願い】
1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。
2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。
3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。
4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。
5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。
6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。
まずは【1】の全体像から教えてください。 ※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。
つまずきやすいポイント
- 最初の環境構築でエラーが出やすいです。エラー文をそのままClaudeに貼れば、原因と対処をほぼ特定してくれます。
- APIキーやパスワードはコードに直接書かず「環境変数」に入れます。GitHubに公開する際に漏らさないよう、Claudeに「秘密情報の安全な扱い方」も聞きましょう。
- 天気APIの無料枠には「1日あたりの呼び出し回数制限」があります。上限をClaudeに確認して、超えない作りにしましょう。
収益化のヒント
Cursor・Cloudflareの導線。API連携の入門題材として初心者記事の需要が高い。