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

初心者向けにJavaScriptでタイムスタンプを取得する方法について現役エンジニアが解説しています。タイムスタンプとは何かをした時の日付・時刻のことです。JavaScriptではDateオブジェクトで管理します。タイムスタンプのフォーマットを年月日にして表示してみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでタイムスタンプを取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでタイムスタンプを取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

タイムスタンプとは

何かをした時の時刻をオブジェクトで残すものです。

ファイルがその時に存在していたことを証明するためにも必要です。

デジタルな世界では、画像や動画の更新日時もタイムスタンプとなります。

また、デジタルな世界ではコピーや改ざんが容易にできるため、安全性を確認するのに場合に利用可能です。

 

JavaScriptでタイムスタンプを取得する方法

JavaScriptにはDateオブジェクトが標準で用意されています。

このDateオブジェクトが時刻に関する情報をたくさん持っているので、下記のコードのように生成(new)するだけで取得可能です。

new Date();

MDNのDateリファレンスはこちら

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

タイムスタンプのフォーマットの指定方法

先ほどの取得方法でDateオブジェクトを生成して、そのままコンソールなどに出力すると下記のように生成した時刻の情報が表示されます。

「Thu Dec 05 2019 17:19:14 GMT+0900 (日本標準時)」

これを表示したい形(フォーマット)にする方法はいくつかあるものの、ここでは一番簡単なものを紹介します。

 

標準のJavaScriptではフォーマットを指定するメソッドはありません。

年や月や日などを個別に取得し、表示したい形になるよう文字としてくっつけることでフォーマットを実現します。

たとえば「2019年」としたい場合には、「date.getFullYear()」として「2019」を取得し、「年」をつけることで表現可能です。

そして、ライブラリを使って指定する方法もあります。

実際に書いてみよう

「○○○○年○○月○○日」というフォーマットでコンソールに日時を表示してみましょう。

※○の中は実行した日時になります。

const date  = new Date();
const year  = date.getFullYear();
const month = date.getMonth() + 1;
const day   = date.getDate();

console.log(year + '年' + month + '月' + day + '日');

 

解説

「new Date()」は現在時刻、「date.getFullYear()」はDateの年の取得、「date.getMonth()」はDateの月を取得しています。

この月の扱いは0-11となっているので注意が必要です。

たとえば1月ならば0、12月なら11を取得します。

そのため、「+1」をすることで1月は1、12月は12を表すことが可能です。

「date.getDate()」は生成したDateの日にちを取得しています。

似たメソッドの「getDay()」は曜日を0-6で返すものになるため、注意してください。

ちなみに0が日曜で6が土曜となります。

「console.log」では、それぞれの数に「年」や「月」「日」の文字を追加して表示することもできるので試してみましょう。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptでタイムスタンプを取得する方法がわかったので良かったです!

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているのでぜひ参加してみてください。