JavaScript Academy · レッスン

タイムゾーンと UTC

Q: 「タイムゾーンと UTC」で何を学びますか？

UTC とローカル時刻を正しく扱います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

UTC とローカル時刻を正しく扱います。

「タイムゾーンと UTC」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

ローカル時刻と UTC

日付は絶対的な1つの時点を保持しますが、ローカル時刻または世界共通の基準時刻であるUTCとして読み取れます。ゲッターには、どちらの種類も用意されています。

const d = new Date(Date.UTC(2024, 0, 15, 12, 0, 0))
console.log(d.getUTCHours())

UTC ゲッター

getUTCFullYear や getUTCHours のように UTC で始まるメソッドは、実行するマシンに関係なく、UTC のタイムゾーンで日付の各要素を読み取ります。

const d = new Date(Date.UTC(2024, 5, 15, 8, 30, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCHours())
console.log(d.getUTCMinutes())

getTimezoneOffset

getTimezoneOffset は、ローカル時刻と UTC の差を分単位で返します。正の値は、ローカル時刻が UTC より遅れていることを示します。

const d = new Date()
const offset = d.getTimezoneOffset()
console.log(typeof offset)

オフセットの符号

オフセットの符号は、多くの人が想定するものとは逆です。UTC より進んでいるタイムゾーンでは、オフセットが負になります。分を 60 で割ると時間に変換できます。

const offsetMinutes = 120
const hours = offsetMinutes / 60
console.log(hours)

UTC 日付の作成

Date.UTC はコンストラクターと同じ各要素の引数を受け取りますが、それらを UTC として解釈し、new Date に渡せるタイムスタンプを返します。

const ts = Date.UTC(2024, 0, 1, 0, 0, 0)
const d = new Date(ts)
console.log(d.getUTCHours())

UTC セッター

setUTCHours のようなセッターは、UTC を基準にして、ローカル用セッターと同じように UTC のタイムゾーンで日付を調整します。

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
d.setUTCHours(15)
console.log(d.getUTCHours())

ISO 文字列の Z

ISO 文字列の末尾にある Z は、その時刻が UTC（Zulu time とも呼ばれます）であることを示します。Z がない文字列は、ローカル時刻として解釈される場合があります。

const d = new Date("2024-01-15T10:00:00Z")
console.log(d.getUTCHours())

同じ瞬間を異なる方法で読み取る

ローカルのゲッターと UTC のゲッターは、異なるタイムゾーンから同じ瞬間を表すため、時刻の値はオフセット分だけ異なることがあります。

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

UTC で保存する

一般的なベストプラクティスは、すべての日付を UTC で保存し、表示するときだけローカル時刻に変換することです。これにより、地域をまたいだときの曖昧さを避けられます。

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.toISOString())

タイムゾーンの指定

フォーマット用メソッドでは timeZone オプションを受け取れるため、UTC のように選択したタイムゾーンで時点を明示的に表示できます。

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)

落とし穴を避ける

同じ日付にローカル用メソッドと UTC 用メソッドを混在させると、見つけにくいバグの原因になります。計算ごとにどちらか一方のモデルを選び、一貫して適用してください。

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCMonth())

確認問題

タイムゾーンに関する知識を確認しましょう。

まとめ

まとめ: 日付はローカル時刻または UTC のどちらかで、一貫して読み書きしてください。

UTC のゲッターとセッターは世界共通のタイムゾーンで動作します
getTimezoneOffset は符号が逆になった分単位の値を返します
Z サフィックスは ISO 文字列が UTC であることを示します
UTC で保存し、ローカル時刻で表示します

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

よくある質問

「タイムゾーンと UTC」レッスンは無料ですか？

はい。「タイムゾーンと UTC」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「タイムゾーンと UTC」で何を学びますか？

UTC とローカル時刻を正しく扱います。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「タイムゾーンと UTC」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る