API実装の具体例（フロントエンド）

1 1. HTML部分:
2 2. JavaScript部分 (app.js):

フロントエンドでのAPI実装の具体例として、JavaScriptを用いて、Webサービスからデータを取得して表示するシンプルな例を紹介します。この例では、Fetch APIを使用してJSONデータを取得し、そのデータをHTML要素に表示します。

以下の例は、仮のAPI https://api.example.com/users からユーザーのリストを取得して、それをHTMLページに表示するものです。

1. HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Example</title>
</head>
<body>
<h1>ユーザーリスト</h1>
<ul id="user-list"></ul>

<script src="app.js"></script>
</body>
</html>

2. JavaScript部分 (`app.js`):

// DOM要素の参照
const userList = document.getElementById("user-list");

// APIからデータを取得
fetch('https://api.example.com/users')
.then(response => {
// レスポンスが正しいか確認
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// データをDOMに追加
data.forEach(user => {
const li = document.createElement('li');
li.textContent = user.name;
userList.appendChild(li);
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error.message);
});

この例では、Fetch APIを使用してhttps://api.example.com/usersからユーザーデータを非同期的に取得します。取得したデータはJSON形式として解析され、各ユーザーの名前を<ul>タグの中の<li>タグとして追加しています。

このように、フロントエンドではAPIを利用してデータを取得し、そのデータをもとにUIを動的に更新することが一般的に行われます。

1. HTML部分:

2. JavaScript部分 (app.js):

2. JavaScript部分 (`app.js`):