以下がJavaScriptで実装した、上記の要望に沿ったアプリです。サイトへの遷移やリダイレクトはありません。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日本の食材と都道府県の料理をランダムに選択</title>
</head>
<body>
<h1>日本の食材と都道府県の料理をランダムに選択</h1>
<button id="randomButton">ランダムに選択</button>
<div id="result"></div>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function getRandomFood(ingredients) {
const index = getRandomInt(ingredients.length);
return ingredients[index];
}
function getRandomPrefecture(prefs) {
const index = getRandomInt(prefs.length);
return prefs[index];
}
function getCookingInstructions(food, pref) {
const instructions = [
`「${food}」と言えば、${pref}では「${food}丼」が有名です。`,
`「${food}」で作ると美味しい${pref}料理と言えば「${pref}${food}煮」です。`,
`おすすめは「${food}唐揚げ」！${pref}でもよく食べられています。`,
`「${pref}式${food}丼」のレシピを見つけたので、一緒に作りましょう！`,
];
return instructions[getRandomInt(instructions.length)];
}
const ingredients = ['豆腐', 'しいたけ', 'ほうれん草', 'さつまいも', '牛肉', '豚肉', '鯖', 'サケ', 'イカ', 'エビ'];
const prefs = ['北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県', '東京都', '神奈川県', '埼玉県', '千葉県', '茨城県', '栃木県', '群馬県', '山梨県', '長野県', '新潟県', '富山県', '石川県', '福井県', '愛知県', '岐阜県', '静岡県', '三重県', '大阪府', '兵庫県', '京都府', '滋賀県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県', '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'];
const resultDiv = document.getElementById('result');
const randomButton = document.getElementById('randomButton');
randomButton.addEventListener('click', function() {
const randomFood = getRandomFood(ingredients);
const randomPrefecture = getRandomPrefecture(prefs);
const instructions = getCookingInstructions(randomFood, randomPrefecture);
resultDiv.textContent = `${randomFood}と${randomPrefecture}っぽい料理の作り方：${instructions}`;
});
</script>
</body>
</html>
```
このアプリは、以下のように動作します。
- ページを読み込むと、「ランダムに選択」と書かれたボタンが表示されます。
- ボタンをクリックすると、日本の食材と都道府県の料理をランダムに選択して、結果を表示します。
- 結果には、選択された食材と都道府県、その料理っぽい作り方の手順が表示されます。
- 例えば、「豆腐」と「鹿児島県」が選ばれた場合、「豆腐と鹿児島っぽい料理の作り方：おすすめは「豆腐唐揚げ」！鹿児島でもよく食べられています。」と表示されます。
