自作ウェブサイト構築：初心者向けステップバイステップガイド

<div class="container">
  <h1>天気予報</h1>
  <div class="searchContainer">
    <input
      class="inputField"
      id="cityField"
      placeholder="都市名を入力..."
      type="text"
    />
    <button id="searchBtn">検索</button>
  </div>
  <div id="weatherContainer">
    <h2 id="cityName"></h2>
    <p id="temperature"></p>
    <p id="condition"></p>
    <p id="windSpeed"></p>
  </div>
  <p id="errorMessage"></p>
</div>
<script src="script.js"></script>

.container {
  max-width: 400px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.searchContainer {
  margin: 20px 0;
}

.inputField {
  padding: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.searchBtn {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#weatherContainer {
  display: none; /* データが利用可能になるまで非表示 */
}

#errorMessage {
  color: red;
  font-weight: bold;
}

document.getElementById("searchBtn").addEventListener("click", () => {
  const city = document.getElementById("cityField").value.trim();
  if (city) {
    getCoordinates(city);
  } else {
    showError("都市名を入力してください");
  }
});

async function getCoordinates(city) {
  showError("");
  try {
    const response = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
    );
    if (!response.ok) {
      throw new Error("都市が見つかりません");
    }
    const data = await response.json();
    if (!data.results || data.results.length === 0) {
      throw new Error("都市が見つかりません");
    }
    const { latitude, longitude, name, country } = data.results[0];
    getWeather(latitude, longitude, name, country);
  } catch (error) {
    showError(error.message);
  }
}

async function getWeather(latitude, longitude, city, country) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
    );
    if (!response.ok) {
      throw new Error("天気データが利用できません");
    }
    const data = await response.json();
    displayWeather(data.current_weather, city, country);
  } catch (error) {
    showError(error.message);
  }
}

function displayWeather(weather, city, country) {
  const weatherContainer = document.getElementById("weatherContainer");
  const cityHeader = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const condition = document.getElementById("condition");
  const windSpeed = document.getElementById("windSpeed");
  const weatherCondition =
    weatherDescriptions[weather.weathercode] || "Unknown Condition";
  weatherContainer.style.display = "block";
  cityHeader.textContent = `${city}, ${country}`;
  temp.textContent = `気温: ${weather.temperature} °C`;
  condition.textContent = `状態: ${weatherCondition}`;
  windSpeed.textContent = `風速: ${weather.windspeed} km/h`;
}

function showError(message) {
  const weatherContainer = document.getElementById("weatherContainer");
  weatherContainer.style.display = "none";
  const errorPara = document.getElementById("errorMessage");
  errorPara.textContent = message;
}