JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの日付オブジェクト：日付を比較する方法

コーディングの問題を解く際、Dateオブジェクトを使って日付や時刻を比較し、条件に応じて特定のロジックを処理することができます。この記事では、Dateオブジェクトを使って2つの日付を比較し、どちらが新しい（または古い）日付かを判定する方法を解説します。

準備

JavaScriptには組み込みのDateオブジェクトが用意されており、タイムスタンプに基づいたロジックを組むためのさまざまなメソッドを利用できます。まずは、以下のコードで新しいDateをインスタンス化してみましょう。

const date = new Date("09-20-2020"); //2020-09-20T07:00:00.000Z

console.log(date)を実行すると、時刻の部分（T以降の文字列）はデフォルトではあなたが住んでいる地域のタイムゾーンによって異なります。UTC時刻で扱いたい場合は、末尾のZを削除し、代わりに+HH:MMまたは-HH:MMを追加してください。

このセットアップ方法を理解しておくことは、次のセクションで比較関数を扱う際に重要になります。

次に、Dateコンストラクターで利用できるメソッドを確認してみましょう。その一つがgetTime()です。このメソッドを使うと、Dateオブジェクトを数値に変換できるため、日付を簡単に比較できるようになります。

このメソッドは、日付をエポック（1970年1月1日）からの経過ミリ秒数に変換します。以下がgetTimeメソッドの使用例です。

const date = new Date("09-20-2020")
   date.getTime(); //1600585200000

日付は新しいDateオブジェクトとしてインスタンス化されるため、ドット記法でgetTime関数にアクセスできます。

ロジックに活用できるDateオブジェクトのさまざまなメソッドについては、公式ドキュメントを確認することをおすすめします。これで問題に取り組む準備が整いました。

お題

2つの文字列と比較演算子が与えられ、演算子に応じて、より古い日付またはより新しい日付を返す関数を作成します。なお、渡される2つの文字列はDateオブジェクトに変換できることが保証されています。

解決手順

  1. 2つの文字列を新しいDateオブジェクトに変換します。Dateコンストラクターへの引数の渡し方についても調べてみましょう！
  2. getTime()メソッドを使って、1970年1月1日からの経過ミリ秒数を取得します。
  3. 条件文または三項演算子を使って、渡された比較演算子に応じた日付を判定します。
  4. ミリ秒を読みやすい日付文字列に変換して返します。

解答を参照する前に、まず自分で解いてみてください！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    body {
      font-family: 'Roboto', Courier, monospace
    }
  </style>
</head>
<body>
  <h1>Date Comparison</h1>
    <label for="comparison">Comparison (Choose One)</label>
    <div id="comparison" value="more.value">
      <input name="compare" type="radio" id="less" value=""/>
          <label for="less"> &lt; </label>
      <input name="compare" type="radio" id="more" checked value=""/>
          <label for="more"> &gt;= </label>
    </div>
 <br/>
    <label for="date-1">Date 1:</label>
    <input id="date-1" value="" type="date" name="date1" />
    <label for="date-2">Date 2:</label>
    <input id="date-2" value="" type="date" name="date2" />
    <input id="submit-button" type="submit" />
    <div id="demo"></div>
    <script>
        const handleSubmit = (date1, date2, compare) => {
        //to compare : getTime of each date
        date1Arr = date1.split("-");
        date2Arr = date2.split("-");
              //year, month (month is zero-based), day
        let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
        let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
        // getTime gets the number of milliseconds since Jan 1 1970. So the higher the number, the later the date.
        //use conditional or ternary to return Comparison
        let timeDisplay;
        if(compare === ">=") {
              timeDisplay = d1 >= d2 ? d1 : d2;
        } else {
              timeDisplay = d1 < d2 ? d1 : d2;
        }
        let timetoDisplay = new Date(timeDisplay);  
        document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
    }
    let date_1 = document.getElementById("date-1");
    let date_2 = document.getElementById("date-2");
    document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))
    </script>
  </body>
</html>

JavaScriptの日付処理は、最初は混乱しやすいものですが、少し練習すればすぐに慣れることができます。この記事では、JavaScriptで新しい日付を設定し、コンストラクターのメソッドにアクセスする方法を学びました。さらに、関数に渡された演算子に応じて、2つの日付を比較し、どちらが新しいか古いかを判定する方法も確認しました。

ここまでの内容をマスターしたら、次のステップとして、配列にアイテムが追加された日付を基準に、昇順または降順で配列をソートする方法を調べてみることをおすすめします。楽しく学び、諦めずに続けましょう！

  1. JavaScriptのObject.freeze()でオブジェクトを凍結する方法を徹底解説

    実際の開発の世界において、JavaScriptには他のプログラミング言語に見られるような従来のクラスの仕組みが存在しません。JavaScriptの中核をなしているのは「オブジェクト」と「コンストラクター」です。数あるコンストラクターメソッドの中でも、Object.freeze()はオブジェクトを「凍結（フリーズ）」するために使われる便利なメソッドです。 オブジェクトを凍結すると、新しいプロパティの追加ができなくなり、既存のプロパティを変更することもできなくなります。Object.freeze()は、オブジェクトが持つ列挙可能性（enumerable）、構成可能性（configurable）、

  2. JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説

    JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。new Date()コンストラクタを呼び出すだけで、現在の日時に基づいたDateオブジェクトを簡単に生成できます。以下に、ボタンをクリックすると現在の日時を持つDateオブジェクトを作成し、画面に表示するサンプルコードを示します。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport"