複合式カレンダー/後編・Dateクラスの扱い方

Dateクラスを展開

Dateクラスは、利用しているデバイスから日時を取得するクラスで、
以下のようなメソッドがあります。

  1. getFullYear():年を取得します。
  2. getMonth():月を取得します(0が1月、1が2月、…、11が12月)。
  3. getDate():日付の日を取得します。
  4. getDay():曜日を取得します(0が日曜日、1が月曜日、…、6が土曜日)。
  5. getHours():時を取得します。
  6. getMinutes():分を取得します。
  7. getSeconds():秒を取得します。
  8. getMilliseconds():ミリ秒を取得します。
  9. getTime():エポックからの経過ミリ秒数を取得します。
  10. getTimezoneOffset():UTCとの時差を分単位で取得します。
  11. setFullYear():年を設定します。
  12. setMonth():月を設定します。
  13. setDate():日付の日を設定します。
  14. setHours():時を設定します。
  15. setMinutes():分を設定します。
  16. setSeconds():秒を設定します。
  17. setMilliseconds():ミリ秒を設定します。
  18. setTime():エポックからの経過ミリ秒数を設定します。
  19. toISOString():ISO8601形式の日付文字列を返します。
  20. toJSON():toISOString()と同様のISO8601形式の日付文字列を返します。
  21. toLocaleDateString():ロケールに応じた日付文字列を返します。
  22. toLocaleTimeString():ロケールに応じた時刻文字列を返します。
  23. toLocaleString():ロケールに応じた日付と時刻文字列を返します。
  24. toString():日付を文字列に変換します。
  25. valueOf():Dateオブジェクトを数値に変換します。

数値型の表示限界

Dateクラスにおける現在時刻は、1970年1月1日(UNIX時間)を基点として、
内部的にはミリ秒単位のNumber型として扱われます。

JavaScriptのNumber型は64ビットの浮動小数点数を使用しており、
小数部/整数部,正/負の値問わず、数字の格納に52ビット使用出来ます。

その為、Number型で精密に表現出来るのは15桁(1,000兆の位)であり、
「西暦何万年」や「紀元前何万年」のような、
膨大な数字が入る事は想定されていません。

Dateクラスの利用(具体例)

上のカレンダーは6つのグリッドエリアに分かれていますが、
実際に使用したDateクラスのクラスメソッドは4種類です。

例1


const today = new Date();

const in_year = today.getFullYear();
// 2024
const in_month_ja = today.getMonth() + 1;
// 5
const in_day = today.getDate();
// 2

展開されたクラスはオブジェクトとして振る舞う

ここでは、Dateクラスを呼び出してから、3つのメソッドを呼び出しています。
インスタンス(展開)されたクラスはオブジェクトとして振る舞い、
プロパティやメソッドを参照する事が出来ます。

リアルタイムの時間取得ではない

例1のtoday定数は定数として宣言しても、呼び出される度に値(時間)が変わります。
ただし、更新またはページを開いた時のみ、値が更新され、
リアルタイムで値が更新されている訳ではありません。

n月、x曜日の表し方


const days_1 = ['日', '月', '火', '水', '木', '金', '土'];
const days_2 = ["SUNDAY","MONDAY","TUESDAY","WEDNESDDAY","THURSDAY","FRIDAY","SATURDAY"];
const month_1 = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY",
"AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];

const in_dow_ja = days_1[today.getDay()];
//木
const in_dow_en = days_2[today.getDay()];
//THURSDAY
const in_month_en = month_1[today.getMonth()];
//MAY

月名に関して、英語では”August”を”8th month”のように言わない事と、
プログラムの数字は0から始まるという慣習から、”n月”はn-1
つまり0~11の数字で表されます。
曜日に関しては、日~土を0~6の数字で表します。
その為、数字を月名や曜日に変換するには、配列を作る必要があります。

例1では、n月を表す為に、数字を1加えていますが、
配列のインデックスは必ず0,1,2…の0から始まる整数となります。
これにより、値を加工する事が可能となります。

みらいワークの施設利用者
チュンチュン

「WordPress」でのHTML・CSS・JavaScriptに関する情報を、
提供させて頂く予定です。
使用プラグインは「Simple Custom CSS and JS」で、
JavaScriptの表示位置は必ず「要素内」です。
ただし、使用環境により異なる事をご了承ください。

サイト制作
「みらいワーク」利用者ノート
タイトルとURLをコピーしました