JavaScriptで「X分前」を実装

Question

前提・実現したいこと

JavaScriptで、データベースにある「2020-10-30 12:00:00.000000」の形式の日付を「X分前」と変換したいです。
ただし、ブラウザ言語に沿った変換を求めています。

発生している問題・エラーメッセージ

エラーメッセージは特に出ていませんが、ブラウザ言語に沿った変換ができません。
おそらくですが問題は下記ソースコード21行目の「// ←ここがおかしい？」とある部分だと思います（違うかもしれません）。

該当のソースコード

データベースにあるのが「created_at」で、それを関数ago()で変換しようという意図です。

// データベースにある値（INSERTしたときの標準時）であるcreated_atを「X分前」のように変換
var created_at = '2020-10-30 12:00:00.000000';
console.log( 'ago =', ago(created_at) );

全体は次のようになります。

// ブラウザ言語取得
var BROWSER_LANG = document.getElementsByTagName('html')[0].getAttribute('data-lang'); 
var BROWSER_LANG = (window.navigator.languages && window.navigator.languages[0]) ||
            window.navigator.language ||
            window.navigator.userLanguage ||
            window.navigator.browserLanguage;            
console.log( 'BROWSER_LANG =', BROWSER_LANG );

// データベースにある値（INSERTしたときの標準時）であるcreated_atを「X分前」のように変換
var created_at = '2020-10-30 12:00:00.000000';
console.log( 'ago =', ago(created_at) );

// 変換を実行
function ago(created_at){
  var result;

  // 日付オブジェクト
  created_at = new Date(created_at);
  var created_at_local = created_at.toLocaleString(BROWSER_LANG, { timeZone: 'UTC' });
  created_at_local = new Date(created_at_local);
  console.log( 'created_at_local =', created_at_local ); // ←ここがおかしい？
    
  // 現在時刻との差分＝経過時間
  var diff = new Date().getTime() - created_at_local.getTime();
  
  // 経過時間をDateに変換
  var elapsed = new Date(diff);

  // 大きい単位から順に表示
  if (elapsed.getUTCFullYear() - 1970) {
  	result = elapsed.getUTCFullYear() - 1970 + '年前';
  } else if (elapsed.getUTCMonth()) {
  	result = elapsed.getUTCMonth() + 'ヶ月前';
  } else if (elapsed.getUTCDate() - 1) {
  	result = elapsed.getUTCDate() - 1 + '日前';
  } else if (elapsed.getUTCHours()) {
  	result = elapsed.getUTCHours() + '時間前';
  } else if (elapsed.getUTCMinutes()) {
  	result = elapsed.getUTCMinutes() + '分前';
  } else {
  	result = elapsed.getUTCSeconds() + 'たった今';
  }
  return result;
}

試したこと

先に申し上げましたように、上記ソースコード21行目の「// ←ここがおかしい？」とある部分をコンソールに出し、おかしいのではと思いました。

この21行目は
created_at = 2020-10-30 12:00:00.000000
から日本の「+9」を加味して
created_at_local = 2020-10-30 19:00:00.000000
となっているのが本来だと思うのですがしかし
created_at_local = 2020-10-30 03:00:00.000000
となっていて、つまり「-9」されてしまっているものと見えます。

変換が逆なのかと思い次のように逆転させるとエラーでした。

var created_at_local = created_at.toLocaleString(BROWSER_LANG, { timeZone: 'UTC' });
// ↓逆転させるとエラー
var created_at_local = created_at.toLocaleString('UTC', { timeZone: BROWSER_LANG });

補足情報（FW/ツールのバージョンなど）

変換はフロントで実装したく、ツールはPHPなどでなくJavaScriptを考えています。
宜しくお願い致します。

Comments

[yambejp]

今の「X分前」？

[curryrice]

「UTCであるcreated_atを、言語別にローカライズした日時」と「今」とを比較します。
なので仰るとおり、今の「X分前」でお間違えないかと思います。伝わりにくくて申し訳ございません。

Answer 1

var str="2020-10-30 12:00:00.000000";
var t1=new Date(str).getTime();
var t2=new Date().getTime();
var t3=(t2-t1)/1000/60;
console.log(t3+"分前");

※更新

Comments

[curryrice]

「str」と「今」の比較でしたら質問のコードで出来ています。

「UTCであるcreated_atを、言語別にローカライズした日時」と「今」との比較が出来ないというのが、「発生している問題・エラーメッセージ」にある通り問題になっていて、その解決を求めている状況です。

Answer 2

yambejpさんのコードをお借りします。

var str="2020-10-30 12:00:00.000000";
var now = new Date();
var t1=new Date(str).getTime() - now.getTimezoneOffset() * 60 * 1000;
var t2=now.getTime();
var t3=(t2-t1)/1000/60;
console.log(t3+"分前");

Answer 3

色々と気になるところはありますが、まず new Date もしくは Date.parse により文字列をDateに変換する場合、そのタイムゾーンに依存した変換になる気がします。

つまり「-9」されてしまっているものと見えます

上記の通り、文字列を日本時間として解釈した結果を標準時に直すと、９時間前になります。
標準時として解釈させる方法は何が適切かわからないので、別な方にお任せします。

逆転させるとエラー

toLocaleStringの第一引数は locale ですので、'UTC'ではなく'en-GB'ではないでしょうか。

わかる範囲でのコメントなので、中途半端になってしまいすみません。

Comments

[curryrice]

'UTC'ではなく'en-GB'、というのはなるほどでした。
それでもエラーとなり、ログによれば'ja'が問題なようですが、かといってどうしたらいいのかという感じです。
'ja'でなく'Asia/Tokyo'としても「ago = 9時間前」でなく「ago = NaNたった今」となってしまいますし。

[plasticgrammer]

まずやりたいことの確認をさせてください。
やりたいのは、下記①と②の差からX分前を編集する、だと理解しましたが正しいでしょうか。
①ある文字列を標準時として解釈した日時
②ブラウザで取得した現在日時

このロジックだと、時差がマイナスの場合、X分後の扱いとなりますが良いのでしょうか。

[plasticgrammer]

それでも良いのでしたら、yambejpさんの回答に加えて、getTimezoneOffset()の結果を考慮してあげれば、上手くいくのではと思いました。

[curryrice]

> このロジックだと、時差がマイナスの場合、X分後の扱いとなりますが良いのでしょうか

はい、大丈夫だと思います。ロジック的にはそうですが、現実的にはそうならないためです。

まず今、世界のどこからデータベースにINSERTしても値はUTC±0が保存されます。
それを日本で出力する際に、今回の質問内容であるUTC+9を計算してこそ、「たった今」とできます。
同じようにUTC-9のアラスカでも同様に計算し「たった今」とできます。

もしこの質問の計算がない場合、日本ではUTC±0をそのまま出力することになるので「9時間前」となってしまいますし、アラスカでは「9時後」となってしまうわけです。

逆にplasticgrammer様でしたらこれ以外の方法で、「X分前」といった表示をどのように実現させますでしょうか。もし楽な方法があればぜひ教えてほしいです。

[curryrice]

> getTimezoneOffset
ありがとうございます。