ウェブAPIを使いこなそう！

ウェブAPIはインターネット上にあるデータやサービスにアクセスするための仕組みです。天気予報アプリや地図アプリなど、私たちが日常的に使うツールの多くがこの技術を活用しています。この記事では、JavaScriptを使ってウェブAPIからデータを取得し、それを画面に表示する方法を解説します。

準備するものについて

必要なアプリをそろえる

ウェブAPIを扱うために必要なものは次の3つです。

ブラウザとコンソール：Google ChromeやFirefoxなどのブラウザには開発者ツールが搭載されています。
コードエディタ：無料で使いやすい「Visual Studio Code」がオススメです。
APIのドキュメント：APIの使い方を理解するために公式ドキュメントが役立ちます。今回は「JSONPlaceholder」というサンプル用のAPIを使います。

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

サンプルAPIを使ったコード例

以下のコードを実行すると、JSONPlaceholder APIから投稿データを取得して表示できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ウェブAPIデータ取得</title>
</head>
<body>
  <h1>APIデータの表示</h1>
  <div id="output"></div>

  <script>
    // APIエンドポイント
    const apiURL = 'https://jsonplaceholder.typicode.com/posts';

    // データを取得
    fetch(apiURL)
      .then(response => response.json())
      .then(data => {
        const output = document.getElementById('output');
        data.slice(0, 5).forEach(post => {
          const postDiv = document.createElement('div');
          postDiv.innerHTML = `<h2>${post.title}</h2><p>${post.body}</p>`;
          output.appendChild(postDiv);
        });
      })
      .catch(error => console.error('エラー:', error));
  </script>
</body>
</html>

このコードをブラウザで開くと、取得したデータが表示されます。

デザインを整える

CSSで見た目を改善

データをより見やすくするために、以下のCSSを追加してみましょう。

<style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
  }
  h2 {
    color: #333;
  }
  div {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
  }
</style>

簡単なスタイリングを加えるだけで、表示内容がぐっと見やすくなります。

実践例：天気予報APIを使う

OpenWeatherMapの活用

次に、実用的な例として天気予報API「OpenWeatherMap」を使ってみます。以下のコードでは、東京の現在の天気を取得します。

const weatherAPI = 'https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=あなたのAPIキー&units=metric';

fetch(weatherAPI)
  .then(response => response.json())
  .then(data => {
    console.log('現在の天気:', data.weather[0].description);
    console.log('気温:', data.main.temp + '°C');
  })
  .catch(error => console.error('エラー:', error));

このコードを動かすには、OpenWeatherMapで無料アカウントを作成してAPIキーを取得する必要があります。

次のステップ

学びを深めるために

ウェブAPIの基本を理解したら、さらに以下のアイデアに挑戦してみてください。

ユーザー入力に基づいて動的にAPIを呼び出す
取得データをグラフやチャートで可視化する
複数のAPIを組み合わせて、より高度なアプリケーションを作る

ウェブAPIを活用することで、アプリケーション開発の幅が大きく広がります。

参考リンク

ウェブAPIを使いこなして、自分だけのユニークなアプリを作ってみましょう。

以上がウェブAPIの使い方についてでした。
次回は非同期処理について紹介します。