選択した日付範囲のデータを取得中に、計算が若干の誤差があることに気付きました。しかし、日付を 1 日減らすと、データは正確に一致しました。

うーん…コード内での日付の処理方法に問題がある可能性があります。おそらくタイムゾーンが正しく処理されていないのでしょう。そして、はい、私は正しかったのです!

異なるタイムゾーンのユーザーが関与するアプリケーションを構築する場合、日付を適切に処理するのは難しい場合があります。日付を UTC で保存するのは一貫性を確保するための一般的なベスト プラクティスですが、ユーザーがローカル タイムゾーンで日付を入力する場合、特にフィルタリングやクエリ中に状況が複雑になる可能性があります。

開発者は、これらの変換を処理するためにネイティブの JavaScript Date オブジェクト を利用することがよくあります。ただし、このアプローチでは、Node.js と Chrome などのブラウザー コンソールなど、環境間で不整合が生じる可能性があります。この記事では、日付とタイムゾーンの変換を適切に処理することがなぜ重要なのか、Luxon によってこのプロセスがどのように簡単になるのか、ネイティブ JavaScript の Date オブジェクトに依存すると不整合が生じる理由を探ります。

問題: UTC ストレージとローカル時間フィルタリング

日付が UTC で保存される場合、日付はタイムゾーンによって生じる曖昧さを排除する世界標準を表します。ただし、ユーザーは通常、ローカル タイムゾーンの観点から考えます。この不一致は、ユーザーが現地時間の入力を使用して日付でレコードをフィルタリングしようとすると明らかになります。

ユーザーの現地時間入力が適切に処理されなかった場合、レコードの欠落につながる可能性がある例を見てみましょう。

シナリオ例: GMT-7 タイムゾーンのユーザー

GMT-7 タイムゾーン (太平洋夏時間) にいるユーザーを想像してください。 2024 年 9 月 5 日、現地時間で 午後 10 時 にレコードを作成します。舞台裏で何が起こっているかは次のとおりです:

• 2024 年 9 月 5 日、午後 10 時 GMT-7 は、2024 年 9 月 6 日、午前 5 時 UTC に変換され、そのようにデータベースに保存されます。
• ただし、ユーザーは、このレコードを 9 月 5 日に作成したと認識します。

フィルターの不一致

次に、ユーザーが 9 月 5 日 に作成されたすべてのレコードをクエリしたいとします。彼らは、記録を取得することを期待して、日付 ​​2024 年 9 月 5 日 を入力しました。ただし、タイムゾーンの違いを調整せずに、システムが入力日付を保存されている UTC 日付と直接比較すると、ユーザーはレコードを 見逃してしまいます ことになります。なぜ？

• レコードは 9 月 6 日 (UTC) としてデータベースに保存されました。
• ユーザーは 9 月 5 日 (現地時間) をフィルタリングしますが、システムはこれを UTC と比較するため、一致しません。

JavaScript 日付オブジェクト: 環境間での不一致

次のコード例は、日付と時刻の変換を処理するためにネイティブ JavaScript Date オブジェクトを使用する場合、特に Node.js やブラウザ (Chrome コンソールなど) などの異なる環境間で発生する一般的な問題を示しています。

コード例:

function convertToUtcStartOfDay(isoString) {
  // Step 1: Parse the ISO string into a Date object
  let localDate = new Date(isoString);

  // Step 2: Set the time to the start of the day (00:00:00) in local time zone
  localDate.setHours(0, 0, 0, 0);

  // Step 3: Get the UTC time using toISOString() – it converts local time to UTC
  let utcStartOfDay = localDate.toISOString();

  return utcStartOfDay; // This will be in UTC
}

// Example usage:
let frontendDate = "2023-08-22T00:00:00 05:30"; // ISO string with timezone offset
let startOfDayUtc = convertToUtcStartOfDay(frontendDate);

console.log(startOfDayUtc); // Expected output: "2023-08-21T18:30:00.000Z"

この例では、ユーザーは日付「2023-08-22T00:00:00 05:30」(GMT 5:30 タイムゾーンから) を入力します。 Date オブジェクトは UTC での一日の始まりに変換する必要がありますが、実行時:

• Node.js の出力は 2023-08-21T00:00:00.000Z - 間違っています
• Chrome のコンソールの出力は 2023-08-21T18:30:00.000Z - 正しい

この矛盾により、コードが実行される場所によっては予期しない結果が生じる可能性があります。この動作により、Date オブジェクトは、異なる環境間で一貫した日付を処理することができなくなります。

Luxon を使用した正確な日付処理

この問題を解決するには、環境間で一貫した動作を提供する Luxon のようなライブラリを使用することが重要です。 Luxon は、ユーザーのローカル入力をユーザーのタイムゾーンでのその日の適切な start と end に変換し、正確なデータベース クエリのためにそれらの時刻を UTC に変換するのに役立ちます。

これを処理するために Luxon を使用する例を次に示します:

const { DateTime } = require('luxon');

// Example user input date in ISO string with timezone information from the frontend
const userInputDate = "2023-08-22T00:00:00 05:30"; // ISO string sent by frontend

// Step 1: Parse the ISO string to get the user's local time
const userLocalDate = DateTime.fromISO(userInputDate);

// Step 2: Convert this date to start of the day and end of the day in the user's local timezone
const startOfDayLocal = userLocalDate.startOf('day'); // start of the day in the user's timezone
const endOfDayLocal = userLocalDate.endOf('day'); // end of the day in the user's timezone

// Step 3: Convert these local start and end times to UTC
const startOfDayUtc = startOfDayLocal.toUTC().toJSDate(); // start of the day in UTC
const endOfDayUtc = endOfDayLocal.toUTC().toJSDate(); // end of the day in UTC

// Step 4: Query the database using the UTC range
db.records.find({
  createdAt: {
    $gte: startOfDayUtc,
    $lte: endOfDayUtc
  }
});

Luxon が JavaScript 日付オブジェクトより優れている理由

ネイティブの JavaScript Date オブジェクト を使用して日付とタイムゾーンの変換を直接処理すると、上記のような不一致が発生する可能性があります。 Luxon がより良い代替手段である理由は次のとおりです:

1. 環境全体の一貫性: Luxon は、コードが Node.js で実行されているかブラウザー (Chrome コンソールなど) で実行されているかに関係なく、一貫した動作を提供します。これにより、異なる環境で Date オブジェクトを使用することで生じる不一致がなくなります。

2. 組み込みのタイムゾーン サポート: Luxon を使用するとタイムゾーン間の変換が簡単になりますが、Date オブジェクトはタイムゾーン操作の強力なサポートを提供しません。

3. 単純な日付操作: ユーザーのローカル タイムゾーンで 1 日の開始または終了を設定し、それを UTC に変換することは、グローバル アプリケーションでは一般的なタスクです。 Luxon は直感的な API でこのプロセスを簡素化しますが、Date は複雑な手動処理が必要です。

結論

日付とタイムゾーンの変換を適切に処理することは、信頼性が高く、ユーザーフレンドリーなアプリケーションを構築するために非常に重要です。開発者がレコードをフィルタリングするときにタイムゾーンの違いを考慮しない場合、ユーザーは重要なデータを見逃す可能性があり、混乱が生じ、重大なエラーが発生する可能性があります。

ネイティブの JavaScript Date オブジェクト の代わりに Luxon を使用すると、一貫性が得られ、タイムゾーンの処理が向上し、日付の操作が容易になります。これにより、開発者はタイムゾーンを超えてユーザーに対してシームレスなエクスペリエンスを作成でき、クエリが期待どおりに機能し、フィルタリング中にレコードが見逃されることがなくなります。

グローバル アプリケーションでは、タイムゾーンに関係なく、ユーザーに高品質のエクスペリエンスを提供するために、正確で信頼性の高い日付処理が鍵となります。

最終的な考え

日付とタイムゾーンの処理によってアプリケーションで予期しない結果が発生する、同様の状況に遭遇したことがありますか?どのように対処しましたか?あなたの経験、フィードバック、または質問や懸念事項についてお聞かせください。以下のコメントセクションでお気軽に共有してください。この記事が役立つと思われた場合は、「いいね！」を押して、恩恵を受ける可能性のある他の人と共有してください。