― JavaScriptで外部データを取得してWebページに表示する
はじめに
前回までで、HTMLやCSSを使ったページ構築と、JavaScriptによる基本的なインタラクション、フォームバリデーションを学びました。今回は、さらに一歩進んで「Webアプリケーションらしさ」に近づく重要な技術、**API通信（非同期通信）**を扱います。
Twitterで最新のツイートを取得したり、天気予報アプリで現在の気象情報を表示したりと、Web上の多くのサービスは外部のデータを取得し、リアルタイムにページに反映しています。こうした処理はすべて、JavaScriptによるAPI通信によって実現されています。
今回は、fetch APIを使って外部のデータを取得し、それをWebページに表示するところまでを体験していきます。
APIとは何か？ Web APIの役割を理解する
API（Application Programming Interface）は、アプリケーション同士がデータや機能をやり取りするための「窓口」です。Web開発においては、HTTPを介してリクエストを送り、JSONなどの形式でレスポンスを受け取るのが一般的です。
APIの主な特徴：
- 他のサービスの情報を取得できる（例：天気、ニュース、YouTube動画など）
- 自分のアプリに外部の機能を簡単に組み込める
- JavaScriptから非同期で呼び出すことができる（ページを再読み込みせずにデータを更新）
fetch APIの基本構文を覚える
JavaScriptでは、APIとの通信に fetch() を使うのが最も一般的です。これはモダンなブラウザに標準搭載されている非同期通信の仕組みです。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('エラーが発生しました:', error);
});
このコードでは、以下のような処理が行われています：
- 指定されたURLにHTTP GETリクエストを送る
- レスポンスをJSONとしてパース
- パースしたデータを使って何らかの処理を行う
- 通信エラーが起きた場合は
catchで例外を処理
このような非同期通信は、ユーザーの操作に応じてデータを読み込み、ページを部分的に更新する動的なWebアプリケーションの基本になります。
実践：ランダムなユーザー情報を取得して表示する
ここでは、APIの学習によく使われるダミーAPIサービス「Random User API」を使って、ユーザー情報を取得し、ページ上に表示するアプリケーションを作ってみましょう。
HTML
<section>
<h2>ユーザー情報の取得</h2>
<button id="loadUser">ユーザーを取得</button>
<div id="userInfo"></div>
</section>
JavaScript（script.js）
const button = document.getElementById('loadUser');
const userInfo = document.getElementById('userInfo');
button.addEventListener('click', () => {
fetch('https://randomuser.me/api/')
.then(response => response.json())
.then(data => {
const user = data.results[0];
userInfo.innerHTML = `
<p><strong>名前：</strong>${user.name.first} ${user.name.last}</p>
<p><strong>メール：</strong>${user.email}</p>
<img src="${user.picture.medium}" alt="ユーザー画像" />
`;
})
.catch(error => {
userInfo.textContent = 'ユーザー情報の取得に失敗しました。';
console.error(error);
});
});
解説
https://randomuser.me/api/にアクセスすると、JSON形式でランダムなユーザー情報が返されます- レスポンスデータは
data.results[0]としてアクセスできます innerHTMLを使って、HTMLとしてページ内に出力しています
このように、JavaScriptとAPIを組み合わせることで、リアルタイムで外部データを扱えるWebページが作れるようになります。
非同期処理のポイント：Promiseとエラーハンドリング
API通信は非同期処理で行われます。これは、処理の完了を待たずに次の処理に進むJavaScriptの特性です。fetch()はPromiseを返すため、.then()や.catch()を使って後続の処理を記述します。
開発においては、以下の点に注意が必要です：
- 通信エラーやAPIの仕様変更に備えて
catch()で必ずエラーハンドリングを行う - JSONの構造が予想通りでない場合にも備える（nullチェック）
- 通信中であることを示す「読み込み中…」の表示を追加することでUXを改善できる
よくある失敗とデバッグの方法
- CORSエラーが出る → 外部APIの仕様により、他ドメインからのアクセスが制限されている場合がある
- JSONのプロパティが
undefined→ パスが間違っている、またはAPIの仕様変更 fetch is not defined→ JavaScriptのバージョンが古い、または記述ミス
ブラウザの開発者ツールの「Network」タブを使うと、実際のリクエストとレスポンスを確認できます。APIの学習ではこのタブの活用が非常に重要です。
まとめ
API通信は、静的なWebページから動的なWebアプリケーションへと進化する上で避けて通れない技術です。
特にfetch()を使った外部データの取得は、ニュースサイト、SNS、ショッピングサイトなど、あらゆるWebサービスの根幹を支えています。
今回のポイントを振り返ると：
- fetch()で外部APIにアクセスし、JSONデータを取得
- DOMを操作して、取得したデータをページに表示
- 非同期処理とエラーハンドリングの基本を理解する
次回は、このAPI通信を発展させて、取得したデータを複数件表示し、ループや動的DOM生成の方法を学んでいきます。
次回予告
複数データを扱おう ― ループ処理と動的なDOM生成の基本
コメント