Webアプリケーションにおいて、外部APIからデータを取得することは非常に重要なスキルです。本記事では、基本的なAPI呼び出しの方法とデータ取得の実装を具体例を用いて解説します。
APIとは？
API（Application Programming Interface）
APIは、異なるソフトウェア間でデータや機能をやり取りするためのインターフェースです。
主な役割
- データを取得する（例：天気情報、ニュースなど）
- データを送信する（例：フォームデータの送信）
REST API
多くのWeb APIは、**REST（Representational State Transfer）**という設計原則に基づいて構築されています。
HTTPメソッド
| メソッド | 役割 |
|---|---|
| GET | データの取得 |
| POST | 新しいデータの作成 |
| PUT | 既存データの更新 |
| DELETE | データの削除 |
JavaScriptでのAPI呼び出し
Fetch API
JavaScriptでAPIを呼び出す際に使用する標準的な機能がFetch APIです。
基本構文
fetch(url, options)
.then(response => response.json())
.then(data => {
// データを処理
})
.catch(error => {
console.error('エラー:', error);
});
基本的なAPI呼び出しの例
1. データの取得（GETリクエスト）
コード例
以下のコードは、APIから天気情報を取得する例です。
const url = 'https://api.example.com/weather?city=Tokyo';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('ネットワークエラー');
}
return response.json();
})
.then(data => {
console.log('天気情報:', data);
})
.catch(error => {
console.error('エラー:', error);
});
実行結果
天気情報: {
city: 'Tokyo',
temperature: '25°C',
condition: '晴れ'
}
2. データの送信（POSTリクエスト）
コード例
以下のコードは、フォームデータをAPIに送信する例です。
const url = 'https://api.example.com/submit';
const formData = {
name: '山田太郎',
email: 'yamada@example.com'
};
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
if (!response.ok) {
throw new Error('送信エラー');
}
return response.json();
})
.then(data => {
console.log('サーバーからの応答:', data);
})
.catch(error => {
console.error('エラー:', error);
});
実行結果
サーバーからの応答: {
status: 'success',
message: 'データが送信されました'
}
ReactでのAPI呼び出し
Reactでは、useEffectフックとFetch APIを組み合わせてデータを取得します。
サンプルコード
以下は、ユーザー情報を取得して表示するReactコンポーネントの例です。
import React, { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => setUsers(data))
.catch(error => console.error('エラー:', error));
}, []);
return (
<div>
<h1>ユーザー一覧</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default UserList;
実行結果
- ページを開くとAPIからユーザー情報を取得し、リスト形式で表示されます。
クロスオリジンリソースシェアリング（CORS）
CORSとは？
CORS（Cross-Origin Resource Sharing）は、異なるドメイン間でのリソース共有を許可する仕組みです。
発生するエラー例
Access to fetch at '...' from origin '...' has been blocked by CORS policy.
解決方法
- サーバー側でCORSを許可する。
- プロキシサーバーを利用する。
学習のポイント
- APIのドキュメントを確認:
- API仕様書を参照して、使用可能なエンドポイントやパラメータを把握する。
- エラー処理を重視する:
- ネットワークエラーやAPIの応答エラーを適切に処理する。
- 実践的なプロジェクトで試す:
- 天気予報アプリやニュース表示アプリを作成して実践的に学習する。
まとめ
API呼び出しとデータ取得は、現代のWebアプリケーションにおける重要なスキルです。基本的なGETとPOSTの使い方をマスターし、Reactなどのフレームワークで応用することで、より高度なアプリケーションを開発できるようになります。
次回は「レスポンシブデザインの基礎」について解説します。お楽しみに！
コメント