WEB API OpenWeatherMapを使用し天気予報サイトを作成してみた

# WEB制作 api Javascript

2020.06.24

こんにちは。

生のJavascriptを使用し、WEB API OpenWeatherMapを呼び出し、3日間の天気予報サイトを作成しました。

天気予報

初めての「WEB API」所感

恥ずかしながら初めて「WEB API」というものを使用しました。

なんでこんなに便利なものを使用してこなかったのかと驚愕するほど便利なものでした。

ただ、アクセス数に応じて有料のものもあるので、使うのであれば個人的なツールとしてですね。

例えば、OpenWeatherMapを使用してLINE BOTを作成すれば、洗濯物が雨に濡れるなんてことはもうなくなるかもしれません。

今後は色々触ってみよう。

生のJavascriptで作成しました

今回は「WEB API」に触れたいという考えと、 jQuery を使用せずに生の Javascript の勉強をしたいという気持ちもありました。

そこでずいぶん時間がかかってしまいましたが、 Javascript のみで作ってみました。

まず自ら書いたのがこちらのソース。

// 日にちを入れるターゲットを定義する
const nowTimeTarget = document.getElementById('nowData');
const nextTimeTarget = document.getElementById('nextData');
const afNextTimeTarget = document.getElementById('afNextData');

// 現在の日時を取得
const now = new Date();

// 取得した日時をターゲットに代入
nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日　' + now.getHours() + '時' + now.getMinutes() + '分';
nextTimeTarget.innerHTML = (now.getDate() + 1);
afNextTimeTarget.innerHTML = (now.getDate() + 2);

// 位置情報を取得開始
if (navigator.geolocation) {
  // 位置情報が取得成功した時
  navigator.geolocation.getCurrentPosition(function (position) {

      // 緯度経度を取得
      const basePosition = position.coords;
      const lat = basePosition.latitude;
      const lng = basePosition.longitude;

      // WEB API を使用し、現在地の現在の天気を取得
      const API_KEY = "////////////////////////////////////////////";
      const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
      const request = new XMLHttpRequest();
      request.open("GET", url, true);
      request.responseType = "json";

      // 現在の天気に関する関数
      request.onload = function () {
        const nowData = this.response;

        // 「現在の天気」「現在の気温」「現在地」を取得
        const weatherName = nowData.weather[0].main;
        const weatherTemp = nowData.main.temp;
        const cityName = nowData.name;

        // 取得した現在地が「Suguri」の時の処置
        if (cityName === 'Suguri') {
          alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか？\n「Suguri」の天気を表示させていただきます。どこかは知りません。')
        }
        // 取得したもの入れるターゲットを定義
        const geoTarget = document.getElementById('cityName');
        const patternTextTarget = document.getElementById('pattern');
        const patternImgTarget = document.getElementById('picture');
        const patternTempTarget = document.getElementById('temp');

        // 現在地、気温をターゲットに代入
        geoTarget.innerHTML = cityName;
        patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';

        /*取得した天気によって
        「天気の名前」「天気の画像を」を挿入*/
        if (weatherName === "Thunderstorm") {
          patternTextTarget.innerHTML = '雷雨';
          patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (weatherName === "Drizzle") {
          patternTextTarget.innerHTML = '霧雨';
          patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (weatherName === "Rain") {
          patternTextTarget.innerHTML = '雨';
          patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (weatherName === "Snow") {
          patternTextTarget.innerHTML = '雪';
          patternImgTarget.innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (weatherName === "Atmosphere") {
          patternTextTarget.innerHTML = '濃霧';
          patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (weatherName === "Clear") {
          patternTextTarget.innerHTML = '晴れ';
          patternImgTarget.innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (weatherName === "Clouds") {
          patternTextTarget.innerHTML = '曇り';
          patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
      };
      request.send();

      // WEB API を使用し、現在地の翌日以降の天気を取得
      const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
      const nextRequest = new XMLHttpRequest();
      nextRequest.open("GET", nextUrl, true);
      nextRequest.responseType = "json";

      // 現在、翌日以降の天気に関する関数
      nextRequest.onload = function () {
        const data = this.response;

        // 特定の時間の天気情報を取得
        const nextWEather_6 = data.list[5].weather[0].main; // 翌日の6時
        const nextWEather_9 = data.list[6].weather[0].main; // 翌日の9時
        const nextWEather_12 = data.list[7].weather[0].main; // 翌日の12時
        const nextWEather_15 = data.list[8].weather[0].main; // 翌日の15時
        const nextWEather_18 = data.list[9].weather[0].main; // 翌日の18時

        // 取得した天気によって「天気の画像を」を挿入
        if (nextWEather_6 === "Thunderstorm") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (nextWEather_6 === "Drizzle") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (nextWEather_6 === "Rain") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (nextWEather_6 === "Snow") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (nextWEather_6 === "Atmosphere") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (nextWEather_6 === "Clear") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (nextWEather_6 === "Clouds") {
          document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (nextWEather_9 === "Thunderstorm") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (nextWEather_9 === "Drizzle") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (nextWEather_9 === "Rain") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (nextWEather_9 === "Snow") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (nextWEather_9 === "Atmosphere") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (nextWEather_9 === "Clear") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (nextWEather_9 === "Clouds") {
          document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (nextWEather_12 === "Thunderstorm") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (nextWEather_12 === "Drizzle") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (nextWEather_12 === "Rain") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (nextWEather_12 === "Snow") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (nextWEather_12 === "Atmosphere") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (nextWEather_12 === "Clear") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (nextWEather_12 === "Clouds") {
          document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (nextWEather_15 === "Thunderstorm") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (nextWEather_15 === "Drizzle") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (nextWEather_15 === "Rain") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (nextWEather_15 === "Snow") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (nextWEather_15 === "Atmosphere") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (nextWEather_15 === "Clear") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (nextWEather_15 === "Clouds") {
          document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (nextWEather_18 === "Thunderstorm") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (nextWEather_18 === "Drizzle") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (nextWEather_18 === "Rain") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (nextWEather_18 === "Snow") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (nextWEather_18 === "Atmosphere") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (nextWEather_18 === "Clear") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (nextWEather_18 === "Clouds") {
          document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }

        // 特定の時間の天気情報を取得
        const nextTemp_6 = Math.round(data.list[5].main.temp); // 翌日の6時の気温
        const nextTemp_9 = Math.round(data.list[6].main.temp); // 翌日の9時の気温
        const nextTemp_12 = Math.round(data.list[7].main.temp); // 翌日の12時の気温
        const nextTemp_15 = Math.round(data.list[8].main.temp); // 翌日の15時の気温
        const nextTemp_18 = Math.round(data.list[9].main.temp); // 翌日の18時の気温

        // 特定の時間に気温を代入
        document.getElementById('nextTemp_6').innerHTML = nextTemp_6 + '℃';
        document.getElementById('nextTemp_9').innerHTML = nextTemp_9 + '℃';
        document.getElementById('nextTemp_12').innerHTML = nextTemp_12 + '℃';
        document.getElementById('nextTemp_15').innerHTML = nextTemp_15 + '℃';
        document.getElementById('nextTemp_18').innerHTML = nextTemp_18 + '℃';

        // 特定の時間の天気情報を取得
        const afNextWEather_6 = data.list[13].weather[0].main; // 翌翌日の6時
        const afNextWEather_9 = data.list[14].weather[0].main; // 翌翌日の9時
        const afNextWEather_12 = data.list[15].weather[0].main; // 翌翌日の12時
        const afNextWEather_15 = data.list[16].weather[0].main; // 翌翌日の15時
        const afNextWEather_18 = data.list[17].weather[0].main; // 翌翌日の18時

        // 取得した天気によって「天気の画像を」を挿入
        if (afNextWEather_6 === "Thunderstorm") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (afNextWEather_6 === "Drizzle") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (afNextWEather_6 === "Rain") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (afNextWEather_6 === "Snow") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (afNextWEather_6 === "Atmosphere") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (afNextWEather_6 === "Clear") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (afNextWEather_6 === "Clouds") {
          document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (afNextWEather_9 === "Thunderstorm") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (afNextWEather_9 === "Drizzle") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (afNextWEather_9 === "Rain") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (afNextWEather_9 === "Snow") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (afNextWEather_9 === "Atmosphere") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (afNextWEather_9 === "Clear") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (afNextWEather_9 === "Clouds") {
          document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (afNextWEather_12 === "Thunderstorm") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (afNextWEather_12 === "Drizzle") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (afNextWEather_12 === "Rain") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (afNextWEather_12 === "Snow") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (afNextWEather_12 === "Atmosphere") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (afNextWEather_12 === "Clear") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (afNextWEather_12 === "Clouds") {
          document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (afNextWEather_15 === "Thunderstorm") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (afNextWEather_15 === "Drizzle") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (afNextWEather_15 === "Rain") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (afNextWEather_15 === "Snow") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (afNextWEather_15 === "Atmosphere") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (afNextWEather_15 === "Clear") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (afNextWEather_15 === "Clouds") {
          document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }
        if (afNextWEather_18 === "Thunderstorm") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
        } else if (afNextWEather_18 === "Drizzle") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
        } else if (afNextWEather_18 === "Rain") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
        } else if (afNextWEather_18 === "Snow") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
        } else if (afNextWEather_18 === "Atmosphere") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
        } else if (afNextWEather_18 === "Clear") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
        } else if (afNextWEather_18 === "Clouds") {
          document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
        } else {
          return false;
        }

        // 特定の時間の気温を取得
        const afNextTemp_6 = Math.round(data.list[13].main.temp); // 翌翌日の6時の気温
        const afNextTemp_9 = Math.round(data.list[14].main.temp); // 翌翌日の9時の気温
        const afNextTemp_12 = Math.round(data.list[15].main.temp); // 翌翌日の12時の気温
        const afNextTemp_15 = Math.round(data.list[16].main.temp); // 翌翌日の15時の気温
        const afNextTemp_18 = Math.round(data.list[17].main.temp); // 翌翌日の18時の気温

        // 特定の時間に気温を代入
        document.getElementById('afNextTemp_6').innerHTML = afNextTemp_6 + '℃';
        document.getElementById('afNextTemp_9').innerHTML = afNextTemp_9 + '℃';
        document.getElementById('afNextTemp_12').innerHTML = afNextTemp_12 + '℃';
        document.getElementById('afNextTemp_15').innerHTML = afNextTemp_15 + '℃';
        document.getElementById('afNextTemp_18').innerHTML = afNextTemp_18 + '℃';
      };
      nextRequest.send();
    },

    // 位置情報の取得失敗した時
    function () {
      alert('位置情報の取得に失敗しました。');
    });
} else {
  alert("位置情報を取得できませんでした……");
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

// 日にちを入れるターゲットを定義する

const nowTimeTarget = document.getElementById('nowData');

const nextTimeTarget = document.getElementById('nextData');

const afNextTimeTarget = document.getElementById('afNextData');

// 現在の日時を取得

const now = new Date();

// 取得した日時をターゲットに代入

nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日　' + now.getHours() + '時' + now.getMinutes() + '分';

nextTimeTarget.innerHTML = (now.getDate() + 1);

afNextTimeTarget.innerHTML = (now.getDate() + 2);

// 位置情報を取得開始

if (navigator.geolocation) {

// 位置情報が取得成功した時

navigator.geolocation.getCurrentPosition(function (position) {

// 緯度経度を取得

const basePosition = position.coords;

const lat = basePosition.latitude;

const lng = basePosition.longitude;

// WEB API を使用し、現在地の現在の天気を取得

const API_KEY = "////////////////////////////////////////////";

const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;

const request = new XMLHttpRequest();

request.open("GET", url, true);

request.responseType = "json";

// 現在の天気に関する関数

request.onload = function () {

const nowData = this.response;

// 「現在の天気」「現在の気温」「現在地」を取得

const weatherName = nowData.weather[0].main;

const weatherTemp = nowData.main.temp;

const cityName = nowData.name;

// 取得した現在地が「Suguri」の時の処置

if (cityName === 'Suguri') {

alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか？\n「Suguri」の天気を表示させていただきます。どこかは知りません。')

}

// 取得したもの入れるターゲットを定義

const geoTarget = document.getElementById('cityName');

const patternTextTarget = document.getElementById('pattern');

const patternImgTarget = document.getElementById('picture');

const patternTempTarget = document.getElementById('temp');

// 現在地、気温をターゲットに代入

geoTarget.innerHTML = cityName;

patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';

/*取得した天気によって

「天気の名前」「天気の画像を」を挿入*/

if (weatherName === "Thunderstorm") {

patternTextTarget.innerHTML = '雷雨';

patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (weatherName === "Drizzle") {

patternTextTarget.innerHTML = '霧雨';

patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (weatherName === "Rain") {

patternTextTarget.innerHTML = '雨';

patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (weatherName === "Snow") {

patternTextTarget.innerHTML = '雪';

patternImgTarget.innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (weatherName === "Atmosphere") {

patternTextTarget.innerHTML = '濃霧';

patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (weatherName === "Clear") {

patternTextTarget.innerHTML = '晴れ';

patternImgTarget.innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (weatherName === "Clouds") {

patternTextTarget.innerHTML = '曇り';

patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

};

request.send();

// WEB API を使用し、現在地の翌日以降の天気を取得

const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;

const nextRequest = new XMLHttpRequest();

nextRequest.open("GET", nextUrl, true);

nextRequest.responseType = "json";

// 現在、翌日以降の天気に関する関数

nextRequest.onload = function () {

const data = this.response;

// 特定の時間の天気情報を取得

const nextWEather_6 = data.list[5].weather[0].main; // 翌日の6時

const nextWEather_9 = data.list[6].weather[0].main; // 翌日の9時

const nextWEather_12 = data.list[7].weather[0].main; // 翌日の12時

const nextWEather_15 = data.list[8].weather[0].main; // 翌日の15時

const nextWEather_18 = data.list[9].weather[0].main; // 翌日の18時

// 取得した天気によって「天気の画像を」を挿入

if (nextWEather_6 === "Thunderstorm") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (nextWEather_6 === "Drizzle") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (nextWEather_6 === "Rain") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (nextWEather_6 === "Snow") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (nextWEather_6 === "Atmosphere") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (nextWEather_6 === "Clear") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (nextWEather_6 === "Clouds") {

document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (nextWEather_9 === "Thunderstorm") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (nextWEather_9 === "Drizzle") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (nextWEather_9 === "Rain") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (nextWEather_9 === "Snow") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (nextWEather_9 === "Atmosphere") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (nextWEather_9 === "Clear") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (nextWEather_9 === "Clouds") {

document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (nextWEather_12 === "Thunderstorm") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (nextWEather_12 === "Drizzle") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (nextWEather_12 === "Rain") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (nextWEather_12 === "Snow") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (nextWEather_12 === "Atmosphere") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (nextWEather_12 === "Clear") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (nextWEather_12 === "Clouds") {

document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (nextWEather_15 === "Thunderstorm") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (nextWEather_15 === "Drizzle") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (nextWEather_15 === "Rain") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (nextWEather_15 === "Snow") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (nextWEather_15 === "Atmosphere") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (nextWEather_15 === "Clear") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (nextWEather_15 === "Clouds") {

document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (nextWEather_18 === "Thunderstorm") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (nextWEather_18 === "Drizzle") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (nextWEather_18 === "Rain") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (nextWEather_18 === "Snow") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (nextWEather_18 === "Atmosphere") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (nextWEather_18 === "Clear") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (nextWEather_18 === "Clouds") {

document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

// 特定の時間の天気情報を取得

const nextTemp_6 = Math.round(data.list[5].main.temp); // 翌日の6時の気温

const nextTemp_9 = Math.round(data.list[6].main.temp); // 翌日の9時の気温

const nextTemp_12 = Math.round(data.list[7].main.temp); // 翌日の12時の気温

const nextTemp_15 = Math.round(data.list[8].main.temp); // 翌日の15時の気温

const nextTemp_18 = Math.round(data.list[9].main.temp); // 翌日の18時の気温

// 特定の時間に気温を代入

document.getElementById('nextTemp_6').innerHTML = nextTemp_6 + '℃';

document.getElementById('nextTemp_9').innerHTML = nextTemp_9 + '℃';

document.getElementById('nextTemp_12').innerHTML = nextTemp_12 + '℃';

document.getElementById('nextTemp_15').innerHTML = nextTemp_15 + '℃';

document.getElementById('nextTemp_18').innerHTML = nextTemp_18 + '℃';

// 特定の時間の天気情報を取得

const afNextWEather_6 = data.list[13].weather[0].main; // 翌翌日の6時

const afNextWEather_9 = data.list[14].weather[0].main; // 翌翌日の9時

const afNextWEather_12 = data.list[15].weather[0].main; // 翌翌日の12時

const afNextWEather_15 = data.list[16].weather[0].main; // 翌翌日の15時

const afNextWEather_18 = data.list[17].weather[0].main; // 翌翌日の18時

// 取得した天気によって「天気の画像を」を挿入

if (afNextWEather_6 === "Thunderstorm") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (afNextWEather_6 === "Drizzle") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (afNextWEather_6 === "Rain") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (afNextWEather_6 === "Snow") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (afNextWEather_6 === "Atmosphere") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (afNextWEather_6 === "Clear") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (afNextWEather_6 === "Clouds") {

document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (afNextWEather_9 === "Thunderstorm") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (afNextWEather_9 === "Drizzle") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (afNextWEather_9 === "Rain") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (afNextWEather_9 === "Snow") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (afNextWEather_9 === "Atmosphere") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (afNextWEather_9 === "Clear") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (afNextWEather_9 === "Clouds") {

document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (afNextWEather_12 === "Thunderstorm") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (afNextWEather_12 === "Drizzle") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (afNextWEather_12 === "Rain") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (afNextWEather_12 === "Snow") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (afNextWEather_12 === "Atmosphere") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (afNextWEather_12 === "Clear") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (afNextWEather_12 === "Clouds") {

document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (afNextWEather_15 === "Thunderstorm") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (afNextWEather_15 === "Drizzle") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (afNextWEather_15 === "Rain") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (afNextWEather_15 === "Snow") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (afNextWEather_15 === "Atmosphere") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (afNextWEather_15 === "Clear") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (afNextWEather_15 === "Clouds") {

document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

if (afNextWEather_18 === "Thunderstorm") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';

} else if (afNextWEather_18 === "Drizzle") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';

} else if (afNextWEather_18 === "Rain") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">';

} else if (afNextWEather_18 === "Snow") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">';

} else if (afNextWEather_18 === "Atmosphere") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';

} else if (afNextWEather_18 === "Clear") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';

} else if (afNextWEather_18 === "Clouds") {

document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';

} else {

return false;

}

// 特定の時間の気温を取得

const afNextTemp_6 = Math.round(data.list[13].main.temp); // 翌翌日の6時の気温

const afNextTemp_9 = Math.round(data.list[14].main.temp); // 翌翌日の9時の気温

const afNextTemp_12 = Math.round(data.list[15].main.temp); // 翌翌日の12時の気温

const afNextTemp_15 = Math.round(data.list[16].main.temp); // 翌翌日の15時の気温

const afNextTemp_18 = Math.round(data.list[17].main.temp); // 翌翌日の18時の気温

// 特定の時間に気温を代入

document.getElementById('afNextTemp_6').innerHTML = afNextTemp_6 + '℃';

document.getElementById('afNextTemp_9').innerHTML = afNextTemp_9 + '℃';

document.getElementById('afNextTemp_12').innerHTML = afNextTemp_12 + '℃';

document.getElementById('afNextTemp_15').innerHTML = afNextTemp_15 + '℃';

document.getElementById('afNextTemp_18').innerHTML = afNextTemp_18 + '℃';

};

nextRequest.send();

// 位置情報の取得失敗した時

function () {

alert('位置情報の取得に失敗しました。');

});

} else {

alert("位置情報を取得できませんでした……");

}

動きは実現てきましたけど、あまりにも長く、同じような記述が多い。

何回も同じ処理をしててあまりにもダサい。

その後、フィードバックを受け再度書いた記述がこちら。

// 天気の表示文字列および画像ファイル名
const WEATHERS = {
  Thunderstorm: { label: '雷雨', img: 'clouds' },
  Drizzle: { label: '霧雨', img: 'rains' },
  Rain: { label: '雨', img: 'rains' },
  Snow: { label: '雪', img: 'snow' },
  Atmosphere: { label: '濃霧', img: 'snow' },
  Clear: { label: '晴れ', img: 'clear' },
  Clouds: { label: '曇り', img: 'clouds' }
};

// 日にちを入れるターゲットを定義する
const nowTimeTarget = document.getElementById('nowData');
const nextTimeTarget = document.getElementById('nextData');
const afNextTimeTarget = document.getElementById('afNextData');

// 現在の日時を取得
const now = new Date();

// 取得した日時をターゲットに代入
nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分';
nextTimeTarget.innerHTML = (now.getDate() + 1);
afNextTimeTarget.innerHTML = (now.getDate() + 2);

// 位置情報を取得開始
if (navigator.geolocation) {
  // 位置情報が取得成功した時
  navigator.geolocation.getCurrentPosition(function (position) {

      // 緯度経度を取得
      const basePosition = position.coords;
      const lat = basePosition.latitude;
      const lng = basePosition.longitude;

      // WEB API を使用し、現在地の現在の天気を取得
      const API_KEY = "////////////////////////////////////////////";
      const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
      const request = new XMLHttpRequest();
      request.open("GET", url, true);
      request.responseType = "json";

      // 現在の天気に関する関数
      request.onload = function () {
        const nowData = this.response;

        // 「現在の天気」「現在の気温」「現在地」を取得
        const weatherName = nowData.weather[0].main;
        const weatherTemp = nowData.main.temp;
        const cityName = nowData.name;

        // 取得した現在地が「Suguri」の時の処置
        if (cityName === 'Suguri') {
          alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか？\n「Suguri」の天気を表示させていただきます。どこかは知りません。')
        }
        // 取得したもの入れるターゲットを定義
        const geoTarget = document.getElementById('cityName');
        const patternTextTarget = document.getElementById('pattern');
        const patternImgTarget = document.getElementById('picture');
        const patternTempTarget = document.getElementById('temp');

        // 現在地、気温をターゲットに代入
        geoTarget.innerHTML = cityName;
        patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';

        /*取得した天気によって
        「天気の名前」「天気の画像を」を挿入*/
        const weather = WEATHERS[weatherName];

        if (weather) {
          const { label, img } = weather;
          patternTextTarget.innerHTML = label;
          patternImgTarget.innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
        } else {
          return false;
        }
      };
      request.send();

      // WEB API を使用し、現在地の翌日以降の天気を取得
      const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
      const nextRequest = new XMLHttpRequest();
      nextRequest.open("GET", nextUrl, true);
      nextRequest.responseType = "json";

      // 現在、翌日以降の天気に関する関数
      nextRequest.onload = function () {
        const data = this.response;

        // 翌日および翌々日の6,9,12,15,18時の天気情報を取得し、対応する画像と気温を設定
        const cells = document.querySelectorAll('.weather-dot-cell');
        //[...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => {
        const nextWeathers = data.list.slice(5, 10); // 翌日の 6,9,12,15,18 時の天気情報を持つ配列
        const afNextWeathers = data.list.slice(13, 18); // 翌々日の 6,9,12,15,18 時の天気情報を持つ配列
        const weathers = [ ...nextWeathers, ...afNextWeathers ]; // 上記2つの配列を連結した配列
        weathers.forEach((e, i) => {
          const weather = WEATHERS[e.weather[0].main];
          if (weather) {
            const { label, img } = weather;
            cells[i].querySelector('.weather-dot').innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
            cells[i].querySelector('.weather-temp').textContent = `${e.main.temp}℃`;
          }
        });
      };
      nextRequest.send();
    },

    // 位置情報の取得失敗した時
    function () {
      alert('位置情報の取得に失敗しました。');
    });
} else {
  alert("位置情報を取得できませんでした……");
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

// 天気の表示文字列および画像ファイル名

const WEATHERS = {

Thunderstorm: { label: '雷雨', img: 'clouds' },

Drizzle: { label: '霧雨', img: 'rains' },

Rain: { label: '雨', img: 'rains' },

Snow: { label: '雪', img: 'snow' },

Atmosphere: { label: '濃霧', img: 'snow' },

Clear: { label: '晴れ', img: 'clear' },

Clouds: { label: '曇り', img: 'clouds' }

};

// 日にちを入れるターゲットを定義する

const nowTimeTarget = document.getElementById('nowData');

const nextTimeTarget = document.getElementById('nextData');

const afNextTimeTarget = document.getElementById('afNextData');

// 現在の日時を取得

const now = new Date();

// 取得した日時をターゲットに代入

nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分';

nextTimeTarget.innerHTML = (now.getDate() + 1);

afNextTimeTarget.innerHTML = (now.getDate() + 2);

// 位置情報を取得開始

if (navigator.geolocation) {

// 位置情報が取得成功した時

navigator.geolocation.getCurrentPosition(function (position) {

// 緯度経度を取得

const basePosition = position.coords;

const lat = basePosition.latitude;

const lng = basePosition.longitude;

// WEB API を使用し、現在地の現在の天気を取得

const API_KEY = "////////////////////////////////////////////";

const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;

const request = new XMLHttpRequest();

request.open("GET", url, true);

request.responseType = "json";

// 現在の天気に関する関数

request.onload = function () {

const nowData = this.response;

// 「現在の天気」「現在の気温」「現在地」を取得

const weatherName = nowData.weather[0].main;

const weatherTemp = nowData.main.temp;

const cityName = nowData.name;

// 取得した現在地が「Suguri」の時の処置

if (cityName === 'Suguri') {

}

// 取得したもの入れるターゲットを定義

const geoTarget = document.getElementById('cityName');

const patternTextTarget = document.getElementById('pattern');

const patternImgTarget = document.getElementById('picture');

const patternTempTarget = document.getElementById('temp');

// 現在地、気温をターゲットに代入

geoTarget.innerHTML = cityName;

patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';

/*取得した天気によって

「天気の名前」「天気の画像を」を挿入*/

const weather = WEATHERS[weatherName];

if (weather) {

const { label, img } = weather;

patternTextTarget.innerHTML = label;

patternImgTarget.innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;

} else {

return false;

}

};

request.send();

// WEB API を使用し、現在地の翌日以降の天気を取得

const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;

const nextRequest = new XMLHttpRequest();

nextRequest.open("GET", nextUrl, true);

nextRequest.responseType = "json";

// 現在、翌日以降の天気に関する関数

nextRequest.onload = function () {

const data = this.response;

// 翌日および翌々日の6,9,12,15,18時の天気情報を取得し、対応する画像と気温を設定

const cells = document.querySelectorAll('.weather-dot-cell');

//[...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => {

const nextWeathers = data.list.slice(5, 10); // 翌日の 6,9,12,15,18 時の天気情報を持つ配列

const afNextWeathers = data.list.slice(13, 18); // 翌々日の 6,9,12,15,18 時の天気情報を持つ配列

const weathers = [ ...nextWeathers, ...afNextWeathers ]; // 上記2つの配列を連結した配列

weathers.forEach((e, i) => {

const weather = WEATHERS[e.weather[0].main];

if (weather) {

const { label, img } = weather;

cells[i].querySelector('.weather-dot').innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;

cells[i].querySelector('.weather-temp').textContent = `${e.main.temp}℃`;

}

});

};

nextRequest.send();

// 位置情報の取得失敗した時

function () {

alert('位置情報の取得に失敗しました。');

});

} else {

alert("位置情報を取得できませんでした……");

}

……200行くらい短くなりました。

あまりにも自分の力不足を痛感しました。

基本的にサイトを作るうえでJavascriptをゴリゴリに書く必要はありません。

（たしか、動きはCSSでトリガーをJavascriptでっていうのが推奨されてた気が……誰が推奨してたかは忘れましたが）

でも書けるに越したことはないので、勉強しよう。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
（ヘッダー・フッター含む）

￥8,000～

コンテンツページ（１P）
（ヘッダー・フッター含まない）

￥4,000～

ランディングページ

￥15,000～

※アニメーションはオプション料金

デザイン

トップページ
（ヘッダー・フッター含む）

￥20,000～

コンテンツページ（１P）
（ヘッダー・フッター含まない）

￥5,000～

ランディングページ

￥20,000～

※コーディングとのセット料金

サイト構築

10ページ
（お問合せページを含まない）

¥100,000～

20ページ
（お問合せページを含まない）

¥175,000～

Wordpress導入

（上記）＋¥50,000～

※お問合せページは¥10,000～

お問合せ

WEB API OpenWeatherMapを使用し天気予報サイトを作成してみた

初めての「WEB API」所感

生のJavascriptで作成しました

webサイトの制作、お任せください。

関連コンテンツおすすめ

Ranking

ココナラ

WEBに関するご相談

WEB API OpenWeatherMapを使用し天気予報サイトを作成してみた

初めての「WEB API」 所感

生のJavascriptで作成しました

webサイトの制作、お任せください。

関連コンテンツおすすめ

Ranking

ココナラ

WEBに関するご相談

初めての「WEB API」所感