質問編集履歴

2

availableCities()のコード追加

2023/01/21 08:18

投稿

sasupsasup
sasupsasup

スコア1

test CHANGED
File without changes
test CHANGED
@@ -136,4 +136,37 @@
136
136
  }
137
137
  </script>
138
138
  ```
139
+ availableCities()
140
+ ```
139
141
 
142
+ type AvailableCitiesOut = {
143
+ [index: string]: {
144
+ name: string
145
+ lat: string
146
+ lon: string
147
+ }
148
+ }
149
+ ///東名阪の都道府県リスト
150
+ export const availableCities = (): AvailableCitiesOut => {
151
+ const cities = {
152
+ shinjuku: {
153
+ name: '東京都/新宿区',
154
+ lat: '35.689753',
155
+ lon: '139.691731',
156
+ },
157
+ nagoya: {
158
+ name: '愛知県/名古屋市',
159
+ lat: '35.180344',
160
+ lon: '136.906632',
161
+ },
162
+ osaka: {
163
+ name: '大阪府/大阪市',
164
+ lat: '34.686555',
165
+ lon: '135.519474',
166
+ },
167
+ }
168
+ return cities
169
+ }
170
+
171
+ ```
172
+

1

全コードを追加

2023/01/20 23:12

投稿

sasupsasup
sasupsasup

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提
2
2
 
3
- nuxt2の勉強の一環で、簡単な天気予報サイトを作成しています。
3
+ nuxt2の勉強の一環で、openweatherAPIを利用して簡単な天気予報サイトを作成しています。
4
4
 
5
5
  ドロップダウンで選択した都道府県都市の名前をクエリに設定し
6
6
  クエリが変わるとwatchメソッドが動いて再描写するように設定しましたが
@@ -34,5 +34,106 @@
34
34
 
35
35
  - リロードされると、新しい都市名でfetchされ再描写されるようにしたい
36
36
 
37
+ ### コード
37
38
 
39
+ ```
40
+ <template>
41
+ <div class="main">
42
+ <h1>{{ weatherController(weatherInfoList).selectedCityName }}</h1>
43
+ <div>
44
+ <input
45
+ v-model="text"
46
+ list="item"
47
+ placeholder="例:東京都/新宿区"
48
+ @change="selectCity(text)"
49
+ />
50
+ <datalist id="item">
51
+ <div v-for="(cityName, key) in cityNamelist" :key="key">
52
+ <option>{{ cityName }}</option>
53
+ </div>
54
+ </datalist>
55
+ </div>
56
+ <table>
57
+ <tr>
58
+ <th>WEATHER</th>
59
+ <th>TEMP</th>
60
+ </tr>
61
+ <tr>
62
+ <td><img :src="weatherController(weatherInfoList).iconImage" /></td>
63
+ <td>{{ weatherController(weatherInfoList).temp }}℃</td>
64
+ </tr>
65
+ </table>
66
+ </div>
67
+ </template>
38
68
 
69
+ <script>
70
+ ///availableCitiesにて都道府県名一覧の配列を作成
71
+ import { availableCities } from '@/utiles/availableCities'
72
+
73
+ export default {
74
+ data() {
75
+ return {
76
+ weatherInfoList: [],
77
+ city: this.$route.query.city,
78
+ cityNamelist: Object.entries(availableCities()).map((city) => {
79
+ return city[1].name
80
+ }),
81
+ queryCity: '',
82
+ }
83
+ },
84
+
85
+ async fetch() {
86
+ const APIKEY = process.env.OPEN_WEATHER_API_KEY
87
+ ///クエリが設定されていない時は新宿の天気を取得
88
+ if (this.city === undefined) {
89
+ const res = await fetch(
90
+ `https://api.openweathermap.org/data/2.5/weather?q=shinjuku&units=metric&appid=${APIKEY}`
91
+ )
92
+ .then((response) => response.json())
93
+ .then((data) => data)
94
+ this.weatherInfoList = res
95
+ } else {
96
+ const res = await fetch(
97
+ `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&units=metric&appid=${APIKEY}`
98
+ )
99
+ .then((response) => response.json())
100
+ .then((data) => data)
101
+ this.weatherInfoList = res
102
+ }
103
+ },
104
+ watch: {
105
+ queryCity() {
106
+ location.reload()
107
+ },
108
+ },
109
+ methods: {
110
+ ///取得した天気の全情報を、必要なものだけにする
111
+ weatherController(weatherInfoList) {
112
+ const weatherInfo = {
113
+ name: weatherInfoList.name,
114
+ icon: weatherInfoList.weather[0]?.icon,
115
+ temp: Math.round(weatherInfoList.main?.temp),
116
+ }
117
+ return {
118
+ selectedCityName:
119
+ availableCities()[weatherInfo.name.toLowerCase()].name,
120
+ iconImage: `http://openweathermap.org/img/wn/${weatherInfo.icon}@2x.png`,
121
+ temp: weatherInfo.temp,
122
+ }
123
+ },
124
+ selectCity(selectedCity) {
125
+ const includeList = Object.keys(availableCities()).filter(
126
+ (city) => availableCities()[city].name === selectedCity
127
+ )
128
+ if (includeList.length === 0) {
129
+ alert('正しい都道府県を入力してください')
130
+ } else {
131
+ this.$router.push({ query: { city: includeList } })
132
+ this.queryCity = this.$route.query.City
133
+ }
134
+ },
135
+ },
136
+ }
137
+ </script>
138
+ ```
139
+