初心者のためのAPI入門 - 天気情報APIを使ってみよう【2026年版】

Tech Trends AI

2026年2月13日 - 3 minutes read - 541 words

初心者のためのAPI入門 - 天気情報APIを使ってみよう

プログラミングを学習していると必ず出会う「API」という言葉。聞いたことはあるけれど、実際に何なのか分からない方も多いのではないでしょうか。この記事では、APIの基本概念から実際に天気情報APIを使った実習まで、初心者にも分かりやすく解説します。

APIとは何か？

APIの基本概念

API（Application Programming Interface） とは、異なるソフトウェア同士が情報をやり取りするための「仕組み」や「約束事」のことです。

身近な例で理解するAPI

レストランに例えると：

お客さん：あなたのプログラム
メニュー：API仕様書
ウェイター：API
厨房：外部サービス（データベースやシステム）

お客さんはメニューを見て注文し、ウェイターが厨房に伝えて料理を持ってくる。このように、APIは「どんなデータが欲しいか」を伝え、結果を受け取る仲介役なのです。

なぜAPIが重要なのか？

APIを使うメリット

開発効率の向上
- 既存のサービスを活用できる
- ゼロから作る必要がない
専門性の活用
- 天気予報は気象庁のデータを使用
- 地図情報はGoogle Mapsを利用
リアルタイムデータ
- 最新の情報を常に取得可能
- 自分でデータを管理する必要がない
コスト削減
- インフラ構築が不要
- 開発時間の短縮

REST APIの基礎知識

RESTとは

REST（Representational State Transfer） は、Web上でデータをやり取りするための設計原則です。現在最も一般的なAPI設計方法です。

HTTPメソッドの基本

メソッド	用途	例
GET	データの取得	天気情報を取得する
POST	データの作成	新しいユーザーを登録する
PUT	データの更新	ユーザー情報を変更する
DELETE	データの削除	ユーザーアカウントを削除する

APIのURL構造

https://api.weather.com/v1/current?city=tokyo&key=your-api-key

https://api.weather.com：ベースURL
/v1/current：エンドポイント（何をするか）
?city=tokyo&key=your-api-key：パラメータ（詳細な条件）

天気情報APIの実践例

使用するAPI

今回は OpenWeatherMap API を例に説明します。これは無料で使える人気の天気APIです。

APIキーの取得方法

OpenWeatherMapにアクセス
無料アカウントを作成
APIキーをメモ（後で使用）

注意: APIキーは秘密情報です。GitHub等に公開しないよう注意しましょう。

基本的なAPI呼び出し例

JavaScript（fetch使用）

// 東京の現在の天気を取得
const apiKey = 'your-api-key-here';
const city = 'Tokyo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log('都市名:', data.name);
    console.log('気温:', data.main.temp + '°C');
    console.log('天気:', data.weather[0].description);
    console.log('湿度:', data.main.humidity + '%');
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
  });

Python（requests使用）

import requests
import json

# APIの設定
api_key = 'your-api-key-here'
city = 'Tokyo'
url = f'https://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}&units=metric&lang=ja'

# API呼び出し
response = requests.get(url)

if response.status_code == 200:
    data = response.json()
    print(f"都市名: {data['name']}")
    print(f"気温: {data['main']['temp']}°C")
    print(f"天気: {data['weather'][0]['description']}")
    print(f"湿度: {data['main']['humidity']}%")
else:
    print(f"エラー: {response.status_code}")

APIレスポンスの理解

天気APIから返される典型的なJSONデータ：

{
  "coord": {
    "lon": 139.6917,
    "lat": 35.6895
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "快晴",
      "icon": "01d"
    }
  ],
  "main": {
    "temp": 15.5,
    "feels_like": 14.8,
    "humidity": 65
  },
  "name": "Tokyo",
  "cod": 200
}

実践演習：簡単な天気アプリを作ろう

HTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天気アプリ</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 50px; }
        .weather-card {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 10px;
            max-width: 400px;
        }
        .temperature { font-size: 2em; color: #2196F3; }
        .city-name { font-size: 1.5em; margin-bottom: 10px; }
        input, button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>天気情報アプリ</h1>
    <div>
        <input type="text" id="cityInput" placeholder="都市名を入力">
        <button onclick="getWeather()">天気を調べる</button>
    </div>
    <div id="weatherDisplay" class="weather-card" style="display:none;">
        <div id="cityName" class="city-name"></div>
        <div id="temperature" class="temperature"></div>
        <div id="description"></div>
        <div id="humidity"></div>
    </div>
</body>
</html>

JavaScript実装

const API_KEY = 'your-api-key-here';

async function getWeather() {
    const city = document.getElementById('cityInput').value;
    if (!city) {
        alert('都市名を入力してください');
        return;
    }

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

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('天気情報の取得に失敗しました');
        }

        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        alert('エラー: ' + error.message);
    }
}

function displayWeather(data) {
    document.getElementById('cityName').textContent = data.name;
    document.getElementById('temperature').textContent = Math.round(data.main.temp) + '°C';
    document.getElementById('description').textContent = data.weather[0].description;
    document.getElementById('humidity').textContent = '湿度: ' + data.main.humidity + '%';

    document.getElementById('weatherDisplay').style.display = 'block';
}

エラーハンドリングの重要性

APIを使用する際は、必ずエラー処理を実装しましょう：

主なエラーパターン

401 Unauthorized: APIキーが無効
404 Not Found: 指定した都市が見つからない
429 Too Many Requests: リクエスト制限に達した
500 Internal Server Error: サーバー側のエラー

エラー処理の実装例

async function getWeatherWithErrorHandling(city) {
    try {
        const response = await fetch(url);

        switch (response.status) {
            case 200:
                return await response.json();
            case 401:
                throw new Error('APIキーが無効です');
            case 404:
                throw new Error('指定された都市が見つかりません');
            case 429:
                throw new Error('リクエスト制限に達しました。しばらく待ってから再試行してください');
            default:
                throw new Error('予期しないエラーが発生しました');
        }
    } catch (error) {
        console.error('API呼び出しエラー:', error);
        throw error;
    }
}

APIのベストプラクティス

セキュリティ対策

APIキーの保護

// 良い例：環境変数を使用
const apiKey = process.env.WEATHER_API_KEY;

// 悪い例：コードに直接記述
const apiKey = 'abc123def456'; // これはNG

HTTPS必須
- 必ずhttpsを使用してAPI通信を行う
レート制限の遵守
- API提供者の制限を守る
- 必要以上に頻繁なリクエストを避ける

パフォーマンス最適化

キャッシュの活用

// 同じデータを短時間で再取得しない
const cache = {};
const CACHE_DURATION = 10 * 60 * 1000; // 10分

function getCachedWeather(city) {
    const now = Date.now();
    if (cache[city] && now - cache[city].timestamp < CACHE_DURATION) {
        return cache[city].data;
    }
    return null;
}

必要なデータのみ取得
- APIパラメータを使って不要なデータを除外

さらに学習を進めるには

スキルアップのステップ

基礎レベル
- HTTP基礎、JSON理解
- 簡単なGET リクエスト
中級レベル
- POST/PUT/DELETEの使用
- 認証機能の実装
- エラーハンドリングの強化
上級レベル
- 独自APIの作成
- API設計とドキュメント化
- 負荷テストと最適化

まとめ

APIは現代のWeb開発において欠かせない技術です。今回学んだ内容をまとめると：

重要なポイント

APIの基本概念：異なるシステム間でデータをやり取りする仕組み
REST API：最も一般的なAPI設計方法
実践的な使用方法：天気APIを使った具体例
エラーハンドリング：堅牢なアプリケーション開発のために必須
セキュリティ：APIキーの保護とHTTPS使用

次のステップ

他の無料APIを試してみる
自分だけのWebアプリケーションを作成
API設計について学習を深める
バックエンド開発にチャレンジ

APIを理解することで、開発できるアプリケーションの幅が大きく広がります。まずは今回の例を実際に動かしてみることから始めましょう。そして、少しずつ機能を追加していけば、立派なWebアプリケーションを作ることができるでしょう。

技術は日々進歩していますが、APIの基本的な概念は変わりません。しっかりと基礎を身につけて、素晴らしいアプリケーション開発を楽しんでください！

カテゴリー

初心者向け技術解説

タグ

API 初心者向けプログラミング Web開発天気API REST 基礎知識