【超基本】Dateオブジェクトについていろいろ確認してみた【JavaScript】

【超基本】Dateオブジェクトについていろいろ確認【JavaScript】

JavaScriptを基礎の基礎からやり直し
今回はDateオブジェクトについて仕様を確認しながらまとめてみました

参考ページ : mdn web docs - Date

そもそもDateとは

Date は、世界時間(UTC)の 1970/01/01 からの経過ミリ秒数 を表すNumberの値を含んだオブジェクト

確認用コード

create-react-app --template typescriptで作成したTypeScript上に作る
Calendarというコンポーネントを作成して、index.tsxで読み込ませる

ボタンを押したらコンソールにいろいろ出す感じのオーソドックスな確認方法です

typescriptでは型を理解することが大事だと思うので、
確認したい変数や関数と同時にtypeofで型もできるだけ調べようと思います

Calendar.tsx

function Calendar() {
  const Confirm = ()=> {
    console.log({/* ここに確認したいモノを入れる */})
    console.log(typeof({/* 確認したいモノのタイプを調べる */}))
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

コンストラクタ

Date()

関数として呼び出すと現在の日時の文字列が返ってくる
new Date().toString()でも同じ

function Calendar() {
  const date1 = new Date();
  const date2 = new Date().toString();

  const Confirm = ()=> {
    console.log("Date() : " + Date())
    console.log("date1 : " + date1)
    console.log("date2 : " + date2)
    console.log("Date() type : " + typeof(Date()))
    console.log("date1 type : " + typeof(date1))
    console.log("date2 type : " + typeof(date2))
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Date() : Wed Mar 16 2022 21:40:26 GMT+0900 (日本標準時)
> date1 : Wed Mar 16 2022 21:37:38 GMT+0900 (日本標準時)
> date2 : Wed Mar 16 2022 21:37:38 GMT+0900 (日本標準時)
> Date() type : string
> date1 type : object
> date2 type : string

関数としてのDate()はStringを返して、
コンストラクタとしてのnew Date()(date1)はDateオブジェクトを返していることが分かります

静的メソッド

Date.now()

UTCから経過したミリ秒数(number型)を返す

function Calendar() {

  const Confirm = ()=> {
    console.log("Date.now() : " + Date.now())
    console.log("Date.now() type : " + typeof(Date.now()))
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Date.now() : 1647434659476
> Date.now() type : number

Date.parse()

こちらは日時を表す文字列を解釈して、now()と同様UTCからの経過時間を返す

function Calendar() {

  const Confirm = ()=> {
    console.log("Date.parse(2022/03/16) : " + Date.parse("2022/03/16"))
    console.log("Date.parse(2022/03/16) type : " + typeof(Date.parse("2022/03/16")))
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Date.parse(2022/03/16) : 1647356400000
> Date.parse(2022/03/16) type : number

Date.UTC()

引数(左から year, month, day, hour, minute, second, millisecond)を2~7(つまり月までは最低要る)を指定して、
UTCからの経過ミリ秒数を返す

function Calendar() {

  const Confirm = ()=> {
    console.log("Date.UTC(2022,3,16,21,53) : " + Date.UTC(2022,3,16,21,53))
    console.log("Date.UTC(2022,3,16,21,53) type : " + typeof(Date.UTC(2022,3,16,21,53)))
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Date.UTC(2022,3,16,21,53) : 1650145980000
> Date.UTC(2022,3,16,21,53) type : number

インスタンスメソッド

Date.get○○()

Dateオブジェクト内の各要素の取り出し

function Calendar() {

  const Confirm = ()=> {
    const Today = new Date();
    console.log("Today.getFullYear() : " + Today.getFullYear())
    console.log("Today.getMonth() : " + Today.getMonth())
    console.log("Today.getDate() : " + Today.getDate())
    console.log("Today.getDay() : " + Today.getDay())
    console.log("Today.getHours() : " + Today.getHours())
    console.log("Today.getMinutes() : " + Today.getMinutes())
    console.log("Today.getSeconds() : " + Today.getSeconds())
    console.log("Today.getMilliseconds() : " + Today.getMilliseconds())
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Today.getFullYear() : 2022
> Today.getMonth() : 2
> Today.getDate() : 16
> Today.getDay() : 3
> Today.getHours() : 22
> Today.getMinutes() : 7
> Today.getSeconds() : 50
> Today.getMilliseconds() : 909

月と曜日が0から始まることに注意

月 : 0 - 11
曜日 : 0 - 6 , 0:日 ,1:月 ~ 6:土

Date.set○○()

今度は時間をセットする

function Calendar() {

  const Confirm = ()=> {
    const Today = new Date();
    console.log("Today : " + Today)

    Today.setFullYear(2023)
    Today.setMonth(11)
    Today.setDate(17)
    Today.setHours(12)
    Today.setMinutes(35)
    Today.setSeconds(15)

    console.log("Today : " + Today)
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> Today : Wed Mar 16 2022 22:21:45 GMT+0900 (日本標準時)
> Today : Sun Dec 17 2023 12:35:15 GMT+0900 (日本標準時)

setで指定した日時になっていますね
当たり前ですが曜日はセットできないですね

toString関係

• toString : 基本
• toDateString : 何月何日何曜日までをHumanReadableな感じにする
• toISOString : ISOに準拠した形にする
• toJSON : toISOStringを使ってJSONをStringに変換する
• toUTCString : UTCに変換
• toLocaleString : 日本用の表示 ほかの国ではそれぞれその国独自の形に変換しているはず

function Calendar() {

  const Confirm = ()=> {
    const Today = new Date();
    console.log("toString: " + Today.toString())
    console.log("toDateString: " + Today.toDateString())
    console.log("toISOString: " + Today.toISOString())
    console.log("toJSON: " + Today.toJSON())
    console.log("toUTCString: " + Today.toUTCString())
    console.log("toLocaleString: " + Today.toLocaleString())
  }

  return (
    <div>
      <input type="button" value="確認！" onClick={Confirm} />
    </div>
  )
}
export default Calendar;

出力

> toString: Wed Mar 16 2022 22:47:31 GMT+0900 (日本標準時)
> toDateString: Wed Mar 16 2022
> toISOString: 2022-03-16T13:47:31.638Z
> toJSON: 2022-03-16T13:47:31.638Z
> toUTCString: Wed, 16 Mar 2022 13:47:31 GMT
> toLocaleString: 2022/3/16 22:47:31

その他は、、、

その他にももう少しあったけど、あまり使えなさそうだったので割愛!