JavaScriptでUTCを9時間足して簡単にJSTの時刻へ変換させる #JavaScript

UTCに9時間足してJSTへ変換

1.new Date()を使って日付オブジェクトを生成し、変数に渡す

2.変数名.setHours(変数名.getHours() + 時間)

3.日本時間に変換された時刻を取得(toLocalStringを使った)

上記の方法でいけました。以下、つらつらとポエム混じりで書いてみます。

突然の連絡で発覚・・・

※ポエムパートなので結果だけ知りたい方はささっと流して下さい

とあるサイトを納品前にチェックしてもらっている時の事です。
1箇所、時刻表記がおかしくないか?というお客様からの修正依頼がきまして...
調べてみると、時刻がUTCになっていました。。すぐにJSTに直さなくては・・

元々の本番サーバー設定がUTCなのかもしれないし、サーバーサイド側での設定を色々直さないといけないかもだったり、(サーバーサイドはGolangで書かれていて、全く学習してないので到底さらっと直せるレベルではありません..)

影響範囲の兼ね合いもあり、深追いすると中々重たい対応となりそうな気がしますが、、とりあえず画面の時刻表示だけ修正すれば一旦はOKという事に。

変換用のライブラリも検討したのですが、なるべく簡単に素早く対応したい。考えた結果、単純に表示された時刻+9時間で日本時間にする対応で切り抜けました。

JavaScriptで変換用の処理を定義して、それを該当箇所で呼び出してJSTに変換表示という事をしましたので、簡単にご紹介します。

背景

対象はReactで作られたサイトです。
一部公開用に改変してますが、時間表示の部分は以下のような感じです。
↓

表示させている部分のコードイメージ。

<span className="Qiita_SecondArticle">更新日時(変更前のUTC時刻)：{(time['updatedAt'])}</span>

updatedAtという事で、どうやらDBにあるカラムの時刻を取ってきて表示させている事が分かりました。
↓

確認用にデータを挿入してupdatedAtの時間を確認した所、実際の挿入時間は16:43でしたが、表示された時刻は07:43。ちょうど9時間ズレており、表示時刻がUTCであるとの確証が得られました。

変換用の関数を作成

次のようなアロー関数を作りました。解説していきます。
※一部修正しました。
https://qiita.com/sennninn6/items/3174820b1c8b8c5ba4f7#%E4%B8%80%E9%83%A8%E4%BF%AE%E6%AD%A3%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F


const ConvertJST = () => {
    time = new Date(time['updatedAt']);
    time.setHours(time.getHours() + 9);
    return time.toLocaleString().slice(0,-3);
    }

updatedAtの時刻を、いくつかメソッドを利用して変換します。

1.new Date()を使って日付オブジェクトを生成し、変数に渡す

time = new Date(time['updatedAt']);

※new Date()の使い方
https://iwb.jp/javascript-new-date-gettime/

2.時間を設定して9時間(UTCとJSTの差分)足す

time.setHours(time.getHours() + 9);

変数名.setHours(変数名.getHours() + 時間);
と書いてあげればOKです。

※〜時間後の計算解説記事
https://itsakura.com/javascript-date#s4

3.日本時間に変換された時刻を取得してミリ秒表示を削除する

return time.toLocaleString().slice(0,-3);

※toLocalStringの解説記事
http://www.tohoho-web.com/js/date.htm

最初はtoLocalStringだけで書いていました。
が、これではミリ秒まで表示されてしまいます。

これだけだと、

return time.toLocaleString();

↓　こうなる。00も余分に表示されてしまった・・・

なので、.sliceメソッドを使ってミリ秒を切り抜きます。
今回は後ろからミリ秒を切り取りたいので、マイナスを使います。

return time.toLocaleString().slice(0,-3);

1番後ろから〜番目の間を切り取るという役割になります。

マイナスを使わなくても、.sliceの引数を(0,15)と書けば一見大丈夫そうですが、、
(配列番号の〜番目から,〜番目の間まで表示させるという役割です)

return time.toLocaleString().slice(0,15);

時刻表示が 2020/1/1　→　2020/11/11 のように、
月と日付の桁数で文字数が増減してしまう場合に使えなくなってしまうので注意です。

※sliceメソッドの解説記事
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

変換できた

あとは、作った処理を呼び出してあげればOKです。

<span className="Qiita_SecondArticle">更新日時(変更後のJST時刻)：{ConvertJST(time['updatedAt'])}</span>

↓　無事、UTCだった時刻表示をJSTに修正できました。

※一部修正しました

関数を使わないで、変数から呼び出す方法に修正しました。


const convertJST = new Date(datas['updatedAt']);
    convertJST.setHours(convertJST.getHours() + 9);
    const updatedTime = convertJST.toLocaleString('ja-JP').slice(0,-3);

<span className="Qiita_SecondArticle">更新日時(変更後のJST時刻)：{updatedTime}</span>

toLocaleStringにパラメーターを入れて明示的に示す事で、よりコードの意味が鮮明になります。

共通処理があるなら関数で良いのですが、今回はないので変数に渡して呼び出した方が
良いとのレビューを受けての修正です。

やりたい処理を実現する方法はたくさんあるので、作ったコードの根拠や理由をハッキリ説明できるようでないとダメですね..

最近全然触れてなかったけどJS楽しいよ〜JS

もし似たような問題で困ったら、(初心者の方は)ぜひ参考にしてみて下さい。
もっとスマートなイケてるやり方があるよ!って方いましたら、ぜひ指摘や補足等、アドバイス頂けますと全僕が喜びます。