JavascriptのDataオブジェクトを✅

カレンダーと過去に作成した酒ケジュールを紐づけたいけど、実装を考えるうちに、この機能っている、、?と不安にかられている23期昴 aka 酒ケジュール作成中です。

過去のデータとカレンダーを紐づけるということは、必然的に日付情報を扱うことになりますね。

そんなわけで、javascriptでdateオブジェクトを取り扱う方法を学習していきたいと思います。

Image from Gyazo

 

Dateオブジェクト

ArrayやStringと同じビルトインオブジェクト。

新たな Date オブジェクトを生成する。

ビルトインオブジェクト

javascriptの組み込みオブジェクト

JavaScriptには、組み込みのオブジェクトとしてビルトインオブジェクト、Webブラウザーオブジェクト、DOMオブジェクトの3つがある。

使い方

newメソッドを使ってインスタンスを作成する。

現在の時刻はシンプルにnew Dateで取得できる。

const now = new Date();

console.log(Date.now());
#1638255457181

これだと数字の羅列みたいで読み取れないため、ISO 8601形式の文字列で表示させることが多い。

const now = new Date();

console.log(now.toISOString());

#2021-11-30T06:57:37.181Z

現在の時刻を取得するメソッドの他にも、年〜ミリ秒まで取得するインスタンスメソッドが幅広く用意されている。

項目 メソッド名
getFullYear()
getMonth()
getDate()
getHours()
getMinutes()
getSeconds()
ミリ秒 getMilliseconds()
曜日 getDay()

任意の時刻を表すインスタンスを取得する。

コンストラクタ引数を渡すことで、任意の時刻を表すインスタンスを作成できます。

Dateは3つのコンストラクタ引数を使ってインスタンスを作成している。

  • 時刻値を渡すもの
  • 時刻を示す文字列を渡すもの
  • 時刻の部分(年・月・日など)をそれぞれ数値で渡すもの

時刻値を渡すもの

1970年1月1日0時0分を基準に、任意の時刻までの差分をミリ秒を換算したものを時刻値という。

例えば、現在の時刻値は以下の通り。

const now = new Date();
console.log(now.getTime());
#1638256424009

時刻値は、ISO 8601形式に変換すると人間にとって見やすい値に変換することができる。

// 時刻のミリ秒値を直接指定する形式
const date = new Date(1638256424009);
const now = new Date();
// 末尾の'Z'はUTCであることを表す
console.log(date.toISOString()); // => "2021-11-30T07:13:44.009Z"
console.log(now.getTime());

時刻を示す文字列を渡すもの

時刻を示す文字列を表すものは、ISOStringに直した時の文字列のことを指す。

⇨"2021-11-30T07:13:44.009Z"

UTCはロンドンの時間を指している。語尾にZを付けるとUTC時刻になる。

Zを外すと、現在自分がいるエリアの時間になる。

const inUTC = new Date("2021-11-30T07:02:43.214Z");
console.log(inUTC.toISOString());  #London
const inLocal = new Date("2021-11-30T07:02:43.214");
console.log(inLocal.toISOString()); #Asia
#2021-11-30T07:02:43.214Z
#2021-11-29T22:02:43.214Z

時刻の部分(年・月・日など)をそれぞれ数値で渡すもの

引数にそれぞれの数値を表すものを入れると

new Date(year, month, day, hour, minutes, seconds, milliseconds);

// 実行環境における"2021年11月30日15時43秒214"を表す
// タイムゾーンを指定することはできない
const date1 = new Date(2021,11, 29, 22, 2, 43, 214);
console.log(date1.toISOString()); // "2021-11-30T07:02:43.214" (Asia/Tokyoの場合)

// Date.UTCメソッドを使うとUTCに固定できる
const ms = Date.UTC(2021,11, 29, 22, 2, 43, 214);
// 時刻値を渡すコンストラクタと併用する
const date2 = new Date(ms);
console.log(date2.toISOString()); // => "2021-11-30T07:02:43.214Z"

dateに関するライブラリ

dateオブジェクトを使って表現できる範囲には限りがあるため、day.jsやmoment.jsと併用して使うことが一般的だそう。

今後の展望

カレンダーと紐づける作業に3日以上かかりそうだったら普通に過去データを表示するだけのページにしようと思う!

https://github.com/subaru-hello/Zeroken/issues/30

https://qiita.com/tobita0000/items/0f9d0067398efdc2931e

https://jsprimer.net/basic/date/