APIを使いこなそう！JavaScriptでデータを取得して表示する方法

最近、「JavaScriptを使って外部のデータをアプリに表示してみたい！」と思ったことはありませんか？今回は、JavaScriptでAPIを利用してデータを取得し、それをアプリケーションに表示する方法を紹介します。「難しそう」と感じる方も安心してください。シンプルな例から丁寧に解説します！

APIとは？

まずはAPIについて簡単に説明します。

APIって何？

API（Application Programming Interface）は、異なるアプリケーション同士がデータをやり取りするための仕組みです。。

例えば、天気予報アプリは気象データを提供するサービスのAPIを使って、リアルタイムの天気情報を取得しています。同じように、ニュースアプリはAPIを使って最新ニュースを取得し、ユーザーに表示しています。

APIで何ができるの？

APIを使うことで、以下のようなことが可能です：

天気情報を取得してアプリに表示
ニュースヘッドラインを取得
ユーザーのSNSデータを連携
ランダムな名言やジョークを表示

APIは「外部サービスからデータを取り入れるための窓口」と考えるとわかりやすいです。

実際にデータを取得してみよう

次に、JavaScriptを使ってAPIからデータを取得する方法を実践します。今回は無料で使える「ランダム名言API」を使います。

必要な準備

コードエディタ：Visual Studio Codeなどを用意。
ブラウザ：Google ChromeやEdgeでOK。

これだけあれば、すぐに始められます！

基本のコード例

以下のコードを使用して、ランダムな名言を取得してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ランダム名言ジェネレーター</title>
</head>
<body>
  <h1>ランダム名言ジェネレーター</h1>
  <button id="getQuote">名言を取得する</button>
  <p id="quote">ここに名言が表示されます。</p>

  <script>
    document.getElementById('getQuote').addEventListener('click', async () => {
      const response = await fetch('https://api.quotable.io/random');
      const data = await response.json();
      document.getElementById('quote').textContent = data.content + ' - ' + data.author;
    });
  </script>
</body>
</html>

ポイント:

ボタンをクリックすると、ランダムな名言が表示されます。
APIのURLを指定してデータを取得しています。

データの表示をもっと詳しく

取得したデータをHTMLに表示する方法をさらに深掘りします。

データの取得: fetch()を使ってAPIからデータを引っ張ってくる。
データの解析: JSON形式のデータをJavaScriptオブジェクトに変換。
HTMLに反映: textContentやinnerHTMLでデータを画面に表示。

この流れを覚えれば、どんなAPIでも対応可能です！

応用編: 天気情報アプリを作ってみよう

次に、実用的な例として天気情報を表示するアプリを作成します。

使用するAPI

OpenWeatherMap API：無料で使える天気情報API。

コード例

以下のコードで、指定した都市の気温を表示するシンプルな天気アプリを作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天気情報アプリ</title>
</head>
<body>
  <h1>天気情報アプリ</h1>
  <button id="getWeather">天気を取得する</button>
  <p id="weather">天気情報がここに表示されます。</p>

  <script>
    document.getElementById('getWeather').addEventListener('click', async () => {
      const apiKey = 'あなたのAPIキーをここに入力';
      const city = 'Tokyo';
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
      const data = await response.json();
      document.getElementById('weather').textContent = `${data.name}の気温は${data.main.temp}℃です。`;
    });
  </script>
</body>
</html>

ポイント

fetch()を使ってAPIを呼び出し。
APIキーを発行し、自分専用のキーを使用。
東京の気温を取得して表示。

API利用時の注意点

エラーハンドリング

ネットワークエラーやAPIエラーに備える。
例外処理（try-catch）を利用。

try {
  const response = await fetch(apiUrl);
  if (!response.ok) throw new Error('データの取得に失敗しました');
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error('エラー:', error);
}