Vue.jsでREST APIを利用する方法

npm install axios

npm install vuex

<template>
  <div class="container">
    <h1>天気予報アプリ</h1>

    <div class="search-box">
      <input type="text" v-model="cityName" placeholder="都市名を入力してください" />
      <button @click="getWeatherData()">検索</button>
    </div>

    <div class="result" v-if="weatherData">
      <h2>{{ weatherData.city.name }}の天気:</h2>
      <ul>
        <li>
          <p>{{ formatDate(weatherData.list[0].dt) }}</p>
          <p>{{ weatherData.list[0].weather[0].description }}</p>
          <p>最高気温: {{ (weatherData.list[0].main.temp_max - 273.15).toFixed(1) }}℃</p>
          <p>最低気温: {{ (weatherData.list[0].main.temp_min - 273.15).toFixed(1) }}℃</p>
        </li>
        <li>
          <p>{{ formatDate(weatherData.list[1].dt) }}</p>
          <p>{{ weatherData.list[1].weather[0].description }}</p>
          <p>最高気温: {{ (weatherData.list[1].main.temp_max - 273.15).toFixed(1) }}℃</p>
          <p>最低気温: {{ (weatherData.list[1].main.temp_min - 273.15).toFixed(1) }}℃</p>
        </li>
      </ul>
    </div>

    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "App",
    data() {
      return {
        cityName: "",
        weatherData: null,
        errorMessage: "",
      };
    },
    methods: {
      async getWeatherData() {
        try {
          const response = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${this.cityName}&appid=aaaa`);
          this.weatherData = response.data;
          this.errorMessage = "";
        } catch (error) {
          console.log(error);
          this.errorMessage = "天気情報を取得できませんでした。";
          this.weatherData = null;
        }
      },

      formatDate(dateString) {
        const date = new Date(dateString * 1000);
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        return `${year}/${month}/${day}`;
      },
    },
  };
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #eee;
  }

  .search-box {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  input[type="text"] {
    padding: 10px;
    width: 200px;
    font-size: 16px;
    border-radius: 5px 0 0 5px;
    border: none;
    outline: none;
  }

  button {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: blue;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
  }

  .result {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 5px gray;
    border-radius: 5px;
  }
</style>