JavaScriptで日付操作が3倍速くなる！初心者向け解説と実践サンプル10選

はじめに
●JavaScriptで日付を扱う基本
●日付オブジェクトの生成方法
●日付操作の基本的な使い方
- ○サンプルコード1：現在日時を表示
- ○サンプルコード2：指定した日時を表示
●日付操作の応用例
●注意点と対処法
まとめ

はじめに

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オブジェクトを作成しています。

JavaScriptでは月の指定が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オブジェクトを生成し、その情報を表示する例です。

// 指定した日時を持つ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秒を指定してDateオブジェクトを生成しています。

その後、先ほどの現在日時を表示するサンプルコードと同様の手順で、年月日と時分秒を取得し、整形して表示しています。

●日付操作の応用例

日付操作の応用例について、いくつかのサンプルコードを通じて学んでいきましょう。

より複雑な操作や実践的な使用例を見ていきます。

○サンプルコード3：日付の差を計算

2つの日付の差を計算する方法を見てみましょう。

次のコードは、2つの日付オブジェクトを生成し、その差を日数で計算する例です。

// 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つの日付を表すDateオブジェクトを生成します。

次に、これらの日付の差をミリ秒単位で計算し、それを日数に変換しています。

この方法を使えば、例えばイベントまでの残り日数や、プロジェクトの進行期間などを簡単に計算できます。

○サンプルコード4：任意の日付を加算・減算

特定の日付から一定期間後や前の日付を求める方法を見てみましょう。

次のコードは、現在の日時から10日後と5日前の日付を計算する例です。

// 現在の日時を持つ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（日曜日）から6（土曜日）までの値を返します。

そして、あらかじめ用意した曜日名の配列から対応する曜日名を取得して表示しています。

この方法は、例えば営業日の判定や、曜日ごとのスケジュール管理などに活用できます。

○サンプルコード6：時間のフォーマット変更

日付や時刻を特定のフォーマットで表示したい場合があります。

次のコードは、現在の時刻を「HH:MM:SS」形式でフォーマットして表示する例です。

// 現在の日時を持つ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)}`);

このコードでは、formatTime関数を定義して時間のフォーマットを変更しています。

この関数内で、時間、分、秒をそれぞれ2桁に揃えてフォーマットしています。

padStartメソッドを使用することで、1桁の数字の場合でも必ず2桁で表示されるようになっています。

このような時間のフォーマット変更は、ログ出力やユーザーインターフェースの表示などで活用できます。

○サンプルコード7：カウントダウンタイマー

特定の日時までのカウントダウンを表示する機能は、多くのWebサイトやアプリケーションで使用されています。

次のコードは、指定した目標日時までのカウントダウンタイマーを作成する例です。

// 目標日時までのカウントダウンタイマーを作成
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オブジェクトを生成しています。

そして、countdown関数で現在時刻と目標日時の差を計算し、残り時間を日、時間、分、秒に変換して表示しています。

setInterval関数を使用して1秒ごとにcountdown関数を実行することで、リアルタイムにカウントダウンが更新されます。

このようなカウントダウンタイマーは、イベントの開始時間や販売開始時間の告知などに効果的です。

○サンプルコード8：日付ピッカーの実装

日付ピッカーは、ユーザーが簡単に日付を選択できるUIコンポーネントです。

JavaScriptで日付ピッカーを実装する方法はいくつかありますが、ここでは基本的な考え方と注意点を説明します。

日付ピッカーの実装には、次の要素が必要です。

カレンダーを表示する機能
年月の切り替え機能
日付の選択機能
選択された日付の取得と表示機能

これらの機能を実装するには、DOMの操作やイベントハンドリングなど、JavaScriptの様々な機能を組み合わせる必要があります。

また、アクセシビリティに配慮し、キーボード操作にも対応することが重要です。

実際の実装は複雑になるため、多くの開発者は既存のライブラリやフレームワークを利用します。

例えば、jQueryUIやFlatpickrなどのライブラリを使用すると、簡単に高機能な日付ピッカーを実装できます。

自作する場合は、まずシンプルな機能から始め、徐々に機能を追加していくアプローチがおすすめです。

また、ブラウザの互換性やモバイルデバイスでの使いやすさにも注意を払う必要があります。

○サンプルコード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関数を定義してうるう年の判定を行っています。

うるう年の条件は次の通りです。

4で割り切れる年はうるう年
ただし、100で割り切れる年はうるう年でない
ただし、400で割り切れる年はうるう年

この条件を論理演算子を使って簡潔に表現しています。

この関数を使用することで、指定した年がうるう年であるかどうかを簡単に判定できます。

うるう年の判定は、正確な日付計算や長期的なスケジュール管理において非常に重要です。例えば、プロジェクト管理ツールや予約システムなどで、正確な日数を計算する際に活用できます。

○サンプルコード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);

このコードでは、createCalendar関数を定義してカレンダーを作成しています。

この関数は次の手順でカレンダーを生成します。