1ヶ月前に投稿

Dateオブジェクトについて調べてみた

この記事は約 14 分で読めます。

4.5

JavaScriptで日付を表示するには、
Dateオブジェクトを使うと学びましたが、
何だろう?と思うところもあり、
少し調べてみました。

表示してみる

先ずは結果というか、
装飾されたBOXに現在の日時を
表示してみました。
(黒猫さんのBOXだニャン)

(参考)
1.CSS アニマルBOX (囲み枠・飾り枠) : https://love-wave.com/css-waku-animal/

こんな感じですが、
コードに少し疑問もあったので
調べてみることにしました。

組み込み関数のDateオブジェクト

Dateオブジェクトは
「 組み込み関数 」と呼ばれる
(ビルトイン関数とも呼ばれる)
ものの一つらしく、
組み込み関数?と思いましたが、
JavaScrip側で、好きに使ってよいと
最初から用意されている
オブジェクトのことだそうです。

組み込み関数の代表的なものは
以下が挙げられます。

  • String 文字列を扱う
  • Number 数値を扱う
  • Boolean 論理値を扱う
  • Array 配列を扱う
  • Date 日付を扱う
  • Math 数値計算で扱う

Number も組み込み関数なのですね。
Number については「UNIX時間」を
日本標準時に変換の仕方を
学びました。

組み込みオブジェクトを使う場合、
newを使ってオブジェクトを生成するらしく、

const オブジェクト名= new object();

Date() を当てはめると、

const date = new Date();

なるほどー!
そういうことなんですね!

情報の取得

引数を省略した場合は、
現在の日付や時刻が取得されます。

const date3 = new Date(); // 引数を省略
document.getElementById("now_day1").innerHTML = date3;

任意の日付や時刻を取得したい場合は、
以下のように引数へその任意の日付や
時刻を記述することで取得できます。

const date4 = new Date('2021/2/21 12:34:56'); // ('2/21')を指定
document.getElementById("now_day2").innerHTML = date4;

その際、カンマ区切りで指定する場合は
「1月 = 0」になる
ので、
以下のサンプルのように第2引数に1を指定した場合は
1月ではなく2月となります。

const date5 = new Date(2021, 1, 21, 12, 34, 56); //カンマ区切りで('1,21,')を指定
document.getElementById("now_day3").innerHTML = date5;

日付と時刻の値を取得するメソッド

メゾッド名説明
getFullYear()年の値を取得する
getMonth()月の値を取得する
getDate()日の値を取得する
getDay()曜日の値を取得する
getHours()時の値を取得する
getMinutes()分の値を取得する
getSeconds()秒の値を取得する
getMilliseconds()ミリ秒の値を取得する
getTime()1970年1月1日0時0分0秒からの
経過時間(ミリ秒)
const date = new Date();
const str = date.getFullYear()                        // 年の取得
    + '/' + ('0' + (date.getMonth() + 1)).slice(-2)   // 月の取得
    + '/' + ('0' + date.getDate()).slice(-2)          // 日の取得
    + ' ' + ('0' + date.getHours()).slice(-2)         // 時の取得
    + ':' + ('0' + date.getMinutes()).slice(-2)       // 分の取得
    + ':' + ('0' + date.getSeconds()).slice(-2)       // 秒の取得
    + '(JST)';                                        // 日本標準時
const elem = document.getElementById('today');
elem.innerHTML = str;

ここで疑問です。

さて、ここで疑問です。
上記のソースを見ると
「0」とか「+1」とか「-2」とか付いてますね。
これって何?

「+1」の疑問 (getMonth())

月を取得する getMonth()
月を0から11の整数で取得するらしく、
1月が0、2月が1といった具合に、
1つ下にずれた数字が取得されます。

JavaScriptのgetMonth()メソッドでは、指定日の「月」から 1 を引いた数値が返ることに注意してください。 getFullYear()メソッドやgetDate()メソッドでは、指定日の「西暦年」や「日」がそのまま返りますが、getMonth()メソッドだけは「月 – 1」が返ります。

日付オブジェクト名.getMonth()-JavaScriptリファレンス (htmq.com)

なので、「getMonth()+1」となっているのですね。

「0」、「-2」の疑問 (0埋め)

「0埋め(ゼロ埋め)」とは
「ゼロパディング (前ゼロ)」とも呼ばれており、
桁数(文字数) を揃える目的で
「12」 →「00012」や
「365」→「00365」のように
左に「0」を何個かくっつける事だそう。

ちなみに
ゼロパディングの逆は、
「ゼロサプレス (英:zero suppression)」
というらしいです。
数字(を文字にしたもの) の左に
くっついている余計な「0」を消します。

slice()メソッド

slice()メソッドを使用すると、
文字列から位置を指定して部分文字列を
取り出すことができるそうです。

('0' + date.getDate()).slice(-2);

マイナス値にすると
末尾からの桁数になるようです。
この場合、-2を指定しているので
右端(末尾)から数えて2文字をとり出せます。

つまりは、
日付を2021/9/9ではなく2021/09/09のように
0埋めするために先頭に0を加えて
slice()メソッドで
文字をとり出していたのですね。

どういう事?

先頭に0 (ゼロ埋め)を加えて、
.slice(-2)で10日以上の場合は
010の右端(末尾)から2桁で10日、
10日以下の場合は009の右端(末尾)から
2桁で09日にすることができるという事のようです。

padStart()メソッド

更に調べてみると、
別の方法として
padStart()メソッドを
使う方法がヒットしました。

padStart()メソッドは
結果の文字列が指定した長さになるように、
現在の文字列を他の文字列で延長するとあります。

えっ?どういう事?

'abc'.padStart(8, "0");     // "00000abc"

上記の例を見る限り、
padStart() に延長する長さと
(例では 8 )
“0"を渡せばいいだけのようです。
結果は「abc」に 0が5個ついて
「8桁」になっています。

const date2 = new Date('2021/9/9');
const str2 = date2.getFullYear() // 年の取得
  + '/' + (date2.getMonth() + 1).toString().padStart(2, '0') // 月の取得
  + '/' + (date2.getDate()).toString().padStart(2, '0') // 日の取得
  + ' (JST)'; // 日本標準時
const elem2 = document.getElementById('now_date');
elem2.innerHTML = str2;

注意事項として、
IE (Internet Explorer)は非対応なのと、
数値の結果が Numberで返ってくるため、
toString()で文字列化してあげないと
いけないようです。

なるほどー
調べた甲斐かいがありました。

Intlオブジェクト

Intlオブジェクトは、国際化APIの名前で、
言語に依存した文字列の比較、数値の書式化と、
日付の書式化を提供するとあります。

Intl.DateTimeFormat オブジェクトは、
言語に応じた日付と時刻の書式化を可能にします。

Constructor

Intl.DateTimeFormat()
言語に依存した日時の書式化を可能にする
オブジェクトのためのコンストラクターで、
Intl.DateTimeFormat オブジェクトを生成します。

コンストラクターって何?
クラスを new した瞬間に実行される
メソッド(関数)のことだそうです。

new Intl.DateTimeFormat()
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)

options の使用

日付と時刻の書式は
options 引数を使用して
カスタマイズできます。

年を年付きや和暦表示にする

年付きや和暦で表示できるか調べてみると、
Intlオブジェクトで可能です。

単純に年を取得する際は getFullYear()でOKですが、

年を getFullYear() で取得
const date6 = new Date();
const str6 = (date6.getFullYear());
document.getElementById("now_day6").innerHTML = str6;

Intl.DateTimeFormat()を使って年付きで取得したり
和暦表示で取得することができます。

年を年付きで取得

options の year: 'numeric'
指定する事で可能です。

const date7 = new Date();
const str7 = (new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric'
}).format(date7));
document.getElementById("now_day7").innerHTML = str7;
年を和暦表示で取得

ja-JP-u-ca-japanese“: 日時書式で和暦を使用します。すなわち、 2013 年は平成 25 年として表現されます。

Intl – JavaScript | MDN (mozilla.org)
const date8 = new Date();
const str8 = (new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric'
}).format(date8));
document.getElementById("now_day8").innerHTML = str8;

他にも色々試してみた

西暦○○年と表示する

era: "long" を指定することで
(era 時代の表現)
西暦を付与することができます。
( era: 'narrow' で「R○○年」)

const date9 = new Date();
const str9 = (new Intl.DateTimeFormat('ja-JP', {
  era: "long"
}).format(date9));
document.getElementById("now_day9").innerHTML = str9;
午前・午後で表示する

options で
hour: 'numeric'
hour12: true を指定します。

const date10 = new Date();
const str10 = (new Intl.DateTimeFormat('ja-JP', {
  hour12: true,
  hour: "numeric"
}).format(date10));
document.getElementById("now_day10").innerHTML = str10;
ゼロパディング (ゼロ埋め) 表記にする

options で
2-digit を指定することで
ゼロパディング表記にできます。

const date11 = new Date('2021/9/9 9:9:9');
const str11 = (new Intl.DateTimeFormat('ja-JP', {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
}).format(date11));
document.getElementById("now_day11").innerHTML = str11;
月と曜日を英語表記にする

locales を en-US にして
options を
weekday: "long",month: "long"
にします。

const date13 = new Date();
const str13 = (new Intl.DateTimeFormat('en-US', {
  weekday: "long",
  month: "long"
}).format(date13));
document.getElementById("now_day13").innerHTML = str13;

これで良くない?

特にこだわりが無いのなら
「これで良くない?」
的な設定です。

とりあえずコレ食っときゃOK!

options で
weekday: 'long' を指定することで
「曜日」の文字列付きで取得できます。

const date12 = new Date();
const str12 = (new Intl.DateTimeFormat('ja-JP', {
  hour12: true,
  weekday: "long",
  era: "long",
  year: "numeric",
  month: "numeric",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
}).format(date12));
document.getElementById("now_day12").innerHTML = str12;
究極 Full マンタン的設定

ja-JP-u-ca-japanese
年を和暦表示で取得と、
options で
dateStyle: "full"
timeStyle: "full"
を指定すると
「これでいんじゃね?」的な
表記になります。

Note: timeStyle は dateStyle と一緒に使用することができますが、他のオプション (weekdayhourmonth, など) と一緒に使用することはできません。

const RightNow = new Date();
const theTime = (new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric'
}).format(RightNow)) + '<br>' + (new Intl.DateTimeFormat("ja-JP", {
  dateStyle: "full",
  timeStyle: "full"
}).format(RightNow));
const elem = document.getElementById('current_time');
elem.innerHTML = theTime;
(参考)
1.CSS アニマルBOX (囲み枠・飾り枠) : https://love-wave.com/css-waku-animal/

出力を確認するには

Intl.DateTimeFormat Checker
という実際に出力を確認できるサイトで
色々出力を確認してみてください。

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Dateオブジェクトについて調べてみた