Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
@konkonko
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
Q&A
Closed

JavaScriptのnew Date();の取得している時間はどこから?

Q&A
Closed

解決したいこと

JavaScriptのnew Date();の時間はサーバーの時間をとってきているのでしょうか?
表示させるPCのブラウザから?

現在、日時指定を条件分岐で
html内に要素を表示させる指定を書いておりますが
海外だとこの時間部分はどの時間に表示されるのかがわかりません。

サーバーの時刻を取得しているならば、海外で表示する時にも
日本時間にあわせて表示・非表示を切り替えるということでしょうか?

該当するソースコード

ソースコードを入力
```var now = new Date();
var start01 = new Date('2021/1/8 0:00:00'); // 表示開始日時(時間は24h表記)
var end01 = new Date('2021/2/31 23:55:59'); // 表示終了日時(時間は24h表記)
var element = document.getElementById( "hoge" ) ;
if ( start01 <  now && now < end01 ) {
    element.insertAdjacentHTML( 'beforebegin', '<figure><a href="live_test.html" target="_blank"><img src="/images/xxxxx.png" alt=""></a></figure>' ) ;
}else{
    element.insertAdjacentHTML( 'beforebegin', '<figure><img src="/images/yyyy.png" alt=""></figure>' ) ;
}

自分で試したこと

どうやって試したら良いか方法がありますでしょうか。

0
4
Answer

HTMLのscript内に記述

new Date("2021-01-08T00:00") // タイムゾーンを省略
PCの設定時間に依存しました!

new Date("2021-01-08T00:00+09:00") // タイムゾーンを指定
日本時間のみ適用されました!

バッチリです!ありがとうございました。

2

例えばなんですが,以下のようなことをすれば確認できるように思いました.

  • ネットワークを切る → サーバーの時刻かどうか
  • ブラウザのコンソールで,PCの時刻をズラしたり,タイムゾーンを変更して実行する. → どの時刻を使っているか
1
確かにこの確認方法がありましたね。ありがとうございます。

これで回答になっているか自身がないですが、

クライアントサイドで動かしているJavaScriptであれば、クライアントの時間が参照されます。
htmlのscriptタグ内に記述されているのであれば、ブラウザで表示させるPCの時間です。

JavaScriptの日時は、協定世界時(UTC)の1970年1月1日深夜0時からの経過ミリ秒数で指定されているので海外でも日本でも違いはありません。

1
なるほど。クライアントサイドかHTMLのscriptタグ内で変わってくるのですね。ありがとうございます。

確認のやり方については @atm-snag さんが書かれている通りのことを試してみるのが良いと思います。まあ以下に書く通り実際にはPCのタイムゾーンに依存するのですが、手を動かしてみるのは大切です。

そして Date() は色々なフォーマットの文字列を解釈してしまうのですが、

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

日付を表す文字列値で、 Date.parse() メソッドによって認識される形式で指定されます。 (これらの形式は IETF 準拠の RFC 2822 タイムスタンプであり、 ISO8601 のバージョンの文字列でもあります。)
注: Date コンストラクター (および同じように動作する Date.parse()) を使用した日付文字列の解析は、ブラウザーによって違いや矛盾があるため、使用を避けることを強くお勧めします。。
RFC 2822 書式の文字列の対応は慣習的に行われているだけです。

このように記載されている通り、ISO 8601形式を使うのが安全です。ポイントは3つ。

  • 日付は 2021-01-08 のようにハイフンで区切る
  • 時刻も指定する場合、 T で区切る
  • タイムゾーンを末尾に指定できる

タイムゾーンというのはUTCから何時間ズレているかを示す値です。UTCはまあだいたいグリニッジ標準時だと思ってください。日本は9時間進んでいます。

というわけで、 Date() に渡す日時のパターンとしては次の3つがあります。(本当は中途半端に年・月だけを与えたりもできるのですが省略します)

new Date("2021-01-08") // 日付だけ

→UTCで2021/1/8 0:00:00(日本時間で朝9時)を意味します。時差によるズレはありません。世界中で同一のある瞬間を示します。

new Date("2021-01-08T00:00") // タイムゾーンを省略

→現地時刻で2021/1/8 0:00:00を意味します。環境によって指し示す時刻が変わります。「Webサイトを閲覧している人にとっての真夜中」ということになります。

new Date("2021-01-08T00:00+09:00") // タイムゾーンを指定

→日本時間(UTC+9時間)で2021/1/8 0:00:00を意味します。時差によるズレはありません。世界中で同一のある瞬間を示します。

【ソース】https://262.ecma-international.org/11.0/#sec-date.parse

1
めっちゃわかりやすいです。タイムゾーンを省略するか指定するかでも変わってくるのですね。@atm-snagさんの方法と合わせて手を動かして確かめてみます。ありがとうございます。
Help us understand the problem. What is going on with this answer?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login