WEB APIの概要
WEB API（ウェブ エーピーアイ）は、
インターネットを使って、コンピュータどうしが情報をやりとりするための仕組みのことだよ。
例えばこんなことができるよ！
| 🌟やりたいこと | 📡 APIがしてくれること |
|---|---|
| 天気を知りたい | 天気予報のデータをとってきてくれる |
| 地図を表示したい | 地図の画像や位置情報を教えてくれる |
| LINEでメッセージを送りたい | LINEの仕組みとつながってメッセージを送る命令を出せる |
| お店の情報を出したい | 飲食店サイトなどからお店のデータをもらえる |
APIってロボットみたい？
うん、「アプリとアプリの間をつなぐお手紙ロボット」って思ってみて！
アプリが「これがほしいよ～！」ってお願いすると、APIロボットが必要な情報を持ってきてくれるんだ。
開発者にとってのメリット
開発者さん（プログラマー）にとっては、
自分で一から全部作らなくても、APIを使えば他のサービスの力をかりて
いろんな機能をアプリに組みこめるんだよ！
安全性も大切！
APIを使うときは、「誰が使ってるか」をちゃんと確認する仕組（APIキー）を使うよ。
変な人に使われないように、安全にも気をつけるんだ。
実際のWEB APIコード例（JavaScript）
🌦 WEB APIで天気を知ろう！
WEB APIを使うと、他のサイトから「情報」をもらって自分のページで使うことができるよ！
このページでは、OpenWeatherMapのAPIを使って「東京の天気」をしらべるコードを紹介するよ☀️
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>天気予報を取得するサンプル</title>
</head>
<body>
<h1>今日の天気は？</h1>
<button onclick="getWeather()">天気をチェック！</button>
<p id="weather-result">ここに天気が出ます☁</p>
<script>
async function getWeather() {
const apiKey = 'YOUR_API_KEY';
const city = 'Tokyo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&lang=ja&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
const weather = data.weather[0].description;
const temp = data.main.temp;
document.getElementById('weather-result').textContent =
`東京の天気：${weather}、気温：${temp}℃`;
} catch (error) {
console.error('エラーが発生しました:', error);
document.getElementById('weather-result').textContent = '天気情報が取得できませんでした。';
}
}
</script>
</body>
</html>
※ YOUR_API_KEY の部分には、OpenWeatherMapで取得した自分のAPIキーをいれてね！
ポイント解説
| 🧩 ぶぶん | なにをしてるか |
|---|---|
fetch() |
APIのURLにアクセスしてデータをとりにいくよ！ |
await / async |
データが来るまでちょっと待つよ〜という命令！ |
weather[0].description |
天気の内容（くもり・はれなど）を取り出してるよ |
main.temp |
気温を℃（ど）で表示してるよ！ |
