世界時計 & 時差計算ツール

本世界時計ツールは，グローバルなビジネスやコミュニケーションにおいて基準となる主要5都市（東京，ロンドン，パリ，ニューヨーク，シドニー）の現在時刻を一覧表示するインターフェースを提供します．内部的な時刻の取得と変換は，ブラウザが標準で備えるJavaScriptの国際化APIである「Intl.DateTimeFormat」オブジェクトを利用して行われます．

利用者の端末が持つ現在時刻（new Date()）を起点とし，各都市に割り当てられたIANAタイムゾーン識別子（Asia/Tokyo，Europe/Londonなど）を指定することで，各地域に最適化された時刻文字列を生成しています．

画面上部には，これら5都市の時刻がデジタルとアナログの両方で描画されるカードが配置されています．デジタル表示では，ロケール指定による時分秒のフォーマットが適用され，各都市の正確な日時がテキストとして出力されます．一方，アナログ時計の描画では，生成された時，分，秒の数値を基に，CSSのtransformプロパティにおけるrotate角度を算出しています．

例えば秒針は1秒あたり6度（360度 / 60秒）回転し，分針や時針も経過時間に応じた微細な進行角が加算される仕組みです．

これらの表示は，ReactのuseEffectフック内に設定されたsetIntervalによって1秒（1000ミリ秒）ごとに連続して更新処理が走るよう設計されています．この状態管理により，ユーザーがページを開いている間，端末時刻を取り直して表示します．ただし，非表示タブや端末の負荷によって更新が遅れることがあり，正確な1秒周期を保証しません．

入力対象となる現在時刻の変換処理はブラウザの実行環境内で完結しており，時計の更新や描画のために毎秒サーバーと通信を行うことはありません．

現在時刻の把握に加え，本ツールは未来または過去の特定時間における時差関係をシミュレーションするための「時差・ミーティング時間計算機」機能を備えています．この機能の中核となるのが，東京（JST）を基準とした0時から23時までの範囲で操作可能なタイムスライダーです．

ユーザーがHTMLのinput要素（type="range"）をドラッグして任意の時間（正時）を選択すると，Reactのステート（compareHour）が更新され，時差計算モード（isInteractive）へと移行します．

スライダーで設定された数値は，東京における当日の特定の「時（hour）」として解釈されます．実装上は，まず端末の現在日時を「Asia/Tokyo」タイムゾーンで年・月・日の各パーツに分解します．その後，抽出された東京の年月日に，スライダーで指定された0〜23の数値を「時」として組み合わせ，Date.UTCメソッドを用いて基準となる絶対的なエポックタイムスタンプを再構築します．

この際，日本の協定世界時からのオフセットである9時間を減算することで，正確なUTC時刻が算出されます．

この基準UTC時刻をもとに，再度Intl.DateTimeFormatを用いて他4都市のタイムゾーンにおける日時パーツへと変換し直します．これにより，東京が指定した時刻である瞬間に，ロンドンやニューヨークが現地時間で何時何分であるかが算出され，リスト上の各都市の項目に同期して表示されます．

スライダーの操作によるこれらの再計算や表示の更新もすべてブラウザ内のJavaScriptエンジンによって即座に処理されます．

世界規模での時刻比較を行う際，単なる「時間」のズレだけでなく，基準となる都市との間に生じる「日付」のズレを正確に把握することが重要になります．本ツールの比較機能では，東京で指定した時刻に対し，他の都市が前日になるのか，あるいは翌日になるのかを示す「日付差（dayDiff）」を自動的に算出し，ラベルとして表示する機構を備えています．

この日付差の計算は，対象都市の現地時刻における「年・月・日」と，東京における「年・月・日」をそれぞれUTCの深夜0時（ミリ秒スタンプ）に揃えた上で，その差分を1日のミリ秒数（86400000ミリ秒）で除算することによって求められます．結果として，対象都市の方が進んでいれば「+1日」，遅れていれば「-1日」といった文字列が生成され，同日である場合は空文字として扱われます．

この計算プロセスにおいて特に重要なのが，月末や年末，あるいはうるう年といったカレンダー上の境界条件の処理です．JavaScriptのDateオブジェクトは，コンストラクタやUTCメソッドに年月日の数値を渡す際，月の日数超過や負の値を自動的に繰り上げ・繰り下げて正規化する特性を持っています．

本ツールではこの内部仕様を活用することで，手動での複雑なカレンダーロジックを実装することなく，月を跨ぐ日付差であっても正確な相対日数を算出しています．

算出された日付差は，画面上の時刻の隣に専用のバッジとしてレンダリングされます．遅れ（マイナス）の場合はグレー系のスタイルが，進み（プラス）の場合は赤系のスタイルが適用される条件付きクラスによって視覚的に区別されており，ユーザーが時刻の数字だけに気を取られて日付の違いを見落とすことを防ぎます．時差による日付の変動はUI上の明確なフィードバックとして設計されています．

ロンドン（BST）やニューヨーク（EDT），シドニー（AEDT）など，特定の時期に時計の針を進めるサマータイム（夏時間）制度を導入している地域では，季節によって東京との時差が変動します．本ツールでは，この複雑な夏時間の適用有無を判定するために，独自の時差データベースや手動のオフセット設定を一切持っていません．

その代わり，ブラウザの実行環境に内蔵されているタイムゾーンデータベース（IANA Time Zone Database）の情報を全面的に信頼して時刻変換を行っています．

Intl.DateTimeFormatによる変換処理は，指定されたタイムゾーンのルールと，変換対象となる「特定の日時」を照らし合わせ，その瞬間に夏時間が有効であるかどうかを自動的に解決します．リアルタイム時計においては利用端末の現在日時が，スライダー比較においては操作によって生成された特定の日時が評価対象となります．

当日が夏時間の切り替え日に当たる場合は，指定した正時に適用されるブラウザ内の規則で換算されます．任意の日付を入力して切り替え前後を調べる機能はありません．

ここで留意すべき点は，すべての計算の絶対的な起点となる現在日時（new Date()）は，アクセスしている利用者の端末（OSやブラウザ）のシステム時計に依存しているという事実です．端末の時計が意図せずズレている場合，ツール上で生成される各都市の時刻も等しく影響を受けます．そのため，正確な時差関係を把握するためには，OSの時刻同期設定が正しく機能していることが前提条件となります．

また，ブラウザのバージョンが古い場合，内蔵されているタイムゾーンデータベースが各国の最新の法改正（夏時間の廃止や移行期間の変更など）を反映していない可能性があります．入力された日時の変換処理はすべてローカル環境内で行われるため，時差情報の更新を取り込むため，ブラウザやOSを更新してください．ただし，最新版でも各国の直近の変更が即時反映される保証はありません．

国際的なスケジュール調整を補助するための機能として，本ツールには各都市の現在時刻またはシミュレーション時刻に応じた「時間帯ラベル」の付与機構が組み込まれています．算出された0時から23時までの「時（hour）」の整数値を入力として受け取り，その数値がどの時間帯区分に属しているかを判定して，状態に応じたテキストとカラースタイル（Tailwind CSSのユーティリティクラス）を返却するロジック（getBusinessStatus）が実行されます．

具体的な判定基準は実装内で固定されており，午前9時以上かつ午後6時（18時）未満であれば「業務時間」として緑色（emerald系）のラベルとアイコンが割り当てられます．午後10時（22時）以降または午前6時未満の深夜・早朝帯であれば「睡眠時間」として灰色（slate系）のラベルとアイコンが適用されます．

そして，これら二つの条件に当てはまらない午前6時から午前9時未満，および午後6時から午後10時未満のトランジション帯は「プライベート」として黄色（amber系）で表示される仕様です．

このラベル付けは，純粋に「時刻の数値」のみを用いた一律のルールベース判定であり，該当する都市の実際のカレンダー事情（土日などの週末，現地の祝祭日，企業固有の休業日）を外部から取得・検証する機能は実装されていません．そのため，画面上で「業務時間」という緑色のバッジが表示されていたとしても，それが必ずしも現地の営業日であることを保証するものではなく，あくまで「一般的なビジネスアワーの範囲内であるか」を示す直感的な目安としての役割に留まります．

会議を確定する際は，相手の実際のスケジュールや地域の祝日を併せて確認することが推奨されます．

本ツールを活用して，海外拠点とのミーティング候補時間を調整するための具体的な操作手順を解説します．まず，ページをロードした直後の状態では，上部の時計は端末の現在時刻を表示し，下部の比較リストは東京の現在の「時」に合わせた当日の正時（00分）を示します．下部は現在の分・秒を比較しているわけではありません．

ここから未来の予定を立てる場合，東京基準時間設定のセクションにあるスライダーを左右にドラッグして，日本時間での会議開始候補の時刻（正時）を選択します．

スライダーを動かすと「時差計算モード中」という警告テキストが表示され，リアルタイム時計との同期が解除された状態になります．この状態でリストを見渡し，参加を想定している対象都市の時間帯ラベルを確認します．実際の参加者がいる都市だけを対象に，緑色の「業務時間」ラベルの重なりを確認します．5都市すべてに共通の時間帯があるとは限らず，この固定ラベルだけで参加者の負担を評価することもできません．

もし，どうしても睡眠時間（灰色のラベル）が重なってしまう場合は，スライダーを前後に動かしながら，対象者のプライベート時間（黄色のラベル）に収まる妥協点を探るアプローチが有効です．候補の時間が決定した後は，「現在の時間に戻す（同期）」ボタンをクリックすることで再び自動的に現在時刻を追従するリアルタイムモードへと復帰します．

時差の確認を終えた後，算出された結果をカレンダーに登録する際は別途手動で入力作業を行う必要があります．

本ツールは複雑な入力フォームを用いず，1本のスライダー操作による即座の視覚的フィードバックに特化しています．分単位の詳細な調整や特定日付の指定は実装されていませんが，正時単位での業務時間の重なりを素早く把握する用途において，効率的な確認フローを提供します．