【JavaScript】toJSON()で日付情報をJSON形式に変換する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年04月23日に投稿されました。)

JavaScriptで日付情報をJSON形式に変換する方法として、toJSON()があります。

toJSON()とは、指定した日付情報をJSONデータに変換することができるメソッドになります。

そのため、変換された日付情報はDate型から文字列型となって返されるようになります。

変換される日付情報はインスタンス化した日付により変化するので、現在時間や指定した時間などをJSONデータに変換することができます。

しかし、日付情報に変換できない値を指定した場合はJSONデータに変換できませんので注意してください。

JSONデータはコンパクトで汎用性のあるとても便利なデータになりますので、日付情報をJSON形式に変換したいと思った場合はtoJSON()を使用するようにしましょう。

今回はJavaScriptのtoJSON()で日付情報をJSON形式に変換する方法について紹介していきます。

この記事はこんな方におすすめ
・取得した日付情報をJSONデータとして取得したい場合
・取得した日付情報をJSONデータに設定したい場合

toJSON()とは

toJSON()とは日付情報をJSONデータとして変換するメソッドとなります。

JSONデータに変換するため、タイムスタンプで取得した日付をJSONデータとして格納することができます。

そもそもJSONとは「JavaScript Object Notation」というものであり、さまざまな情報をやり取りするためのコンパクトな形式となります。

toJSON()の書き方

toJSON()の書き方は下記のようになります。

Date型の値の後ろにtoJSON()と追記すると、使用することができるようになります。

toJSON()の引数

toJSON()の引数はありません。

toJSON()の返り値

toJSON()の返り値は変換された日付情報の文字列となります。

toJSON()で日付情報をJSON形式に変換するサンプルコード

toJSON()で日付情報をJSON形式に変換するサンプルコードをご紹介します。

ここでは下記の3パターンでtoJSON()を使用します。

  1. 日付情報の形式が指定されている場合
  2. 日付情報の形式が指定されていない場合
  3. 日付情報以外の形式が指定されている場合

日付情報の形式が指定されている場合

日付情報の形式が指定されている場合は、指定された日付情報をJSON形式に変換するようになります。

● main.js

実行結果

日付情報の形式が指定されている場合にtoJSON()を使用した結果

toJSON()によって日付情報の形式が指定されているデータをJSON形式に変換しています。

今回は日付情報の形式が指定されていなかったため、現在時刻の日付情報が表示されています。

日付情報の形式は下記のようになります。

また、日付情報の変数名や説明は下記のようになります。

変数名説明
yyyy西暦年(4桁)
mm月(2桁)
dd日付(2桁)
T時刻データの先頭
HH時(2桁の24時間形式)
MM分(2桁)
SS秒(2桁)
sssミリ秒(3桁)
Z時刻データの末尾

日付情報の形式が指定されていない場合

日付情報の形式が指定されていない場合は、現在の日付情報をJSON形式として変換するようになります。

● main.js

実行結果

日付情報の形式が指定されていない場合にtoJSON()を使用した結果

toJSON()によって日付情報の形式が指定されていないデータをJSON形式に変換しています。

今回は日付情報の形式が指定されていなかったため、現在時刻の日付情報が表示されています。

日付情報以外の形式が指定されている場合

日付情報以外の形式が指定されている場合は、指定された日付情報をnullに変換するようになります。

● main.js

実行結果

日付情報以外の形式が指定されている場合にtoJSON()を使用した結果

toJSON()によって日付情報以外の形式が指定されているデータをJSON形式に変換しています。

今回は日付情報以外の形式が指定されていたため、変換することができず、nullが表示されています。

toJSON()で計算された日付情報をJSON形式に変換する場合

toJSON()は計算した日付情報のデータをJSON形式に変換することもできます。

例えば、現在の時刻から2年6ヵ月前と後の日付情報のデータをJSON形式に変換します。

● main.js

実行結果

計算された日付情報のデータをJSON形式に変換した結果

toJSON()によって、計算を行った後の日付情報のデータをJSON形式に変換しています。

そのため、現在時刻から2年6か月前の「2020-10-23T10:07:25.687Z」と2年6か月後の「2025-10-23T10:07:25.689Z」が表示されています。

toJSON()でタイムスタンプの日付情報をJSON形式に変換する場合

toJSON()はタイムスタンプの日付情報のデータをJSON形式に変換することもできます。

● main.js

実行結果

toJSON()でタイムスタンプの日付情報をJSON形式に変換した結果

toJSON()によって、タイムスタンプの日付情報をJSON形式に変換しています。

そのため、「1990868908070」のタイムスタンプが「2033-02-01T11:08:28.070Z」に変換されて表示されています。

toJSON()を実際に使用したケース

toJSON()を実際に使用したケースについてご紹介します。

例えば、ページを更新するときにtoJSON()で日付情報とJSONデータを渡し、現在の時刻によって条件が変化するような画面を作成します。

*こちらはローカルでは実行することはできません。
そのため、ネットワーク環境のある場所で実行してください。

● main.js

● main.js

● sample.json

実行結果

toJSON()でページを更新するときに日付情報とJSONデータを渡した結果

toJSON()によってページを更新するときに日付情報とJSONデータを渡しています。

そのため、JSONデータで渡した日付情報の分の部分が偶数の場合は、「kanoe」のデータが表示され、奇数の場合は「hashira」のデータが表示されており、更新した時間帯によって表示するHTML要素が変わっています。

JSONを使用する際に便利なメソッド

先ほどまでtoJSON()で日付情報をJSONデータに変換してきましたが、JSONデータに変換した日付情報をどのようにとってくるかなどが疑問になってくるかと思います。

そのため、ここではJSONを使用する際に便利なメソッドについてご紹介します。

JSON.stringify()

JSON.stringify()とはオブジェクトデータをJSONデータにエンコードするメソッドとなります。

こちらのメソッドを使用することで、さまざまな値をJSONデータにすることができます。

● sample.json

実行結果

JSON.stringify()でオブジェクトデータをJSONデータにエンコードした結果

JSON.stringify()によって指定した値をJSONデータに変換しています。

そのため、指定したオブジェクトや文字列がJSONデータに変換されて表示されています。

もし、JSON.stringify()について詳しく知りたい場合は下記の記事をご参考ください。

JSON.parse()

JSON.parse()とはJSONデータをデコードするメソッドとなります。

JSON形式に変換されたデータはエンコード(JSON形式に変換)されているため、うまく取得することができません。

そのため、こちらのメソッドを使用することで、変換されたJSONデータを取得することができるようになります。

● sample.json

実行結果

JSON.parse()でJSONデータをデコードした結果

JSON.parse()を使用することで、変換されたJSONデータを取得しています。

そのため、「name: ‘時透’,breath: ‘霞’」というデータが表示されています。

Sossy

JSONデータをデコードしないで取得すると、正確にデータを取得することができませんので注意してください。

まとめ

⚫︎ toJSON()とは日付情報をJSON形式に変換するメソッドである

⚫︎ 日付情報の形式が指定されている場合にtoJSON()を使用すると指定された日付情報を文字列で返す

⚫︎ 日付情報の形式が指定されていない場合にtoJSON()を使用すると現在の日付情報を文字列で返す

⚫︎ 条件に一致する要素が存在しない場合にtoJSON()を使用するとnullを返す

⚫︎ toJSON()は計算した日付情報をJSON形式に変換することができる

⚫︎ 指定した値をJSONデータに変換するにはJSON.stringify()を使用する
(JSONデータとして表示する際に便利)

⚫︎ 変換されたJSONデータを取得するにはJSON.parse()を使用する
(JSONデータを取得する際に便利)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA