初心者向け TypeScript 入門 第5回：APIを使用した天気表示アプリを作成しよう

第5回となる今回は、いよいよ実践的なアプリケーション開発に挑戦します。具体的には、外部のAPIを利用して、指定した地域の天気情報を取得し表示する「天気表示アプリ」をTypeScriptで作成していきます。

実際にコードを書き始める前に、今回のアプリ開発で非常に重要な役割を果たす「API」と「APIキー」について、初心者の方にも分かりやすく解説します。

APIとは？

APIとは、Application Programming Interface（アプリケーション・プログラミング・インターフェース） の略です。なんだか難しそうに聞こえますが、簡単に言うと**「ソフトウェアやプログラム同士が情報をやり取りするための窓口」**のようなものです。

私たちの身の回りには、たくさんのAPIが活用されています。例えば、

  • 天気予報サイトやアプリ: 気象庁などが提供する天気情報APIを利用して、最新の天気情報を取得・表示しています。今回のアプリもこれに該当しますね。
  • 地図アプリ: 地図情報を提供する会社のAPIを利用して、地図を表示したり、ルート検索を行ったりします。
  • SNS連携: 「〇〇でログイン」のように、他のサービスのIDとパスワードを使って新しいサービスに登録できるのも、API連携の一例です。

これらのサービスは、それぞれが持つデータや機能を、APIという形で外部のプログラムから利用できるように公開しています。これにより、開発者は自分で全ての機能やデータを用意しなくても、既存の優れた機能を自分のアプリケーションに組み込むことができるのです。

今回の天気表示アプリでは、「天気情報を提供してくれるサービス」のAPIを利用して、「特定の地域の天気情報」を取得します。TypeScriptで書いた私たちのプログラムが、このAPIを通じて天気情報サービスに「〇〇市の天気を教えて！」とお願いし、天気情報サービスが「はい、どうぞ！」と情報を返してくれる、といったイメージです。

APIキーを使うメリットは？

APIを利用する際、多くの場合「APIキー」というものが必要になります。APIキーは、**「APIを利用するための許可証」や「合鍵」**のようなものです。

APIキーを使う主なメリットは以下の通りです。

利用者認証と識別

APIを提供する側は、APIキーを通じて「誰がAPIを利用しているのか」を把握できます。これにより、不正な利用を防いだり、利用者ごとに利用状況を管理したりすることができます。

利用制限の管理

APIを提供する側は、APIキーごとに「1日に何回までAPIを呼び出せるか」といった利用回数の上限を設定できます。これは、サーバーへの負荷を分散させたり、サービスの安定性を保ったりするために重要です。無料プランと有料プランで利用できる機能や回数に差を設ける際にも使われます。

セキュリティの向上

APIキーがあることで、APIを提供する側は承認された利用者だけにサービスを提供できます。もし不正なアクセスがあった場合でも、該当するAPIキーを無効化することで、被害を最小限に抑えることができます。

利用状況の分析

API提供者は、どのAPIキーがどれくらい利用されているかを分析することで、サービスの改善や新しい機能開発の参考にすることができます。

今回の天気表示アプリでも、天気情報を提供してくれるサービスからAPIキーを取得し、それを使ってAPIにアクセスすることになります。

APIキーを使う際にかかる料金は？

APIキーの利用にかかる料金は、APIを提供するサービスによって大きく異なります。

一般的に、以下のような料金体系があります。

無料枠

多くのAPIサービスでは、個人開発者や小規模な利用向けに、一定の利用回数まで無料枠を設けています。今回の天気表示アプリで利用するAPIも、無料枠の範囲内で十分に開発・学習ができるものを選ぶ予定です。

従量課金制

無料枠を超えたり、より多くの機能を利用したりする場合に、APIの呼び出し回数やデータ転送量に応じて料金が発生する仕組みです。大規模なサービス開発などで利用されます。

定額制

月額や年額で一定の料金を支払うことで、決められた範囲内でAPIを利用できる仕組みです。重要なのは、利用するAPIの公式サイトで料金体系を必ず確認することです。無料だと思っていても、使い方によっては料金が発生するケースもあります。特にクレジットカード情報などを登録する場合は、利用規約や料金ページを注意深く読みましょう。

今回の入門記事では、基本的に無料で利用できる範囲のAPIを使用しますのでご安心ください。

APIを使用するうえでの注意点

APIは非常に便利ですが、利用する際にはいくつか注意しておきたい点があります。

APIキーの厳重な管理

APIキーは、あなた専用の「合鍵」です。絶対に第三者に知られたり、公開リポジトリ（GitHubなど）に直接書き込んだりしないでください。 もしAPIキーが漏洩してしまうと、悪意のある第三者に不正利用され、予期せぬ料金が発生したり、サービスが停止されたりする可能性があります。

対策: 環境変数ファイル（.envファイルなど）にAPIキーを記述し、そのファイルをバージョン管理システム（Gitなど）の対象外にするのが一般的です。今回のアプリ開発でも、この方法で安全にAPIキーを扱います。

利用規約の遵守

各APIサービスには、利用規約が定められています。例えば、「取得したデータを二次利用してはいけない」「短時間に大量のリクエストを送ってはいけない」といったルールがある場合があります。利用規約をよく読み、ルールを守って利用しましょう。

エラーハンドリングの実装

APIからの応答は常に成功するとは限りません。ネットワークの問題、APIサーバー側の問題、リクエスト内容の誤りなど、様々な理由でエラーが発生することがあります。プログラム側で適切にエラーハンドリングを行い、エラー発生時にもアプリケーションがクラッシュしたり、おかしな動作をしたりしないように備えましょう。

APIの変更や廃止のリスク

外部のAPIを利用するということは、そのAPIの提供元に依存するということです。提供元の都合で、APIの仕様が変更されたり、最悪の場合API自体が廃止されたりする可能性もゼロではありません。重要なシステムでAPIを利用する場合は、そういったリスクも考慮に入れておく必要があります。

レートリミット（利用回数制限）の確認

多くのAPIには、短時間にアクセスできる回数に制限（レートリミット）が設けられています。開発中に何度もAPIを叩いていると、この制限に達して一時的にAPIが利用できなくなることがあります。APIのドキュメントでレートリミットを確認し、無駄なリクエストを送らないように気をつけましょう。

【実践】APIを活用したTypeScriptの天気表示アプリを作成してみる

それでは、いよいよTypeScriptを使って天気表示アプリを実際に作っていきましょう！ ここからはステップごとに、何をしているのかを詳しく解説していきます。

ステップ0：APIキーを取得（OpenWeather）

まず、天気情報を取得するために「OpenWeatherMap」というサービスが提供しているAPIを利用します。このAPIを使うためには、先ほど解説した「APIキー」が必要です。

Screenshot
  1. OpenWeather公式サイトにアクセス
    https://openweathermap.org/apiにアクセスしましょう。ここがOpenWeatherMapのAPIに関する情報が集まっているページです。
  2. 無料アカウントを作成
    APIを利用するには、基本的にアカウント登録が必要です。サイトの案内に従って、無料アカウントを作成してください。
  3. 「API keys」からキーを取得
    アカウント作成後、サイトにログインし、「API keys」というような名前のメニューまたはタブを探します。
    例：abcd1234efgh5678

繰り返しになりますが、APIキーはあなたのアカウントに紐づく大切な情報です。絶対に他人に教えたり、インターネット上に公開したりしないでください。

もし誤って公開してしまった場合は、OpenWeatherMapのサイトでキーを再発行するなどの対処をしましょう。

以下は、APIキー取得ページです。ここでAPIキーをコピーし、メモ帳等に貼り付けしておきます。

ステップ1：プロジェクトの準備

APIキーが取得できたら、次はTypeScriptで開発を始めるための準備をします。

パソコンのターミナル（WindowsならコマンドプロンプトやPowerShell、Macならターミナル.app）を開いて、以下のコマンドを順番に実行していきましょう。

mkdir ait-ts-weatherapp5
cd ait-ts-weatherapp5
npm init -y
npm install typescript --save-dev
npx tsc --init

tsconfig.json の修正

生成された tsconfig.json をテキストエディタで開き、以下のように内容を修正（または確認）します。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

これで、TypeScriptで開発を進めるための基本的な環境が整いました。

ステップ2：HTMLファイル作成

次に、ブラウザで天気情報を表示するための骨組みとなるHTMLファイルを作成します。

touch index.html

ait-ts-weatherapp5 フォルダ直下に、index.html という名前のファイルを作成し、以下の内容を記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>天気アプリ</title>
</head>
<body>
  <h1>天気情報</h1>
  <input id="cityInput" type="text" placeholder="都市名を入力（例: Tokyo）">
  <button id="getWeatherBtn">取得</button>
  <p id="weatherResult">ここに天気を表示します</p>

  <script src="./dist/index.js"></script>
</body>
</html>

ステップ3：TypeScriptファイル作成

いよいよTypeScriptのコードを書いていきます。

mkdir src
touch src/index.ts

src/index.ts

作成した src/index.ts に以下のコードを記述してください。

const API_KEY = "YOUR_API_KEY_HERE"; // ← ここに自分のAPIキーを入れる

interface WeatherResponse {
  main: {
    temp: number;
  };
  weather: {
    description: string;
  }[];
  name: string;
}

const cityInput = document.getElementById("cityInput") as HTMLInputElement;
const result = document.getElementById("weatherResult") as HTMLParagraphElement;
const button = document.getElementById("getWeatherBtn") as HTMLButtonElement;

button.addEventListener("click", async () => {
  const city = cityInput.value.trim();
  if (!city) {
    result.textContent = "都市名を入力してください。";
    return;
  }

  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`
    );

    if (!response.ok) {
      throw new Error("データ取得に失敗しました");
    }

    const data: WeatherResponse = await response.json();

    result.textContent = `${data.name} の天気: ${data.weather[0].description}, 気温: ${data.main.temp}℃`;

  } catch (error) {
    result.textContent = "天気情報を取得できませんでした。都市名を確認してください。";
    console.error(error);
  }
});

const API_KEY = "YOUR_API_KEY_HERE"; 非常に重要です！

この "YOUR_API_KEY_HERE" の部分を、ステップ0で取得したあなた自身のAPIキーに置き換えてください。このキーがないとAPIは利用できません。

ステップ4：ビルドして実行

TypeScriptファイルが書けたら、これをブラウザが実行できるJavaScriptファイルに変換（コンパイル）し、動作を確認しましょう。

ターミナルで、プロジェクトのルートフォルダ（ait-ts-weatherapp5）にいることを確認し、以下のコマンドを実行します。

npx tsc

このコマンドを実行すると、TypeScriptコンパイラ（tsc）が tsconfig.json の設定に従って src/index.ts をコンパイルし、dist/index.js というJavaScriptファイルが生成されます。

index.html ファイルをダブルクリックするか、ブラウザの「ファイルを開く」メニューから選択して開いてください。

「天気情報」という見出しと入力欄、ボタンが表示されるはずです。

都市名（例: Tokyo, London, Parisなど）を入力して「取得」ボタンを押すと、「ここに天気を表示します」の部分が実際の天気情報に変われば成功です！

作成したアプリを改良する

今のアプリは機能しますが、見た目が少し寂しいです。

ここからは、CSSを使ってデザインを整え、さらに複数の都市の天気を一度に表示できるように改良していきましょう。

style.cssの作成

まず、Webページの見た目を整えるためのCSSファイルを作成します。

プロジェクトのルートフォルダ（ait-ts-weatherapp5）に style.css というファイルを作成し、以下のコードを入力してください。

touch style.css

作成したファイルを開き下記のコードを入力します。

body {
    font-family: 'Arial', sans-serif;
    background: #d6f0ff;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  
  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }
  
  .weather-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
  }
  
  .weather-card h2 {
    margin: 0 0 10px;
  }
  
  .weather-card img {
    width: 80px;
    height: 80px;
  }
  
  .weather-card p {
    margin: 5px 0;
  }

index.htmlを修正

次に、作成した style.css を読み込み、天気情報を表示する部分のHTML構造を変更します。 index.html を以下のように修正してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>世界の天気</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>主要都市の天気</h1>
  <div id="weatherCards" class="card-container"></div>

  <script src="./dist/index.js"></script>
</body>
</html>

<link rel="stylesheet" href="style.css" />: <head> タグ内にこの一行を追加することで、先ほど作成した style.css がHTMLに適用され、デザインが変更されます。

index.tsも変更する

最後に、TypeScriptのコード (src/index.ts) を変更して、複数の固定された都市の天気情報を取得し、新しいデザインのカード形式で表示するようにします。

また、天気アイコンも表示するようにしましょう。

const API_KEY = "APIキーを入力"; // ← 自分のOpenWeather APIキーを入れる

const cities = ["London", "Hiroshima", "Osaka", "Tokyo", "Sapporo"];
const container = document.getElementById("weatherCards") as HTMLElement;

interface WeatherData {
  name: string;
  main: { temp: number };
  weather: { description: string; icon: string }[];
}

async function getWeather(city: string): Promise<WeatherData | null> {
  try {
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`
    );
    if (!res.ok) throw new Error("エラー");
    return await res.json();
  } catch (err) {
    console.error(`取得失敗: ${city}`, err);
    return null;
  }
}

function createCard(data: WeatherData) {
  const card = document.createElement("div");
  card.className = "weather-card";
  card.innerHTML = `
    <h2>${data.name}</h2>
    <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">
    <p>${data.weather[0].description}</p>
    <p>気温: ${Math.round(data.main.temp)}℃</p>
  `;
  container.appendChild(card);
}

cities.forEach(async (city) => {
  const data = await getWeather(city);
  if (data) createCard(data);
});

再度ビルドして実行

src/index.ts を保存したら、再度ターミナルで以下のコマンドを実行してコンパイルします。

エラーが出なければ、index.html をブラウザでリロード（再読み込み）してみてください。

画像のように、５つの都市の天気情報を取得し同時に表示させるアプリが完成しました。

指定した5つの都市の現在の天気が、おしゃれなカード形式で一覧表示されていれば大成功です！ 天気アイコンも表示され、より分かりやすくなったはずです。

まとめ

今回の「初心者向け TypeScript 入門 第5回」では、以下の内容を学びながら、実際にAPIを利用した天気表示アプリを作成しました。

最初は難しく感じるかもしれませんが、一つ一つのステップで何が行われているかを理解し、実際に手を動かしてコードを書いてみることで、確実にスキルは身についていきます。特にAPI連携は、現代のWebアプリケーション開発において非常に一般的な手法ですので、この経験は今後の学習にも大いに役立つでしょう。

プロフィール
tanat

「株式会社あいてぃ」に所属。
主にAWSとAzureなどのクラウドインフラを管理するクラウドエンジニアとして活動中。
スマホアプリやフロント部分の構築も可能なフルスタックエンジニアとして活躍できるように日々勉強中です。

tanatをフォローする
Uncategorized
シェアする
tanatをフォローする
tanat

コメント

タイトルとURLをコピーしました
function cocoon_custom_code_copy_script() { ?>   } add_action('wp_footer', 'cocoon_custom_code_copy_script');