getFullYear()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()など個別に取得して文字列を構築する方法は、ソースコードが長くなる傾向にあります。
ここでご紹介する方法を使うことで、スマートに取得できます。
Dateオブジェクトの基本操作
JavascriptのDateオブジェクトには整形した文字列を取得できる関数が用意されています。
試している環境はSafari 18.0.1 JSTタイムゾーン(GMT+0900)です。グリニッチ標準時間(UTCとも呼ばれます)に対しての差分で各地域の時間が表現されます。各地域の時間はローカルタイムとも呼ばれています。
var d = new Date('2024-10-25 00:00:00'); // Fri Oct 25 2024 00:00:00 GMT+0900 (日本標準時)
関数 | タイムゾーン | 出力例 |
---|---|---|
d.toString() | JST | Fri Oct 25 2024 00:00:00 GMT+0900 (日本標準時) |
d.toGMTString() | UTC | Thu, 24 Oct 2024 15:00:00 GMT |
d.toISOString() | UTC | 2024-10-24T15:00:00.000Z |
d.toJSON() | UTC | 2024-10-24T15:00:00.000Z |
d.toLocaleTimeString() | JST | 0:00:00 |
d.toDateString() | JST | Fri Oct 25 2024 |
d.toLocaleDateString() | JST | 2024/10/25 |
d.toLocaleString() | JST | 2024/10/25 0:00:00 |
d.toTimeString() | JST | 00:00:00 GMT+0900 (日本標準時) |
d.toUTCString() | UTC | Thu, 24 Oct 2024 15:00:00 GMT |
toLocaleString()は時間部分が省略されるため、調整が必要です。フォーマット的にはd.toISOString()がちょうど良い形式ということで選定しています。
toLocaleString()はlocales と optionsを指定して好みのフォーマットに変更することも可能です。ただJavascriptの実装は各ブラウザ次第というところもあるので注意が必要なのが面倒なところです。toISOString()はそういった問題が発生しないのも選んだポイントの一つです。
ただ、toISOString() はUTC出力のため、JSTに変換する必要があります。
toISOString()をUTCからJSTに変換する(ユニバーサル仕様)
なぜ変換が必要なの?
var d = new Date('2024-10-25 00:00:00');
d.toString()はJST(GMT+0900)で「Fri Oct 25 2024 00:00:00 GMT+0900 (日本標準時)」です。25日の00:00:00であることがわかります。
d.toISOString()はUTC(JST - 0900)で「2024-10-24T15:00:00.000Z」です。24日の15:00:00であることがわかります。
d.toISOString()の結果を「2024-10-25T00:00:00.000Z」にするのが目的です。
【ユニバーサル】タイムゾーン変換の考え方
DateオブジェクトにはgetTimezoneOffset()で、現在のロケールから協定世界時 (UTC) までのタイムゾーンの差を分単位で取得できます。
JSTはGMT+0900で9時間進んでいます。d.getTimezoneOffset()は以下の結果を得ることができます。
-540
マイナス540分は、マイナス9時間です。
つまりgetTimezoneOffset()は、「( GMT(0) - JST(9) )*60」という式で計算していることがわかります。
toISOString()でJST時間を得ることを目的としています。
9時間進めたDateオブジェクトで処理すれば想定通りの結果を得ることことができます。
new Date( d.getTime() + 9*60*60*1000 ).toISOString();
"2024-10-25T00:00:00.000Z"
ロケールは表示される環境次第です。そのため「9」直打ちは後々問題を抱えてしまうことになります。
getTimezoneOffset()を利用し、どこの地域でも大丈夫なように対応します。
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString();
"2024-10-25T00:00:00.000Z"
スマートなフォーマットの実装:JavaScriptで簡単に日時を取得
YYYY-MM-DD HH:MM:SS形式の日時を取得する
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString().replace('T',' ').split('.')[0];
"2024-10-25 00:00:00"
YYYY-MM-DD HH:MM形式の日時を取得する
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString().replace('T',' ').split('.')[0].replace(/:[0-9]+$/,'');
"2024-10-25 00:00:00"
YYYY年MM月DD日 HH時MM分SS秒の日時を取得する
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString().replace('T','日 ').split('.')[0].replace("-",'年').replace('-','月').replace(':','時').replace(':','分')+"秒";
"2024年10月25日 00時00分00秒"
YYYY-MM-DD形式の日時を取得する
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString().split(' ')[0];
"2024-10-25"
HH:MM:SS形式の時間を取得する
new Date( d.getTime() - d.getTimezoneOffset()*60*1000 ).toISOString().split('T')[1].split('.')[0];
"00:00:00"
まとめ
JavaScriptのDateオブジェクトを使うと、日時の取得やフォーマットが可能ですが、標準のメソッドではUTCでの出力となるため、日本標準時(JST)での取得には少し工夫が必要です。この記事では、toISOString()を活用し、getTimezoneOffset()を用いてJSTに変換する方法をご紹介しました。
この記事のポイントを簡単に振り返りましょう:
- Dateオブジェクトでの日時取得の基本:toISOString()やtoLocaleString()など、JavaScriptで用意された関数を活用して日時を簡単に取得できます。
- タイムゾーン変換:getTimezoneOffset()を用いることで、日本時間やその他のローカルタイムに調整できます。
- スマートなフォーマットの実装:YYYY-MM-DD形式やYYYY年MM月DD日といった形式を文字列操作で整形する方法を紹介しました。
JavaScriptを使った日時の操作は、アプリケーションでの日時表示やデータのフォーマットにおいて役立つスキルです。ぜひ、この記事で学んだ方法を活用して、効率よく日時を取得・整形してみてください。
- 初期費用0円(2022年8月4日に撤廃)
- 安定したサイト運営が可能(CPU/メモリ リソース保証 6コア/8GB〜)
- 契約中は独自ドメインつき 独自ドメイン永久無料特典があります
- 最大10日間無料で、サーバーのお試し利用ができます
- ディスクキャッシュも高速 NVMe SSDを採用(300GB〜)
- 大量アクセスでも安心 転送量は無制限
【このカテゴリーの最新記事】
-
no image
-
no image