TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでtimestampを日時に変換する方法を現役エンジニアが解説【初心者向け】
JavaScript

JavaScriptでtimestampを日時に変換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtimestampを日時に変換する方法について現役エンジニアが解説しています。timestampとは日時の記録のことで、1970年1月1日からの経過秒数(UNIXタイムスタンプ)のことです。Dateオブジェクトの書き方や使い方、日時・日付に変換する方法を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでtimestampを日時に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptでtimestampを日時に変換する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

timestampとは

何かをおこなった日時の記録のことです。画像や動画の更新日時もタイムスタンプとなります。

デジタルな世界ではコピーや改ざんが容易にできるため、安全性を確認する場合にもタイムスタンプを利用します。

プログラムでは、UNIXタイムスタンプのことを指す場合もあります。

UNIXタイムスタンプとは、1970年1月1日午前0時0分0秒からの経過秒数のことです。JavaScriptでは、1970年1月1日深夜0時からの経過ミリ秒で日時を管理しています。

例えば、JavaScriptのUNIXタイムスタンプで0ならば、1970年1月1日0時0分0秒を意味します。
UNIXタイムスタンプを0から1年進めた1971年1月1日0時ならば、下記の1年分のミリ秒を算出する式により31536000000となります。

1000ミリ秒　×　60秒　×　60分　×　24時間　×　365日　＝　31536000000

 

[PR] フロントエンドで副業する学習方法を動画で公開中

timestampを日時に変換する方法

UNIXタイムスタンプは日時の表現方法の一つです。

UNIXタイムスタンプだと、何年の何月何日かはわかりにくいので、日付のフォーマットを整える方法を紹介します。

JavaScriptの日時を表すDateオブジェクトに変換することで、日付のフォーマットを変えたり操作できます。Dateオブジェクトへの変換は、Dateオブジェクトを生成する際の引数にUNIXタイムスタンプを指定するだけです。
 

実際に書いてみよう

それでは、Dateオブジェクトの生成方法からUNIXタイムスタンプの取得と変換を順に見ていきます。

まずは、Dateの生成です。

let now = new Date();

これでnowという変数に生成した日時、つまりプログラムを実行した日時が格納されました。

この時点でコンソールにnowを出力すると下記のように表示されます（日時は実行した日時になります）。

Mon Sep 28 2020 19:44:04 GMT+0900 (日本標準時)

この表示は日本語環境のブラウザで実行した場合のものになります。

次にこの日時のUNIXタイムスタンプを取得する方法です。

now.getTime();

getTimeというメソッドで1970年1月1日深夜0時からの経過ミリ秒であるUNIXタイムスタンプが取得できます。以上が生成した日時からUNIXタイムスタンプの取得になります。

続いて、UNIXタイムスタンプから日時の表示をおこなう方法を紹介します。

下記のようにDateの生成時の引数にUNIXタイムスタンプを渡してください。

let now = new Date(0);

ここでは、1970年1月1日0時0分0秒を意味する0を渡しています。

先ほどと同様にコンソールにnowを出力すると、1970年1月1日0時0分0秒の日本時間が表示されます。

Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

JavaScriptのUNIXタイムスタンプの扱いを紹介しました。

1000で1秒となるミリ秒という単位であることに注意してください。
 

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

animateメソッドを使ってjQueryでアニメーションを実装する方法

JavaScriptのライブラリであるjQueryのanimateメソッドを使ってアニメーションを実装する方法について、テックアカデミーのメンター（現役エンジニ...
JavaScript

JavaScriptでnumberオブジェクトを使う方法【初心者向け】

JavaScriptでnumberの使い方について解説しています。 出力する数字を指定することができるので、いくつか書きながら理解していきましょう。 ...
JavaScript

JavaScriptのLocalStrage（ローカルストレージ） の使い方を現役エンジニアが解説【初心者向け

JavaScriptのLocalstrage（ローカルストレージ）の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていき...
JavaScript

JavaScriptのhiddenオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのhiddenオブジェクトの使い方について解説します。 ユーザーに見えないようデータを保持しフォームで送信することができる方法を、実際...
JavaScript

JavaScriptでsetTimeoutを使う方法【初心者向け】現役エンジニアが解説

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでsetTimeoutを使う方法について解説します。 ...
JavaScript

JavaScriptのコールバック関数の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのコールバック関数の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門...
JavaScript

あわせてよく読まれている記事

PHPでタイムスタンプを取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでタイムスタンプを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでタイムスタンプを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事では、PHPでタイムスタンプを取得する方法について紹介しています。 タイムスタンプについてよく分からない方でも、理解できる内容となっております。   目次 タイムスタンプと タイムスタンプを取得する方法 実際に書いてみよう まとめ   タイムスタンプとは タイムスタンプとは、ある出来事が日時を証明するものです。PHPは「UNIXタイムスタンプ」というものを採用しています。   UNIXタイムスタンプとは UNIXタイムスタンプとは、協定世界時(UTC)での1970年1月1日0時0分0秒からの経過時間を秒数で表したものです。 PHPで使用する「タイムスタンプ」は、この「UNIXタイムスタンプ」を表します。   [PR] フロントエンドで副業する学習方法を動画で公開中タイムスタンプを取得する方法 それでは、PHPでタイムスタンプを取得する方法について見ていきましょう。   現在のタイムスタンプを取得する方法 現在のタイムスタンプを取得するには、PHPのtime関数を使用します。 使用方法： time() time関数は引数を渡さずに呼び出すだけで、現在のタイムスタンプを取得できます。   指定日時のタイムスタンプを取得する方法 指定日時のタイムスタンプを取得する方法として、mktime関数を使用する方法とstrtotime関数を使用する方法の2種類あります。 mktime関数使用方法： mktime(時, 分, 秒, 月, 日, 年) 例）mktime(5, 4, 3, 2, 1, 2020) →　1970/1/1 0:0:0 ～ 2020/2/1 5:4:3までの経過秒数を返却 mktime関数の引数は、時/分/秒/月/日/年の数値を引数と渡すことで、日時を指定することでタイムスタンプを取得することができる関数です。 引数は、右から順に省略可能で、省略された場合は、ローカルの日時に従って、現在の値がセットされます。 strtotime関数使用方法： strtotime(英文形式文字列 or日付/時刻 フォーマット文字列) 英文形式文字列使用例) strtotime("+1 day +1 week +1 month +1 year") → 本日から1年1ヶ月と1週間と1日加算してタイムスタンプを取得する 日付/時刻 フォーマット文字列使用例) strtotime("2020-01-02 03:04:05") →1970/1/1 0:0:0 ～ 2020/1/2 3:4:5までの経過秒数を取得する strtotime関数は2種類の形式で引数を渡すことができます。 1つ目は、英文形式文字列でを引数として渡す方法です。 2つ目は、日付/時刻 フォーマット文字列を引数として渡す方法です。 「1ヶ月後のタイムスタンプを取得したい」というような場合は、英文形式文字列を使用し、 「正確な日時を指定してタイムスタンプを取得したい」というような場合は、日付/時刻 フォーマット文字列を使用するなどの使い分けができるかと思います。   実際に書いてみよう それでは、上記で紹介した関数を使用してタイムスタンプを取得する例を見ていきましょう。 サンプルコード： <?php // 現在日時のタイムスタンプを取得する echo time()."n"; // 指定日時のタイムスタンプを取得する echo mktime(5, 4, 3, 2, 1, 2020)."n"; echo strtotime("+1 day +1 week +1 month +1 year")."n"; echo strtotime("2020-01-02
PHP

PHPのdate関数で日付のフォーマットを指定する方法を現役エンジニアが解説【初心者向け】

今回は、PHPのdate関数で日付のフォーマットを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。     田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPのdate関数で日付のフォーマットを指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   date関数とは PHPのdate関数は、日時を指定の表記にフォーマットして出力する関数です。 date関数で日付のフォーマットを指定する方法 date関数の使用方法は、以下の通りです。 date ( string $フォーマット [, int $UNIXタイムスタンプ = time() ] ) date関数の第一引数には、指定の日時フォーマット文字列を渡します。（ex: Y/m/d H:i:s、Y時m月d日 H時i分s秒） 第二引数には、オプション（引数を渡すかは任意）でUNIXタイムスタンプを渡します。 UNIXタイムスタンプとは、国際的に定められた協定日時（UTC）での1970年1月1日 00:00:00経過秒数のことです。デフォルトでは、PHPのtime関数が設定されています。time関数は、UNIXタイムスタンプの現在時刻を返すので、第二引数を渡さない場合は、現在時刻を指定のフォーマットに変換した日時文字列が返却されます。 第二引数を渡した場合は、渡したUNIXタイムスタンプの日時にフォーマットして日時文字列を返却します。 [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう それでは、date関数を使用して、日時をフォーマットする例を見ていきましょう。 <?php // タイムゾーンを設定 date_default_timezone_set('Asia/Tokyo'); // UNIXタイムスタンプ（現在時刻） echo time()."n"; // 現在日時をフォーマットする echo date('Y-m-d H:i:s')."n"; echo date('Y年m月d日 H時i分s秒')."n"; ?>   実行結果 1584256496 2020-03-15 16:14:56 2020年03月15日 16時14分56秒 上記の例では、まずdate_default_timezone_set関数を使用してタイムゾーンを大阪、札幌、東京を基準にした時刻に設定しています。タイムゾーンを設定することで、現在時刻を上記の都市に合った時刻を取得できます。 最初の行の実行結果は、date関数の第二引数にデフォルトで設定されているtime関数の返却値を表示しています。この数字は、1970年1月1日 00:00:00からの経過秒数を表示しています。 2行目、3行目の実行結果では、現在時刻を指定したフォーマットに変換しています。 時刻を指定してフォーマットする方法 次に、第二引数にフォーマットを行いたいUNIXタイムスタンプを渡してフォーマットします。第二引数に渡したい日時のUNIXタイムスタンプを取得するためには、strtotime関数を使用します。 PHPのstrtotime関数は、引数に渡した有効な日時文字列をもとに、その日時のUNIXタイムスタンプを返却する関数です。 <?php // タイムゾーンを設定 date_default_timezone_set('Asia/Tokyo'); // 指定日時をフォーマットする echo date('Y年m月d日 H時i分s秒', strtotime('2020/1/1 10:20:30') )."n"; ?>   実行結果 2020年01月01日 10時20分30秒 上記では、第二引数にstrtotime関数の返却値（UNIXタイムスタンプ）を渡すことで、strtotime関数の引数に渡した日時をフォーマットしています。 まとめ 以上、date関数を使用して指定した日時にフォーマットする方法を紹介しました。 日時のフォーマットは、実際の開発現場でよく行われるので、しっかりマスターしましょう。 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。
PHP

JavaScriptのDateのタイムゾーンについて現役エンジニアが解説【初心者向け】

JavaScriptのDateのタイムゾーンについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDateのタイムゾーンについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Dateオブジェクトとは Dateのタイムゾーンについて 実際に使ってみよう まとめ   Dateオブジェクトとは Dateオブジェクトとは日時を表すオブジェクトです。年、月、日、曜日、時刻などの日時を扱うメソッドを持っています。 Dateオブジェクトを使う場合は、JavaScriptに組み込まれているDateオブジェクトをそのまま使う方法と生成する方法があります。そのまま使う場合は、静的なメソッドのみが使えます。 Dateを生成する場合は、引数を無しで生成すると生成した日時の情報を持ちます。下記の場合だと、nowという変数に生成した日時の情報を持ったDateオブジェクトが格納されています。 let now = new Date(); 引数で日時を指定してDateオブジェクトを生成する場合は、下記の3パターンの指定が可能です。 1、UNIXタイムスタンプである1970年1月1日0時からのミリ秒を渡す 下記の場合だと、nowという変数に1970年1月1日0時の日時を持ったDateオブジェクトが格納されています。 let now = new Date(0); 2、タイムスタンプ文字列を渡す 下記のように日時を表す文字列でも生成できますが、文字列の解釈が環境に依存するので推奨されません。 let now = new Date('2020-1-1'); 3、年や月などの値を個別に指定して渡す 年と月の2つは必須になり、それ以降を省略した場合は最小の数となります。下記の例では、年に2020、月に1、それ以降を省略しているので1日の0時となります。 let now = new Date(2020, 1);   [PR] フロントエンドで副業する学習方法を動画で公開中Dateのタイムゾーンについて 世界には地域により時差があるので、どの地域の時刻なのかを表す必要があります。タイムゾーンを理解するにあたり、下記の3つの用語をおさえておきましょう。 1、GMT（Greenwich Mean Time）：グリニッジ標準時 経度が0のイギリスのグリニッジ天文台の時刻で、ここを世界の基準として時差を計算します。 2、UTC（Universal Time, Coordinated）：世界協定時 GMTの時刻で生じる数秒の誤差を調整した時刻です。GMTとほぼ同じ時刻になります。 3、JST（Japan Standard Time）：日本標準時 GMTの時刻から9時間進めた時刻になります。生成したDateオブジェクトは実行した環境のタイムゾーンとして扱われます。 日本語環境で実行しているならば、日本時間（JST）ということになります。また日本時間として扱っていても、内部ではUTCの時刻も持っています。 実際に使ってみよう 生成したDateオブジェクトがどのような日時になっているか確認してみます。 下記の例では、引数なしでDateオブジェクトを生成しているので実行した時刻となります。生成したDateオブジェクトをコンソールに出力すると、実行した時刻と日本時間であることが表示されます。 let now = new Date(); console.log(now); //Wed Sep 30 2020 17:39:14 GMT+0900 (日本標準時) 続いて、1970年1月1日0時でDateオブジェクトを生成して日時がどのようになるか確認してみます。 1970年1月1日0時は、UNIXタイムスタンプ（1970年1月1日0時からのミリ秒）で0なので0を渡して生成します。 生成したDateオブジェクトをコンソールに出力すると、日本時間となり9時間足されていることが確認できます。また、GMTで出力すると基準の時間になっていることが確認できます。そして、getTime()メソッドでUNIXタイムスタンプからのミリ秒は0になっています。 let now = new Date(0); console.log(now); //Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時) console.log(now.toGMTString()); //Thu, 01 Jan 1970 00:00:00 GMT console.log(now.getTime());
JavaScript

JavaでDate型の日時を加算・減算する方法を現役エンジニアが解説【初心者向け】

JavaでDate型の日時を加算、減算する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次 Date型とは Calendarクラスとは Date型の日時を加算する方法 Date型の日時を減算する方法 実際に書いてみよう まとめ Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Date型の日時を加算、減算する方法だよ。知らないとよくつまずく内容だから、詳しく説明していくね！ 大石ゆかり お願いします！ Date型とは Date型とは、Javaで日付の処理を行うクラスです。 Date型の持つ日時情報は「1970年1月1日0時からの経過時間」をミリ秒単位で示したものです。 また、printlnメソッドなどで表示すると、下記のように年月日と曜日まで加えてわかりやすく表示してくれます。 Tue Feb 18 17:38:14 JST 2020 しかし、Date型では時間、秒などの細かい日時を扱うことは推奨されていません。 日時情報の時間、秒などの細かい日時を扱う場合には、Calendarクラスを利用します。   [PR] フロントエンドで副業する学習方法を動画で公開中Calendarクラスとは Date型と同じように日時を扱うことのできるクラスで、時間や秒などの細かい日時が計算可能です。 Date型の計算を行いたい場合には、Calendar型に一度変換し、計算を行います。 Date型をCalendar型に変換する場合、setTimeメソッドを使って下記のように記述しましょう。 Calendar Calendar型オブジェクト名 = Calendar.getInstance(); Calendar型オブジェクト名.setTime(Date);   逆に、Calendar型からDate型を取得するには、getTimeメソッドを使い下記のように記述します。 Date Date型オブジェクト名 = Calendar型オブジェクト名.getTime();   Date型の日時を加算する方法 Date型の日時を加算する方法としては、Calendar型のaddメソッドを使います。 addメソッドは、下記のように記述しましょう。 Calendar型.add(年 or 月 or 日 or 時間 or 分などを指定, 加算する値);   第一引数の部分に関しては、以下のいずれかの定数を指定し、加算する対象を設定します。 年→Calendar.YEAR 月→Calendar.MONTH 日→Calendar.DAY_OF_MONTH など 時間→Calendar.HOUR_OF_DAY など 分→Calendar.MINUTE   例えば、2ヶ月先の日時を取得したい場合は、下記のようにCalendar型で2ヶ月分を加算してからDate型に変換してみましょう。 Calendar型.add(Calendar.MONTH, 2);   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
Java

JavaScriptで2つの日付の差分を求める方法を現役エンジニアが解説【初心者向け】

Web制作をしていると、日付や日時の差を表示したいことがありますよね。 「キャンペーン終了まで残り5日」「予定時刻より3時間経過しました」など、よく見ると思います。 日時を計算してみたけどうまくいかない、やり方が分からない。 そんな方のために、JavaScriptを用いて日時の差を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次timestampとはtimestampを日時に変換する方法実際に書いてみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで2つの日付の差分を求める方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptで日付の差を求める方法 JavaScriptで日付の差を求めるサンプルコードがこちらです。 /*ページを読み込んだ日時=現在日時*/ var loadDate = new Date(); /*計算の基準となる日時*/ var distDate = new Date(2030, 1, 1); /*日時の差をミリ秒単位で取得*/ var diffMilliSec = distDate - loadDate; /*ミリ秒を日数に変換*/ var diffDays = parseInt(diffMilliSec / 1000 / 60 / 60 / 24); /*差の日数をHTMLに表示*/ document.getElementById('diff').textContent = diffDays; See the Pen diffDays by TAKAYOSHI (@lspuwbkv) on CodePen. 大まかな流れは下記の通りです。 現在日時と計算基準の日時データを、Dateオブジェクトで取得 基準日時と現在日時を引き算し、日時の差をミリ秒単位で算出 差のミリ秒から日数を計算し、HTMLに表示   しっかり理解すれば、すぐ使いこなせるようになりますよ。   Dateオブジェクトとは Dateオブジェクトとは、JavaScriptで日時データを扱うためのオブジェクトです。 日時データをタイムゾーンを考慮したうえで簡単に取得したり、日時から年や月や曜日を算出したりします。 プログラム上で日時データを扱うための便利な機能が、ひととおりそろっています。   /*ページを読み込んだ日時=現在日時*/ var loadDate = new Date(); /*計算の基準となる日時*/ var distDate = new Date(2030, 1, 1);   new Data(); と、引数なしでnewすると、現在日時でDateオブジェクトが作られます。 new Dataの引数に年月日を入れると、指定した日時のDateオブジェクトになります。 サンプルでは、2030年1月1日のオブジェクトを基準日時として作成しました。   [PR] フロントエンドで副業する学習方法を動画で公開中UNIXタイムとは Dateオブジェクトの中では、UNIXタイムと呼ばれる形式で日時データを保持しています。 UNIXタイムは、JavaScriptだけではなく、様々なコンピュータやプログラムで共通した日時の表し方です。 1970年1月1日 0時 0分
JavaScript

フォーマットの設定！JavaのDate型の使い方【初心者向け】

JavaのDate型の使い方について解説します。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Date型の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   Date型とは Javaで日時を扱うためのクラスはいくつかあり、java.util.Dateクラスはそのひとつです。   Date型の使い方 まず、基本的なやり方ですが、Dateクラスのインスタンスを取得して、そこに格納された情報を使用します。 （例） Date date = new Date(); System.out.println(date); Dateクラスはnewで取得したインスタンスにその時点での日時を格納します。 上記の例の実行結果は下記の様になります。 （実行結果の例） Fri Oct 05 02:29:22 JST 2018   上記以外の形式で日時を表示したい場合はjava.text.SimpleDateFormatクラスを利用します。 （例） Date date = new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd E HH:mm:ss"); System.out.println(df.format(date)); まず、SimpleDateFormatを使用したい日時表記の形式を指定してインスタンス化します。 そのインスタンスにDateのインスタンスを渡してフォーマットすることで、Dateが保持する日時の情報を指定した形式の文字列で取得することができます。 上記の例の実行結果は下記の様になります。 （実行結果の例） 2018/10/05 金 02:51:36   逆に、SimpleDateFormatを使用して特定の日時のインスタンスを取得することもできます。 （例） SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd"); Date date = df.parse("2019/01/01"); まず、SimpleDateFormatを使用したい日時表記の形式を指定してインスタンス化します。 そのインスタンスに形式を合わせて日時を渡し、パースすることで、指定した日時情報を保持したDateクラスのインスタンスを得ることができます。   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう 下記のプログラムは左欄で解説した内容を実際に動かすプログラムです。 実行して結果を確認してみてください。 import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public class DateSample { public static void main(String[] args) { //①現在の日時を取得して表示 Date date = new Date();
Java

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでtimestampを日時に変換する方法を現役エンジニアが解説【初心者向け】