RailsGitMySQLCUIHerokuSalesforceAWSAuth0エンジニア転職SEOアフィリエイトプロフィールプライバシーサイトマップこのブログは未経験からのエンジニア転職やプログラミングの勉強方法などを発信する、現役エンジニアによるエンジニアのためのトータル技術ブログです。ブログとご一緒にSNSのフォローもよろしくお願いします。LINE2021.05.04スポンサーリンクこんにちは、あっきー(IwswAkht)です。JavaScriptでよく使うけど忘れがちなDateオブジェクトの処理についてまとめます。任意の日付を取得したいけど、実装方法がわからない、ついつい取得の仕方を忘れてしまうなどのかたに向けて早見表として活用していただけるような記事になれば幸いです。※JavaScriptは以降jsと略して表記します。日付を0埋めする指定した書式に日付文字列をフォーマットする日付を比較する日付の差分を求める文字列変換UNIXタイムスタンプライブラリさいごにさいしょにjsの標準のデータ型にはdate型が存在しないので組み込みのDateオブジェクトを利用することで日付を表現できます。Dateオブジェクトの生成には、基本的に以下のようにコンストラクターを経由する必要があります。Date('2021/01/01');基本的な宣言の方法を確認したところでいろいろな方法での日付の取得の仕方を確認していきましょう。Date()で取得できます。取得したら、getFullYear()、getMonth()、getDate()の関数を用いて、それぞれ年月日を取得できますので取得したいフォーマットで文字列を連結させることで表現可能です。先ほどのサンプルで本日の日付を取得するサンプルで年月日を取得して表示しました。jsのDateオブジェクトでは年月日以外にも時分秒ミリ秒までの単位で時間を取得するためのメンバメソッドが用意されています。以下対応表になります。ミリ秒(0〜999)サンプルは以下になります。曜日を表示するためのメンバメソッドもDateオブジェクトでは用意されています。getDay()メソッドを利用することで、0から6の数値が返却されます。0が日曜日で6が土曜日に対応しています。あとは返り値の数値に対応する曜日の配列をで紐づければ実現可能です。指定した日付を取得するためには先ほどの項目で利用したget*系のメソッドと組み合わせてset*メソッドを利用することで実現可能です。以下対応表になります。ミリ秒(0〜999)組み合わせながらいろいろな日付の指定方法をサンプルで確認していきます。明日を取得するにはgetDate()に1を加えた値をsetDate()の引数に与えてあげれば表現できます。setDate()を利用することで月末に1日加えた場合に翌月の1日の日付を取得することができます。昨日を取得する場合は明日の取得でgetDate()に1加えたのに対し、-1してあげればオッケーです。月末を取得するには1ヶ月加えて翌月にしてsetDate(0)で取得します。今月末でなく指定した月の最終日を知りたい場合はsetMonth()で指定した月を取得し、同様にsetDate(0)してあげることで表現可能です。月初の取得はsetDate(1)してあげるだけでオッケーです。CodePen.日付を0埋めする日付を2021/1/1ではなく2021/01/01のように0埋めするためには以下のように先頭に0を加えてslice()メソッドを利用する方法で表現可能です。day}).slice(-2);slice()は、文字列の中から、指定した開始位置から終了位置までの部分を返却するメソッドです。-2を指定することで右端から数えて2文字をとり出せます。10日以上の場合は010の右端から2桁で10日、10日以下の場合は09の右端から2桁で09日にすることができるということです。以下サンプルになります。CodePen.指定した書式に日付文字列をフォーマットする日付のフォーマットをyyyy/MM/ddやyyyy年MM月dd日で表示したり、曜日を表示したいなどサービスによっていろいろな表示形式が求められるかと思います。そんな時は関数化しておいて自由なフォーマットに変更できるよう拡張性高くしておくと便利ですよね。以下のサンプルで大体の日付フォーマットでの表現が可能ですので参考になれば幸いです。比較演算子を利用することができます。===のような日付の一致処理を行う場合はできません。Dateオブジェクトは言葉の通りオブジェクトなので、異なるオブジェクトは値が一致していても同じと判断することはありません。細かい説明は割愛しますが、プログラミングを続ければ自ずと値が一緒でもオブジェクトが違うという問題は必ずやってきますので知らなかった方は頭の片隅に置いておいてください。やって日付の一致を行うのか。結論から言いますとgetTime()メソッドを利用することです。このメソッドは日付を数字に(UNIXタイムスタンプ)変換するメソッドです。数字にすれば===で一致を比較できることはできそうですね。基本的に一致意外でも日付を比較演算で比較する時は、このgetTime()メソッドでの比較をするといいと思います。それではいくつかサンプルを載せておきます。CodePen.日付の差分を求めるgetTime()メソッドを利用することで日付Aと日付Bの差分を求めることができます。定型的な差分計算ですので決まったコードとして覚えておくといざ必要になった時にサッと使えて便利です。毎回getFullYear()とかgetMonth()したりめんどくさい。一発で出来んのかという方向けにstringにキャストするメンバメソッドもDateオブジェクトでは搭載されています。表示形式は決まってしまいますので標準の表示形式で大丈夫という方のみ利用するメソッドという感じです。メソッド一覧は以下になります。各いくつかの挙動のサンプルを以下に載せておきますので参考にしてください。CodePen.UNIXタイムスタンプ僕がjsを始めたばかりの時にこのUNIXタイムスタンプでしばし混乱したので簡単にふれておきます。Date())のように本日の日付を出力すると表示形式は以下のようになります。(日本標準時)そこから明日の日付をうまく取得できているかデバックしようとconsole.logにdate.setDate(date.getDate()+1)を出力すると以下の出力結果が表示されます。1620183116この数字の羅列がUNIXタイムスタンプです。僕はここでいきなり数字になって若干混乱しました。UNIXタイムスタンプは一言でいえば1970年1月1日午前0時0分0秒(UTC)からの経過秒数で日時を表現するやり方です。細かいことは置いておいて、数字の羅列がいきなり表示されてなんなのかさっぱりわからないとなったときに、これはUNIXタイムスタンプなんだと判断できるようになっておくだけでオッケーです。変換ツール」とググれば何かしら変換できるサイトがありますのでそこで期待値が取得できているか確認しましょう。参考に1つURLおいておきます。余裕があったら2038年問題についても軽く見ておくとよいぞライブラリライブラリはMoment.jsが使いやすいようです。使ってみようかと思いますのでその際は別途記事を書こうかと思いますのでしばしお待ちください。さいごにさいごまで読んでいただきありがとうございます!Dateオブジェクトでの日付処理というだけでも随分なボリュームになってしまいました。jsはおくが深いのでこれを機に勉強始めてみたという方が少しでも増えたらうれしいです。~モダンスタイルによる基礎から現場での応用までamazonkindle楽天ブックス楽天Koboこの記事を気に入っていただけましたらTwitterdでもプログラミングに関してのツイートをリアルタイムでしていますのでご一緒にフォローもお願いします。あっきーをフォローするIT転職ならレバテック!僕は未経験からSESの企業にエンジニアとして転職し、その後はフリーラン、現在は受託開発企業に転職しました。エンジニアとしていろいろな働き方を経験し、いろいろな転職サイトや転職エージェントの方にお話を伺いました。その経験の中でだいじだと感じたことは、ITに特化した転職エージェントのサービスを利用することです。幅広い業界に対応した転職エージェントはIT転職に特化したエージェントと比べると紹介先の数が少ないです。そのため希望してない紹介先に転職し、思ってたのと違うとなることもあります。ならないためにエンジニアを目指すなら必ずIT特化の転職サービスを登録し、たくさんの選択肢の中から自分が行きたいと思う企業を探してください。僕はフリーランスでの案件探し、受託開発企業の転職の時もレバテックのかたに紹介していただきました。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。LINEスポンサーリンク駆け出しエンジニアのつぶやき関連記事JavaScript【jQuery】テーブルデータを取得しCSV出力する方法jqueryを使ってテーブルデータを取得してCSV出力する方法です。全件CSV出力はもちろん、検索結果のみのCSV出力とテーブルデータが可変する場合でも現在表示されているテーブルデータをCSVにするプログラムなので対応が可能です。Transitionでクロスフェードなスライダーをつくる方法Vue.jsを使用したスライドの実装方法を解説。ボタンクリックで切り替わるスライドでなく、時間経過で自動で画像がスライドするホームページのヘッダーなどで使用する想定で作りました。APIを使ってJavascript、jQueryから動画を再生する方法を解説します。(ミュート)の方法を記載。Mixでフロントエンドの画面遷移を行う方法VueRouter×LaravelMixを使ったフロントエンドでの画面遷移の方法。Laravelでサーバー処理を画面はVue.jsと処理を分けてSPAサイトを構築したい人のための基礎知識を書きました。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。2020.11.10【簡単】アマゾンアフィリエイトリンクのつくり方【ヨメレバ・カエレバではないよ】2020.08.30。