【GAS】天気予報を表示するアプリを作る～日付の整理～【第7回】

2022/06/272023/12/06

前回は、テーブルに線を引いたり、CSS専用のファイルを作ったりして見た目を整えました。今回も、日付の見た目を整えていきます。

Contents

1. 日付を見やすくする
2. GAS
3. 実行結果
4. 最後に
5. 【GAS】天気予報を表示するアプリを作る～目次～

日付を見やすくする

日付を見やすくするためにはGAS側で文字列として扱っている今の日付データを、日付として扱ってもらう必要があります。

new Date()で日付として扱う

new Date(日付の形で書かれている文字列)をすることで、javascriptでは日付として扱うことができます。

 //日付取得 new Date()で日付形式に変換する
let date = new Date(weather[0]["timeSeries"][0]["timeDefines"][i]);

例えば、今日が「2022年6月17日11時」だった場合、上のようにして取得したデータを表示させると以下のようになります。

Fri Jun 17 2022 11:00:00 GMT+0900 (日本標準時)

日本人的にはまだ見づらい表記ですよね。ですので、月だけ取り出したり、日付だけ取り出したりしてもっと見やすくしていく必要があります。

.getMonth()で月を取り出す

new Date()などをして、日付として扱われている値は、.getMonth()をすることで月を取り出すことができます。しかし、1月を0、2月を1とするような０～11の値で表現するので、本来の月に該当する値には1足りないことに注意が必要です。

//月を取り出す
let month = date.getMonth() + 1;

.getDate()で日を取り出す

getMonth()と同じく、.getDate()で日を取り出すことができます。.getDay()としてしまうと、曜日を取り出すことになってしまうので、日にはgetDate()を使いましょう。こちらは、普通に日の数値を取り出せます。

//日を取り出す
let day = date.getDate();

.getHour()で時間を取り出す

getMonth()などと同じく、時間を取り出すことができます。0～23の値を取り出せます。

//時間を取り出す
let hour = date.getHours();

.getFullYear()で年を取り出す

getMonth()などと同じく、年を取り出すことができます。

//年を取り出す
let year = date.getFullYear();

GAS

これらを使うと、降水確率や気温のデータを整理しながら取得できるようになります。降水確率に関わる部分だけを抽出すると以下のようになります。

for(i=0;i<weather[0]["timeSeries"][0]["timeDefines"].length;i++){
     //日付の取得
     let date = new Date(weather[0]["timeSeries"][0]["timeDefines"][i]);
     //降水確率の取得
     for(j=0;j<weather[0]["timeSeries"][1]["timeDefines"].length;j++){
        let popsdate = new Date(weather[0]["timeSeries"][1]["timeDefines"][j]);

        if(date.getDate() == popsdate.getDate()){
          if(popsdate.getHours() == 0){
            pops1 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 6){
            pops2 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 12){
            pops3 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 18){
            pops4 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
        }
      }
   }

日付と降水確率の日付が同じ時に、時間別に値を取得しています。これならHTMLに表示させるときも整理されているので、迷いませんね。気温に関しても、同様の処理を行います。

今回は記事が長くなってしまったのでコード全体は掲載しませんが、上記に合わせて色々変更を加えています。