【JavaScript】現在日時をエレガントに出力する方法

JavaScript でウェブアプリ開発をしていて避けられないのが日時の扱いでしょう。とりわけ日時を画面に表示する処理で、まいどまいど同じようなコードを書くのが面倒でしかたないと感じるのは私だけではないでしょう。今回は、今後、私がコピペで楽するために、現在の日時の文字列(ここでは “YYYY-MM-DD hh:mm:ss”)を生成するコードを書いておこうと思います。

一番オーソドックスな方法(Internet Explorer 11 対応)

面倒だけれども、Internet Explorer 11 でも動作する昔ながらの書き方です。

const dt = new Date();
const date = [
  dt.getFullYear().toString(),
  ('0' + (dt.getMonth() + 1).toString()).slice(-2),
  ('0' + dt.getDate().toString()).slice(-2)
].join('-');
const time = [
  ('0' + dt.getHours().toString()).slice(-2),
  ('0' + dt.getMinutes().toString()).slice(-2),
  ('0' + dt.getSeconds().toString()).slice(-2)
].join(':');
const datetime = date + ' ' + time;
console.log(datetime); // 2021-10-11 20:56:25

上記のコードは、ブラウザーが認識しているタイムゾーンに合わせた日時を生成します。普通なら日本時間のはずですね。西暦、月、日、時、分、秒をそれぞれメソッドを使って取り出し、西暦以外はゼロ埋めを行い、最後に連結します。とりわけゼロ埋めの処理はエレガントではないですよね。

ゼロ埋めに padStart() を使う方法(Internet Explorer 11 は非対応)

もう少しゼロ埋めをモダンにエレガントに書くなら、padStart() はいかがでしょうか。IE11 では動作しません。

const dt = new Date();
const date = [
  dt.getFullYear(),
  (dt.getMonth() + 1).toString().padStart(2, '0'),
  dt.getDate().toString().padStart(2, '0')
].join('-');
const time = [
  dt.getHours().toString().padStart(2, '0'),
  dt.getMinutes().toString().padStart(2, '0'),
  dt.getSeconds().toString().padStart(2, '0')
].join(':');
const datetime = date + ' ' + time;
console.log(datetime); // 2021-10-11 20:56:25

そんなにエレガントでもない気が。。。

Date オブジェクトの toISOString() メソッド を使う方法(Internet Explorer 11 対応)

コードの量を減らしたいなら、Date オブジェクトの toISOString() メソッドをうまく使う方法もありますね。

const dt = new Date(Date.now() + 3600000 * 9);
let datetime = dt.toISOString(); // 2021-10-11T21:00:23.653Z
datetime = datetime.replace('T', ' ').replace(/\.\d{1,3}Z$/, '');
console.log(datetime); // 2021-10-11 21:00:23

Date オブジェクトの toISOString() メソッドから得られる文字列は、タイムゾーンが UTC 0 の時刻になってしまうので、日本時間に調整するために冒頭で 9 時間進めた Date オブジェクトを生成します。

Date オブジェクトの toISOString() メソッドを実行すると、”2021-10-11T21:00:23.653Z” という文字列が得られます。この文字列はタイムゾーンが Z になっているものの、実際には日本時間です。

この文字列を “YYYY-MM-DD hh:mm:ss” 形式に加工します。まず “T” を半角スペースに変換します。そして最後のミリ秒と “Z” が不要なので、それらを削除します。

このコードの注意点としては、タイムゾーンが日本時間で固定になってしまいます。それで問題ないなら、コード量が少なくて良い気がします。Internet Explorer 11 でも動きますしね(別に IE11 で動く必要はないかもしれませんけど)。

Intl.DateTimeFormat() コンストラクタを使う方法(Internet Explorer 11 は非対応)

Intl.DateTimeFormat() コンストラクタを使う方法がもっともナウい方法ではないでしょうか。

const dtf = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'short',
  timeStyle: 'medium'
});
let datetime = dtf.format(new Date()); // 2021/10/11 21:54:40
datetime = datetime.replace(/\//g, '-');
console.log(datetime); // 2021-10-11 21:54:40

Intl.DateTimeFormat() を使って年月日をハイフン区切りで出力する方法が見当たらなかったので、エレガントではないですが、replace() を使ってスラッシュをハイフンに置換してます。本当にこれで良いのだろうか?

ちなみに、Internet Explorer 11 は中途半端に Intl.DateTimeFormat() をサポートしているので、上記コードを実行してもエラーにならず、”2021年10月11日” という値を返します。時刻はどこへ行った?さらに月と日はゼロ埋めしません。”‎2021‎年‎10‎月‎9‎日” のような文字列を返します。

まとめ

現在日時を “YYYY-MM-DD hh:mm:ss” 形式で出力する方法をいくつか試してみましたが、いかがでしょうか。筆者は今でも一番オーソドックスな方法を使っている気がします。昔から問題なく動作してきた安心感なんでしょうかね。やはり皆さんはモダンな方法を使っているのでしょうか?

今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。

Share