短く、簡潔なJavascriptの記述をするためにヒントをください

Question

#短く、簡潔なJavascriptの記述をするためにヒントをください

Javascript初心者です。
OpenWeatherMapを使用した練習サイトを作成しました。

具体的には、

• 現在の天気予報
• 翌日の3時間ごとの天気予報
• 翌々日の3時間ごとの天気予報

をAPIで取得し、作成しました。

結果的に思うようなサイトを作ることはできたのですが、Javascriptが非常に長くなってしまいました。

▽対象サイト
https://webprogblog.xsrv.jp/demo/weather/

##個人的に省略できるんじゃないかと思うところ

翌日の６時、９時、12時、15時、18時の天気予報を取得し、それぞれの天気状態によって条件分岐をしました。

// 特定の時間の天気情報を取得
const nextWEather_6 = data.list[7].weather[0].main; // 翌日の6時
const nextWEather_9 = data.list[8].weather[0].main; // 翌日の9時
const nextWEather_12 = data.list[9].weather[0].main; // 翌日の12時
const nextWEather_15 = data.list[10].weather[0].main; // 翌日の15時
const nextWEather_18 = data.list[11].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;
}

・
・
・
12時、15時、18時も同様に記述する。
翌々日も同様に。

ここの部分があまりにも長く、同じような処理を繰り返しているので、もっと簡単にかける気がするのですが、その術がわかりません。

どのように記述すればもっと短く簡潔に書けるかご教授いただけますでしょうか。

繰り返しとのことですので、FOR文とかを使うんじゃないかと思ってはいるのですが、正直どのように手を付けていいかわかりません……

##コード すべて

すみません、文字数OVERで載せることができなかったので、下記を参照ください。

＞Javascript全文

Answer 1

まず、天気の名前が一致していたら、その画像やテキストを挿入するという所ですが、名前、テキスト、画像をまとめたObjectの配列(Array)を作って、for...ofやforEachで回すという手があります。質問のコードより前の所ですが、次のような感じにかけます。

/*取得した天気によって
「天気の名前」「天気の画像を」を挿入*/
const weathers = [
  {name: "Thunderstorm", text: '雷雨', img: 'clouds.png'},
  {name: "Drizzle",      text: '霧雨', img: 'rains.png' },
  {name: "Rain",         text: '雨',   img: 'rains.png' },
  {name: "Snow",         text: '雪',   img: 'snow.png'  },
  {name: "Atmosphere",   text: '濃霧', img: 'clouds.png'},
  {name: "Clear",        text: '晴れ', img: 'clear.png' },
  {name: "Clouds",       text: '曇り', img: 'clouds.png'},
]
for (const weather of weathers) {
  if (weatherName == weather.name) {
    patternTextTarget.innerHTML = weather.text;
    patternImgTarget.innerHTML = `<img src="asset/img/${weather.img}" alt="${weather.text}">`;
    break;
  }
}

このweathersはトップレベルで書いておけば、その後の似たような挿入部分も同じような処理で書けるようになります。

次に、同じような処理は関数にして、違っている部分だけを関数として渡せば良いです。

const weatherSet = ({target, time, num}) => {
  const targetData = data.list[num].weather[0].main;
  for (const weather of weathers) {
    if (targetData == weather.name) {
      document.getElementById(`${target}WEather_${time}`).innerHTML = `<img src="asset/img/${weather.img}" alt="${weather.text}">`;
      break;
    }
  }
  const targetTemp = Math.round(data.list[num].main.temp);
  document.getElementById(`${target}Temp_${time}`).innerHTML = targetTemp + '℃';
};

渡すときも、配列にまとめてforEachで流し込みましょう。

const targets = [];
for (let i = 0; i < 5; i++) {
  targets.append({target: 'next', time: 6 + 3 * i, num: 7 + i});
}
for (let i = 0; i < 5; i++) {
  targets.append({target: 'afNext', time: 6 + 3 * i, num: 15 + i});
}
targets.forEach(weatherSet);

上はあくまでイメージで、さらっと書いた物で、ちゃんと動作テストまではしていません。上を単純に組み込むのではなく、理解しながら、自分で書くようにしてください。

このように同じことをしているところは繰り返しでまとめるです。また、法則性のある処理は関数にして細分化していくとコードがすっきりしていくと思います。

Comments

[progblog]

ご回答ありがとうございました。

ソースだけでなく、適宜コメントをいただき、非常に参考になりました。
教えていただいたことを生かし、ソースをいかに簡潔に書けるか作り直してみようと思います。

Answer 2

こんにちは

以下のような修正が考えられます。

• 各天気を表すキー（例：Thunderstorm）に対応する、表示文字列(例：雷雨)と画像ファイル名(例: clouds) をマッピングさせるオブジェクトを定義。これを使用して if文を削除
• 翌日および翌々日の6,9,12,15,18時の天気情報を持つオブジェクトを要素とする、（長さ10の）配列を作り、これを forEach でループさせる。
• 画像および気温を表示する<span>の取得を id で行わず、上記のforEach のループインデクスに対応する td.weather-dot-cellを取得して、そこから各<span>を特定する。

上記の修正を行った一例として、以下のような感じになります。

// 天気の表示文字列および画像ファイル名
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 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("位置情報を取得できませんでした……");
}

上記の修正後の app.js を以下のGithubにも上げておきました。

• github.com: jun68ykt/q272079/blob/master/asset/js/app.js

ご質問にある元の app.jsからの差分を、以下から確認できます。

• github.com: 修正による差分

以上、参考になれば幸いです。

Comments

[progblog]

ご回答ありがとうございます。
ソース、差分ともに拝見させていただきした。

こんなにも綺麗でシンプルになるのかと驚愕し、勉強不足を痛感しました。

不明点は調べつつ、ソースを参考にしていただきます。
ご丁寧にありがとうございました。

[jun68ykt]

どういたしまして???? 参考になれば幸いです。

[progblog]

とても参考になりました。

連想配列？ を使うのですね。
ソースを理解するため、他のものに書き換えて見たのですが１点わからない点がございます。

もしまだ見ていただけるのであれば、ご教授いただけますでしょうか。

★--

// 本たちを定義
const BOOKS = {
AHORESSYA: { autor: '内田百閒', genre: '随筆'},
KUSAMEIKYU: { autor: '泉鏡花', genre: '小説'},
UMI: { autor: '小川洋子', genre: '小説'},
}

// 本の名前を定義
const booksName = 'KUSAMEIKYU';

// 本を定義
const book = BOOKS[booksName];

// もし本が「'KUSAMEIKYU'」の時
if(book) {
const {autor, genre} = book; // ① ここのソースで行っている処理がわかりません……。
console.log('著者は' + autor + 'でジャンルは' + genre + 'です');
}
--★

① の箇所ですがどのような意味になるのでしょうか？

また、まだ自身の手で書いていないのですが、

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

上記ソースの「...data」はなんでドットがこんなにあるのでしょうか？

申し訳ございません。
ご回答いただけますと幸いです。

[jun68ykt]

コメントありがとうございます。

(1) オブジェクトの分割代入

> ① の箇所ですがどのような意味になるのでしょうか？

①の、以下の1行

> const { autor, genre } = book;

によって、以下の2行

const autor = book.autor;
const genre = book.genre;

と同じことをやってくれます。上記の2行を

const { autor, genre } = book;

という1行で書けるようにする、このような、autorと genre を囲むカッコ { ･･･ } 使いの構文のことを、

分割代入 (Destructuring assignment)

といいます。MDN では以下のページ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

の中の「オブジェクトの分割代入」の節に説明があります。また、このページの前半に説明されている、「配列の分割代入」のほうも上手く使えると、コードをすっきり書くのに役立つことがあります。

(2) スプレッド構文

> ★--
> [...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => {
> --★
>
> 上記ソースの「...data」はなんでドットがこんなにあるのでしょうか？

上記のソース行で使われている、ピリオドを3個続けた、... を使った構文を

スプレッド (Spread)構文

といいます。MDN では以下のページに説明があります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

特に今回使った手法は、上記のページの中の「配列リテラルでのスプレッド構文」の節に書かれています。簡単な例を挙げますと、

const a = [ 1, 2, 3 ];

という配列があったときに、

const b = [ ...a, 4, 5 ];

とすると、b には [ 1, 2, 3, 4, 5 ] という配列が入ります。b の先頭から３つの要素、1, 2, 3 は ...a によって、a の内容が展開されたものです。これをふまえて、ご質問いただいた、回答のコードにある

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

についてですが、上記の1行をもうちょっと丁寧に、複数行に分けて書くと、以下のようになります。

const nextWeathers = data.list.slice(7, 12); // 翌日の 6,9,12,15,18 時の天気情報を持つ配列
const afNextWeathers = data.list.slice(15, 20); // 翌々日の 6,9,12,15,18 時の天気情報を持つ配列
const weathers = [ ...nextWeathers, ...afNextWeathers ]; // 上記2つの配列を連結した配列

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

data.list の中で、翌日の 6,9,12,15,18 時の天気情報はインデクス 7 から 11の部分配列 、翌々日の 6,9,12,15,18 時の天気情報はインデクス 15から 19 の部分配列にあり、インデクス12、13, 14 の要素は不要です。この、インデクス7〜11と、15〜19 にある10個の要素が持つ情報をHTMLに反映させるときに、翌日分と翌々日分とでそれぞれ個別にforEachしてもよいですが、できれば一度のforEachで済ませたいです。そうすると、これらの、離れた区間にある2個の部分配列にある10個の要素を、すきまなく並べた配列が欲しいです。そこで、そのような配列を得るためにはどうするかというと、空の配列を用意して for 文の中で push で詰めていく、というやり方が基本ですが、スプレッド構文を使えば

[...data.list.slice(7, 12), ...data.list.slice(15, 20)]

で（一気に）得られる、というわけです。

補足ですが、オブジェクトのリテラルでもスプレッド構文を使えます。詳しくは上記のMDNのページの「Objectリテラルで使う」をご参照ください。

以上参考になれば幸いです。

[progblog]

今回もご丁寧にご回答いただき、ありがとうございます。
非常に参考になりました。

正直、力不足で理解できない箇所もありますが、色々と試しつつ練習したいと思います。

Answer 3

同じような処理が続くときは配列が使えるかもしれません。

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

//nextWEather_6のチェックは済ませておくこと

const t2g = {Thunderstorm:'<img src="asset/img/clouds.png" alt="雷雨">',
             Drizzle:'<img src="asset/img/rains.png" alt="霧雨">',
             Rain:'<img src="asset/img/rains.png" alt="雨">',
             Snow:'<img src="asset/img/snow.png" alt="雪">',
             Atmosphere:'<img src="asset/img/clouds.png" alt="濃霧">',
             Clear:'<img src="asset/img/clear.png" alt="晴れ">',
             Clouds:'<img src="asset/img/clouds.png" alt="曇り">'};

document.getElementById('nextWEather_6').innerHTML = t2g[nextWEather_6];

もっと削れるとは思いますが、見やすさとか拡張性とかもろもろのバランスをみて調整すればいいかと。

Answer 4

まずは、「天候の文字列から、画像のHTMLを生成する」部分を1つの関数にしてしまってはどうでしょうか。

昼用と夜用は必要かもしれませんが、それでもだいぶスッキリするかと思います。