JavaScriptを学ぶ人の多くが「ここで挫折した…」と言う難関。それが「API通信」です。
でも安心してください。
昔は書くのが大変でしたが、現代のJavaScriptでは「たった数行」で書けるようになりました。
これさえ覚えれば、あなたのサイトに「最新ニュース」や「天気予報」を表示できるようになります！
1. API（エーピーアイ）って何？
Application Programming Interface の略ですが、覚える必要はありません。
一言で言うと「データの窓口（コンセント）」です。
例えば、気象庁やGoogleなどの大きなサービスは、「データを配るための窓口（URL）」を用意してくれています。
そこに「東京の天気をください！」とアクセスすると、データが返ってくる仕組みです。
2. 魔法の言葉「async / await」
API通信をするために覚える呪文は、以下の3つセットです。
- async（エイシンク）： 「今から通信などの時間がかかる処理をしますよ」という宣言。
- await（アウェイト）： 「データが届くまで待ちますよ」という合図。
- fetch（フェッチ）： 「データを取りに行って！」という命令。
通信は一瞬では終わりません。データが返ってくる前に次のプログラムが動くとエラーになってしまうので、「await（待て）」をするのが一番のポイントです。
基本の型（コピペ用）
// async function で箱を作る
const getWeather = async () => {
// fetch でデータを取りに行く（URLはAPIごとに違う）
// await で返事を待つ
const response = await fetch("https://api.....");
// 届いたデータをJavaScriptで使える形式(JSON)に変換する
// ここも変換が終わるまで await で待つ
const data = await response.json();
// 中身を表示
console.log(data);
};3. 実践：天気予報アプリを作ろう
では、登録不要・無料で使える「Open-Meteo」というAPIを使って、「現在の東京の気温」を表示してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body { text-align: center; padding: 50px; font-family: sans-serif; }
#temperature { font-size: 80px; font-weight: bold; color: #ff9800; }
button { padding: 10px 20px; font-size: 18px; cursor: pointer; }
</style>
</head>
<body>
<h1>東京の天気</h1>
<div id="temperature">--°C</div>
<button id="btn">天気を取得</button>
<script>
// APIのURL（東京の緯度経度を指定しています）
const url = "https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917¤t_weather=true";
const btn = document.querySelector("#btn");
const display = document.querySelector("#temperature");
// 天気を取得する関数（async を忘れずに！）
const getWeather = async () => {
// 1. データを取りに行く（待機中...）
const response = await fetch(url);
// 2. データをJSで使えるように変換（待機中...）
const data = await response.json();
console.log(data); // ← コンソールで中身を見てみよう！
// 3. 必要なデータを取り出す
// 今回のAPIでは、dataの中に current_weather があり、その中に temperature がある
const temp = data.current_weather.temperature;
// 4. 画面に表示
display.textContent = `${temp}°C`;
};
// ボタンクリックで実行
btn.addEventListener("click", getWeather);
</script>
</body>
</html>解説：データの取り出し方
APIから返ってくるデータ（JSON）は、巨大なオブジェクトです。
コンソールを見ると、以下のような構造になっています。
{
"latitude": 35.6895,
"current_weather": {
"temperature": 18.5, // ← これが欲しい！
"windspeed": 12.0,
"weathercode": 3
}
}だから、data.current_weather.temperature とドットで繋いでいくことで、ピンポイントで気温を取り出せるのです。
まとめ
- 外部データを使うなら API。
async/await/fetchは3点セットで覚える。- 返ってきたデータ（オブジェクト）の中身をよく見て、必要な情報を取り出す。
これができれば、Googleマップを表示したり、Instagramの写真を埋め込んだりすることも夢ではありません。
次回はJavaScript編の最終回！ 「データ保存（localStorage）」 です。
ブラウザを閉じても消えない「Todoリスト」を作って卒業制作としましょう！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. fetch や json() など、時間がかかる処理の結果を「待つ」ためのキーワードは？
正解：await
これを書かないと、データが届く前に次の行が実行されてエラーになります。
Q2. await を使う関数に必ずつけなければならないキーワードは？
正解：async
const func = async () => { ... } のように関数の前につけます。
Q3. APIから取得できるデータの形式（オブジェクトの親戚）を何と呼ぶ？
正解：JSON（ジェイソン）
JavaScript Object Notation の略です。見た目はJSのオブジェクトとそっくりです。