WebアプリやWebサイトで時刻を表示する機能や、特定の日付から何日後かを計算するなどの日付と時刻に関する処理は頻出の作業です。
JavaScriptの場合だとDateというクラスが用意されていて、Dateを使うことで色んな計算が簡単に行うことができます。
もちろん初学者の方でも理解できるものなので今回の内容はぜひ練習してみてください。
また動画もあるので必要に応じて活用してください。
JavaScriptのDateクラスを使って日付や時刻を操作する方法
まずDateクラスをインスタンス化するところから始めます。
インスタンスという言葉が慣れない方も多いかもしれませんが、簡単に言うと「Dateクラスを自分のコードで使えるようにする」と言う意味です。
// Dateクラスをインスタンス化して変数nowに格納
let now = new Date();
console.log(now); //「Sat Mar 04 2023 18:18:40 GMT+0900 (日本標準時)」と出力されるDateクラスをインスタンス化すると、その時点での日付と時刻をまずは返してくれます。
お手元でやってもらうと分かるのですが実行時点での日付なので、実行するタイミングによって出力結果は変わります。
まずこれだけでも非常に便利です。
表示方法は上記のような形式でプログラミングの世界では「タイムゾーン」と言ったりします。
JavaScriptのDateクラスから日付を取得する方法
実務でも現時点での日付と時刻を表示するのはよくあるのですが、さらに細かく「年」「月」「日」と言ったような単位で取得することも可能です。
let now = new Date();
// ここから追加
let y = now.getFullYear();
// ０を起点にしているため１を加算する
let m = now.getMonth() + 1;
let d = now.getDate();
console.log(y); //「2023」と出力される
console.log(m); //「3」と出力される
console.log(d); //「4」と出力される・getFullyear( )：年を取得
・getMonth( )：年を取得
・getDate( )：年を取得
getMonthについては注意が必要で、プログラミングの世界で数字は「0」を起点に数えるため「1」を足す必要があります。
（例）「1月＝0」となるため、getMonth( ) + 1にしないと1月と表示できない
また曜日については少し変わった方法になります。
let now = new Date();
let y = now.getFullYear();
let m = now.getMonth() + 1;
let d = now.getDate();
// ここから追加
// 曜日は日曜日を起点に０〜６の数字になる
let ddList = ["月", "火", "水", "木", "金", "土", "日"];
let dd = now.getDay();
dd = ddList[dd];
console.log(y); //「2023」と出力される
console.log(m); //「3」と出力される
console.log(d); //「4」と出力される
// ここを追加
console.log(dd); // 「土」と出力される まずgetDay( )とすると曜日を取得できるのですが、注意点としては「日曜日を起点とした0から6の数字を返す」と言うことです。
つまりプログラミングの世界では曜日は以下のようになっているということです。
・日曜日：0
・月曜日：1
・火曜日：2
・水曜日：3
・木曜日：4
・金曜日：5
・土曜日：6
「日本語ではなく数字になる」「スタートが日曜日になる」という2点は少し違和感があるのですが残念ながら覚えるしかありません。
そこで日本語で曜日を表示するには事前に日本語の表示を配列で作っておきます。
作った配列のインデックス番号をgetDay( )で返ってくる値にすればOKです。
例題の場合はgetDay( )で「6」が返ってくるので配列の6番目である「土」が表示できます。
〜省略〜
// 日本語で表示したいものを日曜日を起点にして配列で準備しておく
let ddList = ["日", "月", "火", "水", "木", "金", "土"];
// getDay()には数字として返ってきている
let dd = now.getDay();
// getDay()で返ってきた番号を配列のインデックス番号として利用
dd = ddList[dd];
〜省略〜JavaScriptのDateクラスで時刻を取得する方法
Dateクラスをもとにメソッドを使うと時刻についても細かく取得することができます。
let now = new Date();
// ここから変更
let h = now.getHours();
let mm = now.getMinutes();
let s = now.getSeconds();
console.log(h); //「23」と出力される
console.log(mm); //「40」と出力される
console.log(s); //「14」と出力される・getHours( )：時間を取得
・getMinutes( )：分を取得
・getSeconds( )：秒を取得
JavaScriptで日付・時刻の表示をカスタマイズする方法
先ほどやった日付の取得と合わせると以下のように自分の好きな形式で日付・時刻を表示することができるようになります。
let now = new Date();
let y = now.getFullYear();
let m = now.getMonth() + 1;
let d = now.getDate();
let ddList = ["日", "月", "火", "水", "木", "金", "土"];
let dd = now.getDay();
dd = ddList[dd];
let h = now.getHours();
let mm = now.getMinutes();
let s = now.getSeconds();
console.log(`${y}年${m}月${d}日${dd}曜日${h}時${mm}分${s}秒`);
// 「2023年3月4日土曜日23時40分14秒」と出力されるちなみにですがJavaScriptではtoLocaleString( )という関数があり、こちらを使うと記号式で表示することができます。
日本語でなくても大丈夫なのであればtoLocaleString( )を使った方がコードは短くて済みますね。
let now = new Date();
console.log(now.toLocaleString());
// 「2023/3/4 23:40:14」と出力されるJavaScriptで日付の計算をする方法
Dateクラスと便利なメソッドを組み合わせることで細かく情報が取れることが分かりました。
最後に日付の計算についても触れておきたいと思います。
「あと○日後」といった表示もWebサイトでは使われやすいです。
今回は例題として以下のように2種類の日付を用意して日付の差を求めてみます。
let day1 = new Date("2022/12/13");
let day2 = new Date("2022/12/26");上記のままだと数字ではなく文字列でしかないので引き算をすることができません。
引き算ができるように上記の形式を数字に直す必要があり、よく使う方法としては「ミリ秒」という最小単位に変換します。
「ms」という単位のミリ秒は「1,000ms = 1秒」という関係になっています。
そしてJavaScriptではgetTime( )というメソッドを使うとミリ秒に変換してくれます。
let day1 = new Date("2022/12/13");
let day2 = new Date("2022/12/26");
// ここから追加
// 計算しやすいミリ秒に変換
day1 = day1.getTime();
day2 = day2.getTime();ミリ秒に変換したことで引き算ができるわけですが、引き算した結果もミリ秒になるわけです。
そこで計算結果も何かしらに分かりやすい単位に変換する必要するのですが、今回は「日数」を単位にした数字にしてみたいと思います。
let day1 = new Date("2022/12/13");
let day2 = new Date("2022/12/26");
day1 = day1.getTime();
day2 = day2.getTime();
// ここから追加
// 1日＝24時間、1時間＝60分、1分＝60秒、1秒＝1,000m秒
console.log((day2 - day1) / (24 * 60 * 60 * 1000)); // 「13」が出力される「日数」に変換するのは私たちが知っている知識で対応できます。
1日＝24時間、1時間＝60分、1分＝60秒、1秒＝1,000ミリ秒ということで「24*60*60*1000」のもので割ってあげることで「日数」として数字を出すことになります。
他にも「時間」「分」「秒」にも単位を変えて出すことができます。
let day1 = new Date("2022/12/13");
let day2 = new Date("2022/12/26");
day1 = day1.getTime();
day2 = day2.getTime();
console.log((day2 - day1) / (24 * 60 * 60 * 1000)); // 「13」が出力される
// ここから追加
console.log((day2 - day1) / (60 * 60 * 1000)); // 「312」が出力される
console.log((day2 - day1) / (60 * 1000)); // 「18720」が出力される
console.log((day2 - day1) / 1000); // 「1123200」が出力されるday1とday2の差である13日は、「312時間」「18,720分」「1,123,200秒」という具合です。
日付の処理は細かく分解したり合体したりなど自分なりに色んなパターンを練習しておくと良いでしょう。