天気APIを使ってWebアプリを作る方法（OpenWeatherMap実践）

天気API Webアプリイメージ 無料API活用

初心者でも作れる天気表示Webアプリの基本構成とAPI活用方法を解説

Web開発を勉強し始めると、

何か実際に動くものを作ってみたい

と思うことがあります。

ただ、最初から大きなサービスを作ろうとすると、意外と難しく感じることも多いです。

そんな時にちょうど良い題材が：

天気API

です。

理由としては、

  • 目に見えて結果が分かる
  • API通信を体験できる
  • JSONの理解にもつながる
  • HTML/CSS/JavaScriptをまとめて学べる

など、初心者向けの学習題材としてかなり優秀だからです。

天気Webアプリ画面

実際、自分も最初にAPIを触った時は：

画面に天気情報が表示された瞬間

がかなり面白く感じました。

特に最近は：

  • AI API
  • 音声認識API
  • 地図API

なども増えているため、API通信に慣れておくと個人開発の幅もかなり広がります。

この記事では、初心者向けに：

  • OpenWeatherMap APIの基本
  • 実際のWebアプリ作成例
  • JavaScriptでのAPI通信
  • JSONデータの扱い
  • よくあるエラー

などを、実際のコード例付きで分かりやすく紹介していきます。

このツール/APIが役立つシーン

天気APIは、思っている以上に色々な場面で利用されています。

例えば：

  • 天気アプリ
  • 旅行サイト
  • ダッシュボード
  • スマホアプリ
  • IoT表示パネル

などです。

また最近では：

  • 個人開発ポートフォリオ
  • API学習教材

としても人気があります。

OpenWeatherMapとは？

OpenWeatherMap公式サイト

OpenWeather は、世界中の天気情報を取得できる有名な天気APIサービスです。

無料プランもあり、初心者でも比較的始めやすいです。

取得できる情報もかなり多く、

  • 気温
  • 湿度
  • 天気
  • 風速
  • 地域情報

などを扱えます。

APIキー取得の流れ

基本的な流れは：

  1. アカウント作成
  2. APIキー発行
  3. JavaScriptから通信

です。

最近は無料枠でも十分学習できます。

ただし：

APIキー管理

はかなり重要です。

後半でも説明します。

実際にWebアプリを作ってみる

今回はシンプルに：

都市名を入力すると天気を表示する

Webアプリを作ってみます。

基本のHTML

まずは入力欄を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
</head>
<body>

<h1>天気検索</h1>

<input type="text" id="city" placeholder="都市名">
<button onclick="getWeather()">検索</button>

<div id="result"></div>

<script src="app.js"></script>

</body>
</html>

かなりシンプルですが、最初はこのくらいでも十分です。

JavaScriptでAPI通信

次にJavaScriptです。

async function getWeather() {

  const city = document.getElementById("city").value;

  const apiKey = "YOUR_API_KEY";

  const url =
  `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;

  const response = await fetch(url);

  const data = await response.json();

  document.getElementById("result").innerHTML = `
    <h2>${data.name}</h2>
    <p>気温: ${data.main.temp}℃</p>
    <p>天気: ${data.weather[0].description}</p>
  `;
}
JavaScript APIコード

ここで：

  • fetch
  • JSON
  • API通信

など、Web開発でよく使う要素が登場しています。

API通信の流れ

JSONレスポンスを見る

API通信すると、JSON形式でデータが返ってきます。

例えば：

{
  "name": "Osaka",
  "main": {
    "temp": 28
  },
  "weather": [
    {
      "description": "曇り"
    }
  ]
}

最初は少し複雑に見えますが、慣れてくると：

どこに何の情報があるか

が分かってきます。

JSONレスポンス例

実際に作ってみると理解が深まる

記事だけ読むより、

実際に画面へ表示される

体験をすると、API理解がかなり進みます。

自分も最初は：

JSONが意味不明

という状態でした。

ただ、実際に天気情報が画面へ表示された時、

あ、こうやってAPIを使うんだ

と少し理解できるようになりました。

CSSを少し加える

見た目を整えるだけでもかなり変わります。

body{
  font-family:sans-serif;
  padding:30px;
}

input{
  padding:10px;
}

button{
  padding:10px;
}

#result{
  margin-top:20px;
}

簡単なCSSでも、かなり見やすくなります。

天気アイコンUI

実際の使用例（実際のケース）

天気APIは意外と実用性があります。

旅行サイト

旅行サイトでは：

  • 現地天気
  • 気温
  • 雨情報

などを表示できます。

ダッシュボード

個人用ダッシュボードにも便利です。

例えば：

  • 時刻
  • ToDo
  • 天気

をまとめるケースです。

Raspberry Pi表示

小型ディスプレイへ天気表示する人もいます。

IoT学習との相性も良いです。

AI連携

最近はAIアプリでも：

現在の天気を取得

などでAPI利用されています。

メリット

API学習に向いている

結果が分かりやすいため、初心者向けです。

無料でも始めやすい

無料枠でもかなり試せます。

JSON理解が深まる

API通信とJSONはセットで学べます。

JavaScript学習にもなる

  • fetch
  • async/await
  • DOM操作

なども学べます。

デメリット・注意点

APIキー流出

かなり重要です。

例えば：

const apiKey = "123456";

をGitHubへ公開すると危険です。

無料枠制限

アクセス回数制限があります。

大量アクセス時は注意が必要です。

通信エラー

API側障害もあります。

常に正常とは限りません。

APIエラー例

他サービスとの比較

サービス特徴
OpenWeatherMap初心者向けで有名
WeatherAPIUIが分かりやすい
Tomorrow.io高機能
AccuWeather商用利用でも有名

初心者がよくハマるポイント

APIキー未反映

登録直後は数分待つ場合があります。

都市名ミス

例えば：

Tokyo

と：

tokyo

で挙動が変わるケースもあります。

CORSエラー

ローカル実行時に遭遇しやすいです。

初心者は：

壊れた？

と思いやすいですが、ブラウザ制限の場合もあります。

JSON構造が分からない

例えば：

data.weather[0].description

などで混乱しやすいです。

HTTPSが重要

API通信ではHTTPSがかなり重要です。

もしHTTP通信だと、公共Wi-Fi環境などで通信内容を盗み見される可能性があります。

特にAPIキー付き通信ではHTTPS利用が基本です。

HTTPS API通信

実際に少しずつ作るのがおすすめ

最初から：

  • デザイン完璧
  • 多機能
  • アニメーション大量

を目指すと、かなり大変です。

まずは：

動く

ところを目標にすると、理解しやすくなります。

発展例

慣れてきたら：

  • 5日間天気表示
  • 現在地取得
  • 天気アイコン表示
  • ダークモード
  • 多言語対応

なども追加できます。

モバイル天気アプリ

VPS公開も学習になる

作った後に：

  • VPSへアップロード
  • Nginx設定
  • HTTPS化

までやると、かなり勉強になります。

完成した天気Webアプリ

まとめ（どんな人におすすめか）

OpenWeatherMapを使った天気アプリは、

  • API初心者
  • Web開発学習者
  • JavaScript勉強中の人
  • 個人開発を始めたい人

にはかなりおすすめです。

特に：

  • API通信
  • JSON
  • fetch
  • DOM操作

など、Web開発で重要な基本を自然に学べます。

最初は：

コードが難しく見える

かもしれません。

ただ、実際に：

自分で入力した都市の天気が表示される

と、かなり面白く感じると思います。

最近はAI APIなども増えているため、API通信に慣れておくと今後かなり役立つ場面が増えていきます。

まずは小さいアプリから試してみると、Web開発の理解がかなり深まると思います。

评论

タイトルとURLをコピーしました