【今すぐ使える】JavaScript Date.toTimeString()：実務で役立つテクニック集
Date.toTimeString() メソッドは、JavaScript における Date オブジェクトの 時刻部分 を、英語表記の文字列として返します。これは、現在時刻や特定の時点における時刻情報を取り扱う際に役立ちます。
構文
Date.prototype.toTimeString();
戻り値
- 日付オブジェクトの時刻部分を、HH:MM:SS GMT±xxxx (TZ) の形式で表した文字列
- HH: 2桁の営業時間 (必要に応じて先頭に0を付加)
- MM: 2桁の分 (必要に応じて先頭に0を付加)
- SS: 2桁の秒 (必要に応じて先頭に0を付加)
- GMT±xxxx: グリニッジ標準時 (GMT) とのオフセット (正負、時差、およびオプションの分)
- (TZ): タイムゾーン略称 (省略可能)
例
// 現在時刻を取得
const now = new Date();
// 現在時刻の時刻部分を toTimeString() で取得
const timeString = now.toTimeString();
// 結果の表示
console.log(timeString); // 例: 03:43:17 GMT-0700 (PDT)
- 日付情報を含めた文字列を取得したい場合は、
toString()、toDateString()などのメソッドを組み合わせて使用します。 - よりロケールに合わせた時刻文字列を取得したい場合は、
toLocaleTimeString()メソッドを使用します。 toTimeString()メソッドは、ロケールに依存しない形式で時刻情報を返します。つまり、出力形式はブラウザの設定や地域によって異なりません。
- 特定時刻に基づいた処理の実行
- ログファイルへの時刻記録
- デジタル時計の表示
// 現在時刻を取得
const now = new Date();
// 現在時刻の時刻部分を toTimeString() で取得
const timeString = now.toTimeString();
// 結果の表示
console.log(timeString); // 例: 03:43:17 GMT-0700 (PDT)
例 2：特定の時刻の時刻部分を取得
// 特定の時刻を Date オブジェクトとして作成
const specificDate = new Date(2024, 6, 3, 15, 20, 30);
// 特定の時刻の時刻部分を toTimeString() で取得
const timeString = specificDate.toTimeString();
// 結果の表示
console.log(timeString); // 例: 15:20:30 GMT-0700 (PDT)
例 3：ロケールに合わせた時刻文字列を取得
// 現在時刻を取得
const now = new Date();
// ロケールを指定して、ロケールに合わせた時刻文字列を取得
const timeString = now.toLocaleTimeString('ja-JP');
// 結果の表示
console.log(timeString); // 例: 午後3時43分17秒
// 現在時刻を取得
const now = new Date();
// 日付情報と時刻情報を組み合わせて文字列を取得
const dateTimeString = now.toDateString() + ' ' + now.toTimeString();
// 結果の表示
console.log(dateTimeString); // 例: 2024年7月4日 03:43:17 GMT-0700 (PDT)
toLocaleTimeString() メソッド
- 欠点:
- ブラウザや環境によってサポートされるフォーマットが異なる可能性がある
- 複雑なフォーマット指定はコードが冗長になる
- 利点:
- ロケールに合わせた時刻形式で文字列を取得できる
- ユーザーの言語設定に基づいた表示が可能
Date.toTimeString()よりも詳細なフォーマット指定が可能
// 現在時刻を取得
const now = new Date();
// ロケールを指定して、ロケールに合わせた時刻文字列を取得
const timeString = now.toLocaleTimeString('ja-JP');
// 結果の表示
console.log(timeString); // 例: 午後3時43分17秒
手動フォーマット
- 欠点:
- ロケール対応が必要な場合、複雑になる
- フォーマットミスによるエラーが発生しやすい
- 利点:
- 完全な制御でフォーマットを指定できる
- コードが簡潔になる場合がある
// 現在時刻を取得
const now = new Date();
// 年、月、日、時、分、秒を個別に取得
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月は0始まりなので、1を足す
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
// 手動フォーマットで時刻文字列を作成
const timeString = `${hour}:${minute}:${second}`;
// 結果の表示
console.log(timeString); // 例: 15:43:17
ライブラリの利用
- 欠点:
- ライブラリの導入と理解が必要
- コード量が増加する
- 利点:
- 国際化対応やフォーマット処理を容易にするライブラリが存在
- Moment.js など、豊富な機能を持つライブラリが利用可能
// Moment.js ライブラリの読み込み (CDN)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
// 現在時刻を取得
const now = new Date();
// Moment.js を使用して、ロケールに合わせた時刻文字列を取得
const timeString = moment(now).toLocaleTimeString('ja-JP');
// 結果の表示
console.log(timeString); // 例: 午後3時43分17秒
テンプレートリテラル
- 欠点:
- シンプルなフォーマットのみ適用可能
- 複雑なフォーマットには不向き
- 利点:
- コードが簡潔で分かりやすい
- バッククォート (`) を使った文字列テンプレートを利用
// 現在時刻を取得
const now = new Date();
// テンプレートリテラルを使用して、時刻文字列を作成
const timeString = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
// 結果の表示
console.log(timeString); // 例: 15:43:17
- テンプレートリテラルは、シンプルなフォーマットで可読性の高いコードを記述したい場合に役立ちます。
- 国際化対応や複雑なフォーマット処理が必要であれば、Moment.js などのライブラリを活用できます。
- 完全な制御と簡潔なコードを求める場合は、手動フォーマットが有効です。
- ロケールに合わせたフォーマットが必要であれば、
toLocaleTimeString()を検討しましょう。 - ロケールに依存しないシンプルな時刻文字列が必要であれば、
Date.toTimeString()が適切です。