VIDEO LESSON

JavaScriptのDate.prototype.toISOString()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:53動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はジャバスクリプトのデート・プロトタイプ・トゥーアイエスオー文字列、
0:06トゥーアイエスオーストリングを紹介します。
0:11これは、デートオブジェクトが持つ日時を、世界共通のアイエスオー形式の文字列へ変換するメソッドです。
0:19結果はユーティーシー、つまり協定世界時を基準に表され、末尾にはゼットが付きます。
0:26地域によって表示が変わらないため、サーバーとブラウザーの間で時刻を受け渡す場面にとても向いています。
0:35この動画では、引数と戻り値、基本例、日付がずれる理由、そしてエラーになる条件まで、
0:40実行結果と一緒に学びます。
0:45日時を扱う処理は、見た目と中身がずれやすい分野なので、変換のルールを最初に理解しておくことがとても大切です。
0:54まず動作環境を確認します。
0:56このメソッドは古くからある機能で、クロームではバージョン三以降、ファイアーフォックスでは一以降、
1:01サファリでは四以降、エッジでは十二以降で使えます。
1:06ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
1:11記事の互換性情報は、エムディーエヌのデータに基づく目安で、すべての環境で実機検証したという意味ではありません。
1:19追加のパッケージやインポートは必要なく、デートオブジェクトを作ればそのまま呼び出せます。
1:25ブラウザーのコンソールでも、ノードでファイルを実行しても、同じコードで試せます。
1:30長く安定して使えるメソッドなので、古いブラウザーを対象に含む案件でも安心して採用できます。
1:37引数と戻り値を確認します。
1:39書き方は、デートオブジェクトのあとにドットを書き、トゥーアイエスオーストリングとカッコを続けます。
1:46リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:52引数はありません。
1:53カッコの中に何か渡すのではなく、有効なデートオブジェクトに対して呼び出す点がポイントです。
2:00戻り値は、ゼット付きの日時文字列で、タイプは文字列です。
2:05元のデートオブジェクト自体は変更されません。
2:08呼び出す対象と、引数がないこと、この二つを押さえれば使い方はほぼ理解できます。
2:14返ってくる文字列の形を読み解きます。
2:17通常は、年、月、日をハイフンでつなぎ、文字のティーを挟んで、時、分、秒をコロンでつなぐ形です。
2:26秒の後ろには小数点と三桁のミリ秒が続き、最後にゼットが付きます。
2:32このゼットが、ユーティーシーで表した時刻だという合図です。
2:37桁数がそろった決まった形なので、文字列のまま並べ替えたり、辞書順で比較したりしやすい利点もあります。
2:46逆に、人間向けの見やすい表示ではありません。
2:50保存や通信にはこの形、画面表示には地域に合わせた別の形、と役割を分けて考えてください。
2:58一度この読み方を覚えれば、ログや通信データに残った日時も、迷わず読み解けるようになります。
3:06記事の基本例を見ます。
3:08入力は、二千二十六年九月二十一日、午前九時、日本時間の日時です。
3:13プラスゼロ九ゼロゼロは、日本時間がユーティーシーより九時間進んでいることを示します。
3:19変換すると九時間が引かれ、同じ日の午前零時、ユーティーシー表記になります。
3:24これが記事の期待出力で、ノードの実機結果とも一致しています。
3:29ファイルに保存してノードで実行しても、ブラウザーのコンソールに貼っても同じ結果です。
3:35再宣言エラーが出たら、ページを再読み込みするか、コード全体をブロックで囲んでください。
3:42実行前に、九時間を引くと何時になるかを予測してから、結果と比べてみてください。
3:48期待出力をもう一例で深掘りします。
3:50日本時間の一月一日、午前零時三十分を変換すると、結果は前年の十二月三十一日、
3:54十五時三十分になります。
3:58日付が前日にずれているように見えますが、これはバグではありません。
4:04九時間の時差を引いた正しい変換結果です。
4:07記事でも、日本時間の表示文字列ではなくユーティーシーへ変換されるので、日付が前日になることもあると注意されています。
4:16ログの日付が一日ずれて見えたら、まずユーティーシー変換を疑ってください。
4:22表示のずれと、時刻そのものの間違いは、分けて考えることが大切です。
4:27実用例として、送信データ向けに日時を整える関数を作ります。
4:33処理の順番が大切です。
4:35まず、入力からデートオブジェクトを作り、ゲットタイムで有効な時刻かどうかを確認します。
4:43ナン、つまり数値でない結果なら、変換を試みずに、理由が伝わるエヌジーのメッセージを返します。
4:52有効な場合だけ、トゥーアイエスオーストリングを呼んで結果を返します。
4:58変換メソッド単体では、無効な日付で例外が発生してしまいます。
5:04前段のチェックを組み合わせることで、利用者に理由が伝わり、処理が途中で止まることも防げます。
5:12段階を分けておくと、後から仕様が変わっても、直す場所がすぐに見つかります。
5:19実用例の実行結果を確認します。
5:22日本時間の正しい日時を渡すと、ユーティーシーのアイエスオー文字列に変換されます。
5:28日付として読めない文字列を渡した場合は、例外ではなくエヌジーのメッセージが返ります。
5:35この出力も実機で確認済みです。
5:37こうして整えた文字列は、ジェイソンに載せてサーバーへ送るデータとしてもそのまま使えます。
5:44受け取る側も、決まった形だと分かっているので、安心して日時に戻せます。
5:50チェックと変換を一つの関数にまとめておくと、画面が増えても同じ品質で日時を扱えます。
5:56最も大切な注意点です。
5:58ナンから作ったデートなど、無効なデートに対してこのメソッドを呼ぶと、文字列が返るのではなく、
6:02レンジエラーという例外が発生します。
6:07これは記事の境界条件の例でも示されている動きで、実機でもエラー名がレンジエラーになることを確認済みです。
6:14利用者の入力や、外部から受け取った文字列からデートを作る場合は、そのまま呼ばずに注意が必要です。
6:21トライとキャッチで囲むか、前の実用例のように事前に有効性を確認するか、どちらかの備えを必ず入れてください。
6:28もう一つ、混同しやすい点があります。
6:31このメソッドの結果は常にユーティーシー表記で、日本の利用者が普段見る時刻の見た目にはなりません。
6:39午前九時のつもりで保存したのに、表示が午前零時になっていた、という混乱はここから生まれます。
6:46利用者向けの表示には、地域に合わせた整形を行う別の方法を使ってください。
6:52役割分担はシンプルです。
6:54保存と通信にはアイエスオー形式、画面表示には地域向けの形式です。
6:59どちらの目的で文字列を作っているのかを先に決めることが、時刻まわりのバグを防ぐ一番の近道です。
7:06特に、保存した文字列をそのまま画面に出す設計は、見直しの優先候補です。
7:12まとめです。
7:13トゥーアイエスオーストリングは、デートオブジェクトの日時を、ユーティーシーのアイエスオー形式文字列へ変換するシンプルなメソッドです。
7:21導入時の判断は三つです。
7:23まず、引数はなく、戻り値はゼット付きの文字列だと押さえること。
7:27次に、無効なデートではレンジエラーになるため、事前確認やトライとキャッチで備えること。
7:33そして、保存や通信に使い、地域向けの表示とは使い分けることです。
7:37投稿時刻の保存や、サーバーへの送信データ作りなど、身近な場面から試してみてください。
7:43お疲れさまでした。
7:44基本例の日付を変え、日付がどうずれるか予測するところから始めてみてください。
7:49慣れてきたら、自分の画面の保存処理へ組み込んでみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Date.prototype.toISOString()で日時をUTCのISO形式文字列へ変換する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのDate.prototype.toISOString()の使い方：引数・戻り値・実例と注意点 →