Web APIとは？初心者向けにわかりやすく解説

Web API とは？

「天気アプリはどうやって天気情報を取得しているの？」「地図アプリはどうやって地図を表示しているの？」——これらの多くは Web API（ウェブエーピーアイ） を使っています。

APIは Application Programming Interface の略で、「プログラムとプログラムをつなぐ窓口」です。Web APIは、インターネット経由でデータをやり取りする仕組みです。

APIのイメージ：レストランの注文

APIはレストランの「注文システム」に例えられます。

• お客さん（あなたのプログラム）がウェイター（API）に注文する
• ウェイターがキッチン（サーバー）に注文を伝える
• キッチンが料理（データ）を作る
• ウェイターがお客さんに料理を届ける

お客さんはキッチンの中身を知らなくても、ウェイター（API）を通じて料理（データ）を受け取れます。

🔥 HTTPSとはで実践してみましょう。

REST APIとJSON

現在最もよく使われるAPIの形式が REST API（レストエーピーアイ） です。URLにアクセスするとデータが返ってきます。

データの形式には JSON（ジェイソン）（JavaScript Object Notation）がよく使われます。

// APIから返ってくるJSONの例
{
  "id": 1,
  "name": "田中太郎",
  "age": 15,
  "email": "[email protected]"
}

💡 色の選び方で基礎を確認できます。

JavaScriptでAPIを使う

// JSONPlaceholder（テスト用の無料API）を使う例
async function getUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  console.log(user.name);  // Leanne Graham
  console.log(user.email); // [email protected]
}

getUser();

無料で使えるAPIの例

• JSONPlaceholder：テスト用のダミーデータAPI
• OpenWeatherMap：天気情報API（無料プランあり）
• PokeAPI：ポケモンのデータAPI（完全無料）
• GitHub API：GitHubのリポジトリ情報など

🔗 あわせて開発者ツールの使い方もチェックしてみましょう。

初心者におすすめの無料API

APIを試してみたいけど、どれを使えばいいかわからない人のために、登録不要で使える無料APIを紹介します。

JSONPlaceholder

ダミーのユーザーデータや投稿データを返してくれるAPIです。練習用に最適です。実際のサービスではありませんが、fetchの練習にぴったりです。

PokeAPI

ポケモンの情報を取得できるAPIです。名前、タイプ、画像などのデータが返ってきます。好きなポケモンの情報を表示するページを作ってみましょう。

Open-Meteo

天気予報のデータを取得できるAPIです。緯度と経度を指定すると、その場所の天気や気温が返ってきます。自分の住んでいる地域の天気を表示するページが作れます。

Dog API

ランダムな犬の画像を返してくれるAPIです。ボタンを押すたびに新しい犬の写真が表示されるページが簡単に作れます。

これらのAPIを使ってデータを取得する方法は「JavaScript fetchでデータを取得する方法」で詳しく解説しています。

APIを使うときの基本的な流れ

APIを使ってデータを表示するまでの流れは次の通りです。

ステップ1：APIのドキュメントを読む

どのURLにアクセスすればいいか、どんなデータが返ってくるかを確認します。ほとんどのAPIには使い方を説明するドキュメントがあります。

ステップ2：fetchでリクエストを送る

JavaScriptのfetch関数を使って、APIのURLにリクエストを送ります。

ステップ3：レスポンスをJSONに変換する

返ってきたデータをJSON形式に変換します。response.json()を使います。

ステップ4：データを画面に表示する

取得したデータからほしい情報を取り出して、HTMLに表示します。DOM操作を使って、ページの内容を書き換えます。

JavaScriptの基本がまだ不安な人は「JavaScriptとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。

APIを使うときの注意点

注意点1：リクエスト回数の制限がある

多くのAPIには「1分間に60回まで」のような制限（レートリミット）があります。短時間に大量のリクエストを送ると、一時的にブロックされることがあります。

注意点2：APIが突然使えなくなることがある

無料のAPIは、提供者の都合で突然停止することがあります。重要なサービスには使わないようにしましょう。練習や個人プロジェクトには問題ありません。

注意点3：返ってくるデータの形式を確認する

APIによって返ってくるデータの構造が違います。必ずドキュメントを読んで、どのプロパティにどんな値が入っているか確認しましょう。

注意点4：HTTPSを使う

APIのURLは「https://」で始まるものを使いましょう。「http://」だとブラウザがブロックすることがあります。

APIを使いこなせると、自分のページに外部のデータを表示できるようになります。天気、ニュース、画像など、さまざまな情報を組み合わせたオリジナルのページが作れます。

APIは現代のウェブ開発に欠かせない技術です。SNSのタイムライン表示、地図の埋め込み、決済処理など、私たちが日常的に使うサービスの裏側ではAPIが活躍しています。まずは簡単なAPIからデータを取得する練習を始めて、少しずつ複雑な処理に挑戦していきましょう。

まとめ

APIを使いこなすと、外部のデータを活用したアプリが作れます。レッスンでさらに実践的な使い方を学んでみましょう。