ご要望に沿って、最安値を表示するHTMLアプリを以下に示します。このアプリは、API経由で商品の価格を取得して、その中から最安値を表示します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>最安値検索</title>
</head>
<body>
<h1>最安値検索アプリ</h1>
<input type="text" id="searchQuery" placeholder="商品名を入力してください">
<button onclick="searchPrices()">検索</button>
<div id="priceResults"></div>
<script>
async function searchPrices() {
try {
const searchQuery = document.getElementById('searchQuery').value;
const apiUrl = `https://api.example.com/products/search?query=${searchQuery}`;
const response = await fetch(apiUrl);
const products = await response.json();
const prices = products.map(p => p.price);
const minPrice = Math.min(...prices);
const resultDiv = document.getElementById('priceResults');
resultDiv.innerHTML = `<p>最安値は${minPrice}円です！</p>`;
} catch (error) {
console.error(error);
alert('エラーが発生しました。再度検索をお願いします。');
}
}
</script>
</body>
</html>
```
このアプリでは、ユーザーが商品名を入力すると、API経由で商品情報を取得します。商品情報はJSON形式で返され、`map`関数を使って商品の価格だけを抜き出して、配列`prices`に格納します。その後、配列の要素の最小値を求めて、HTML上に最安値を表示します。
※APIのURLは例示であり、実際のものではありません。また、JavaScriptコード内では`<script>`タグの中で使われる`eval()`関数は使用していません。
