開発のきっかけ：Date型のカオスに立ち向かう
「UTCからJSTに直したい」「サーバーログの時刻がどの国の時間か分からない」。
エンジニアなら誰もが一度は「日付とタイムゾーン」という泥沼に足を取られた経験があるはずです。特にJavaScriptの Date オブジェクトは、直感的と言い難い挙動が多く、長らく開発者の天敵の一つでした。
これまでは Moment.js や date-fns、Day.js といった外部ライブラリを導入して解決するのが一般的でした。しかし、DevToolKits を開発するにあたって、私は自分自身に一つの制約を課しました。**「たった一箇所の時刻変換のために、数十KBものライブラリをダウンロードさせる必要があるのか？」**という問いです。
「現代のブラウザ標準機能だけで、最高に軽快なタイムゾーン変換は作れるはずだ」。この個人的な「挑戦状」から、タイムゾーン変換ツール の開発は始まりました。
技術的な工夫：標準APIを極限まで使い倒す
私たちが注目したのは、ブラウザに標準搭載されている Intl（Internationalization API）です。
1. Intl.DateTimeFormat による「正確な分解」
特定タイムゾーンの日時を ISO 8601 形式で出力するのは、標準 API だけだと意外と骨が折れます。そこで、formatToParts を使って日時をパーツ単位で解体し、再構築する手法を採用しました。
const formatter = new Intl.DateTimeFormat('en-CA', {
timeZone,
hour12: false,
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
// 年、月、日などのパーツを個別に抜き出す
const parts = formatter.formatToParts(date).reduce((acc, cur) => ({
...acc, [cur.type]: cur.value
}), {} as any);この「一度バラバラにしてから、望む形に組み立て直す」というアプローチにより、重いライブラリを一切使わずに、完璧なフォーマット処理を実現しました。
2. 動的なオフセット抽出のハック
タイムゾーン変換で最も厄介なのは、「JSTは+09:00」というようなオフセット情報です。これを自前で辞書として持つと、サマータイムなどの変更に対応できません。
そこで、timeZoneName: 'shortOffset' オプションからブラウザが持つ最新のオフセット情報を抽出し、それをパースして結合するロジックを組み込みました。
// ブラウザが持っている「その瞬間」の時差情報を取得
const offsetName = new Intl.DateTimeFormat('en-US', {
timeZone,
timeZoneName: 'shortOffset',
}).formatToParts(date).find(p => p.type === 'timeZoneName')?.value;これにより、「常にOSやブラウザが持つ最新のタイムゾーンデータを利用できる」という、自前実装ならではの強みを手に入れました。
「何もしない」がもたらす最高の速度
このツールは、ページを開いた瞬間に利用可能です。
重いスクリプトのパース待ちも、APIへのリクエストもありません。
ブラウザが元々持っている能力を最大限に引き出すことで、**「ライブラリ不要」かつ「依存関係ゼロ」**という、エンジニアが理想とする究極の軽量ツールが完成しました。
まとめ
タイムゾーン変換ツールは、私にとって「ブラウザ標準機能の可能性」を再確認させてくれる開発でした。
「ライブラリを足す前に、まず標準を疑う」。そんな開発者の矜持が、このツールの軽快な動作に繋がっています。
世界中の時間を、もっと身近に、もっと軽やかに。ぜひ一度、そのスピードを体験してみてください。