はじめに
この記事を読めばJavaScriptで日付操作が3倍速くなることができるようになります。
JavaScriptで日付操作を行う方法がわからない、もっと効率的に日付操作を行いたいという初心者の方におすすめの記事です。
徹底解説と実践的なサンプルコード10選をご紹介しますので、ぜひ最後までお読みください。
●JavaScriptで日付を扱う基本
JavaScriptで日付を操作するには、Dateオブジェクトを使用します。
Dateオブジェクトは、日付や時刻を表現・操作するためのオブジェクトで、様々なメソッドが用意されています。
●日付オブジェクトの生成方法
まずは、日付オブジェクトの生成方法を学びましょう。
日付オブジェクトは、下記のようにnew演算子とDateコンストラクタを使用して生成します。
// 現在の日時を持つDateオブジェクトを生成
const now = new Date();
console.log(now);
// 指定した日時を持つDateオブジェクトを生成
const specificDate = new Date(2023, 3, 17, 12, 34, 56);
console.log(specificDate);上記のサンプルコードでは、まず現在の日時を持つDateオブジェクトを生成しています。
次に、指定した日時（2023年4月17日12時34分56秒）を持つDateオブジェクトを生成しています。
なお、月は0から始まるため、4月は「3」と指定しています。
●日付操作の基本的な使い方
ここでは、日付操作の基本的な使い方をいくつかのサンプルコードを通して学びましょう。
○ サンプルコード1: 現在日時を表示
// 現在の日時を持つDateオブジェクトを生成
const now = new Date();
// 年・月・日・時・分・秒を取得
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
console.log(`${year}年${month}月${date}日 ${hours}時${minutes}分${seconds}秒`);このサンプルコードでは、現在の日時を表示しています。
Dateオブジェクトのメソッドを使って、年・月・日・時・分・秒を取得し、整形して表示しています。
○ サンプルコード2: 指定した日時を表示
// 指定した日時を持つDateオブジェクトを生成
const specificDate = new Date(2023, 3, 17, 12, 34, 56);
// 年・月・日・時・分・秒を取得
const year = specificDate.getFullYear();
const month = specificDate.getMonth() + 1;
const date = specificDate.getDate();
const hours = specificDate.getHours();
const minutes = specificDate.getMinutes();
const seconds = specificDate.getSeconds();
console.log(`${year}年${month}月${date}日 ${hours}時${minutes}分${seconds}秒`);このサンプルコードでは、指定した日時（2023年4月17日12時34分56秒）を表示しています。
先ほどの現在日時を表示するサンプルコードと同様の手順で、年・月・日・時・分・秒を取得し、整形して表示しています。
●日付操作の応用例
ここでは、日付操作の応用例をいくつかのサンプルコードを通して学びましょう。
○ サンプルコード3: 日付の差を計算
// 2つの日付を持つDateオブジェクトを生成
const date1 = new Date(2023, 3, 17);
const date2 = new Date(2023, 4, 17);
// 日付の差（ミリ秒）を計算
const diffMilliseconds = date2 - date1;
// 日付の差（日）に変換
const diffDays = diffMilliseconds / (1000 * 60 * 60 * 24);
console.log(`日付の差: ${diffDays}日`);このサンプルコードでは、2つの日付の差を計算しています。
まず、2つの日付を持つDateオブジェクトを生成し、それらの差（ミリ秒）を計算します。
その後、日付の差（日）に変換して表示しています。
○ サンプルコード4: 任意の日付を加算・減算
// 現在の日時を持つDateオブジェクトを生成
const now = new Date();
// 10日後の日付を計算
const tenDaysLater = new Date(now.getTime() + 10 * 24 * 60 * 60 * 1000);
console.log(`10日後: ${tenDaysLater}`);
// 5日前の日付を計算
const fiveDaysAgo = new Date(now.getTime() - 5 * 24 * 60 * 60 * 1000);
console.log(`5日前: ${fiveDaysAgo}`);このサンプルコードでは、任意の日付を加算・減算しています。
まず、現在の日時を持つDateオブジェクトを生成し、それに対して日数分のミリ秒を加算・減算して新しい日付を計算します。
○ サンプルコード5: 曜日を求める
// 現在の日時を持つDateオブジェクトを生成
const now = new Date();
// 曜日を取得（0: 日曜, 1: 月曜, ..., 6: 土曜）
const dayOfWeek = now.getDay();
// 曜日名の配列
const weekNames = ['日', '月', '火', '水', '木', '金', '土'];
console.log(`今日は${weekNames[dayOfWeek]}曜日です`);このサンプルコードでは、曜日を求めて表示しています。
DateオブジェクトのgetDayメソッドを使って曜日を取得し（0: 日曜, 1: 月曜, …, 6: 土曜）、曜日名の配列から対応する曜日名を取得して表示しています。
○ サンプルコード6: 時間のフォーマット変更
// 現在の日時を持つDateオブジェクトを生成
const now = new Date();
// 時間のフォーマット変更関数
function formatTime(date) {
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
}
console.log(`現在時刻: ${formatTime(now)}`);このサンプルコードでは、時間のフォーマットを変更して表示しています。
まず、現在の日時を持つDateオブジェクトを生成し、formatTime関数で時間のフォーマットを変更しています。
この関数では、時間、分、秒をそれぞれ2桁に揃えてフォーマットしています。
○ サンプルコード7: カウントダウンタイマー
// 目標日時までのカウントダウンタイマーを作成
const targetDate = new Date(2023, 11, 31, 23, 59, 59);
function countdown() {
const now = new Date();
const remainingMilliseconds = targetDate - now;
if (remainingMilliseconds <= 0) {
console.log("カウントダウン終了");
return;
}
const remainingSeconds = Math.floor(remainingMilliseconds / 1000);
const days = Math.floor(remainingSeconds / (60 * 60 * 24));
const hours = Math.floor((remainingSeconds % (60 * 60 * 24)) / (60 * 60));
const minutes = Math.floor((remainingSeconds % (60 * 60)) / 60);
const seconds = remainingSeconds % 60;
console.log(`残り${days}日${hours}時間${minutes}分${seconds}秒`);
}
// 1秒ごとにカウントダウン関数を実行
setInterval(countdown, 1000);このサンプルコードでは、目標日時までのカウントダウンタイマーを作成しています。
目標日時を持つDateオブジェクトを生成し、カウントダウン関数で残り時間を計算して表示します。
setInterval関数を使用して、1秒ごとにカウントダウン関数を実行しています。
○ サンプルコード8: 日付ピッカーの実装
※ ここでは、日付ピッカーの実装については説明が難しいため、参考リンクを記載します。
○ サンプルコード9: うるう年判定
// うるう年判定関数
function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
// うるう年を判定して表示
const year = 2024;
if (isLeapYear(year)) {
console.log(`${year}年はうるう年です`);
} else {
console.log(`${year}年はうるう年ではありません`);
}このサンプルコードでは、うるう年の判定を行っています。
うるう年判定関数isLeapYearを定義し、引数として渡された年がうるう年であるかどうかを判断しています。
この関数を使って、指定した年がうるう年であるかどうかを判定し、結果を表示しています。
○ サンプルコード10: カレンダー作成
// カレンダー作成関数
function createCalendar(year, month) {
const firstDayOfMonth = new Date(year, month, 1);
const lastDayOfMonth = new Date(year, month + 1, 0);
const calendar = [];
// 1日の曜日まで空白を埋める
for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
calendar.push(' ');
}
// カレンダーに日付を追加
for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
calendar.push(String(day).padStart(2, '0'));
}
// 週ごとに分割して表示
while (calendar.length > 0) {
console.log(calendar.splice(0, 7).join(' '));
}
}
// カレンダーを作成して表示
const year = 2023;
const month = 4; // 0: 1月, 1: 2月, ..., 11: 12月
createCalendar(year, month);このサンプルコードでは、カレンダーを作成して表示しています。
まず、指定された年月の1日と最終日を持つDateオブジェクトを生成し、その月のカレンダーを作成します。
1日の曜日まで空白を埋め、日付を追加した後、週ごとに分割して表示します。指定した年と月でカレンダーを作成して表示しています。
●注意点と対処法
- JavaScriptの日付操作には、ブラウザやタイムゾーンによる違いがあるため注意が必要です。
必要に応じて、専用の日付操作ライブラリ（例: moment.js、date-fns）を使用することを検討してください。 - ユーザーが入力した日付や時刻を扱う場合、入力チェックやフォーマットの検証が重要です。
正しい形式で入力されていることを確認し、エラーが発生しないように対処してください。 - 日付操作において、月や曜日のインデックスが0から始まる点に注意してください。
例えば、月は0が1月、11が12月となります。これによる誤解を避けるため、適切な変数名やコメントを用意してください。
まとめ
JavaScriptで日付操作を行う際には、Dateオブジェクトを活用し、様々な処理が可能です。
しかし、ブラウザやタイムゾーンによる違いや、インデックスが0から始まる点に注意してください。
また、ユーザー入力に対して適切なチェックやフォーマットの検証を行い、エラーが発生しないように対処することが重要です。
