アプリケーションを構築する過程で、データの保存日時や更新日時を保存したり、UI上に表示したりする場面があると思いますが、Unixタイムスタンプから「2022/05/17 10:00」のような見やすい形式に変換する必要があります。
今回は、JavaScriptでUnixタイムスタンプを日時形式に変換する方法を解説します。フレームワークはVue.jsを使用しています。Vue.jsを使っていますが、やっていることはほぼ素のJSなのでVue.jsに詳しくない人でも理解できる内容です。関数の処理に注目して読み進めてください。
もし不明な点や質問、ご指摘がありましたら、記事下のフォームからコメントをお願いします。
Unixタイムスタンプとは
Unixタイムスタンプを日時に変換する前に、Unixタイムスタンプとは何かをざっくり理解しておきましょう。知っている方は読み飛ばしてください。
Unixタイムスタンプとは、UTCで「1970年1月1日午前0時0分0秒」を基準とし、そこからの経過秒数で日時を表現する手法です。
例えば、現在時刻が2022年5月17日午前9時30分であれば、1970年1月1日午前0時0分0秒〜2022年5月17日午前9時30分までの経過秒数が、Unixタイムスタンプとして表現されます。
動作サンプル
では、実際の挙動を下記JSFiddleの[Result]タブでご確認ください。
「現在時刻(Unixタイムスタンプ)を取得」ボタンを押すと、JavaScriptで現在時刻のUnixタイムスタンプを取得。その後、日時への変換処理が行われて「YYYY/MM/DD hh:mm:ss」の形式で出力されています。
コード解説
HTML
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<div>
<button @click="currentUnixtime()">現在時刻(Unixtime)を取得</button>
<p>現在時刻Unixtime: {{ current_unixtime }}</p>
<p>現在時刻 : {{ convertDatetimeFromUnixtime() }}</p>
</div>
</div>HTML側では、ボタンがクリックされた際の関数呼び出し、Unixタイムスタンプを日時変換したデータを出力するための関数を埋め込んでいます。
JavaScript(Vue.js)
new Vue({
el: "#app",
data: {
current_unixtime: null,
},
methods: {
currentUnixtime() {
this.current_unixtime = null
const date_obj = new Date();
this.current_unixtime = date_obj.getTime();
},
convertDatetimeFromUnixtime() {
if(!this.current_unixtime) {
return
}
const date = new Date(this.current_unixtime)
let format = "yyyy/MM/dd hh:mm:ss"
const year = date.getFullYear()
const month = zeroPadding(date.getMonth()+1)
const day = zeroPadding(date.getDate())
const hour = zeroPadding(date.getHours())
const minutes = zeroPadding(date.getMinutes())
const seconds = zeroPadding(date.getSeconds())
function zeroPadding(value) {
return ("0" + value).slice(-2);
}
return format
.replace("yyyy", year)
.replace("MM", month)
.replace("dd", day)
.replace("hh", hour)
.replace("mm", minutes)
.replace("ss", seconds)
},
}
})JavaScript側では、主に3つの処理が行われています。
- 1つ目：現在時刻のUnixタイムスタンプを取得する処理。
- 2つ目：取得したUnixタイムスタンプを日時に変換する処理。
- 3つ目：月・日・時・分・秒が1桁だった場合、0を付与して桁数を合わせる処理
それぞれ解説します。
1. 現在時刻のUnixタイムスタンプを取得
currentUnixtime() {
this.current_unixtime = null
const date_obj = new Date();
this.current_unixtime = date_obj.getTime();
},new Date()でDateオブジェクトを作成し、getTime()でミリ秒単位のUnixタイムスタンプを取得しました。そして、this.current_unixtimeに代入して値を保持します。
2. 取得したUnixタイムスタンプを日時に変換
convertDatetimeFromUnixtime() {
if(!this.current_unixtime) {
return
}
const date = new Date(this.current_unixtime)
let format = "yyyy/MM/dd hh:mm:ss"
const year = date.getFullYear()
const month = zeroPadding(date.getMonth()+1)
const day = zeroPadding(date.getDate())
const hour = zeroPadding(date.getHours())
const minutes = zeroPadding(date.getMinutes())
const seconds = zeroPadding(date.getSeconds())
return format
.replace("yyyy", year)
.replace("MM", month)
.replace("dd", day)
.replace("hh", hour)
.replace("mm", minutes)
.replace("ss", seconds)
function zeroPadding(value) {
return ("0" + value).slice(-2);
}
},convertDatetimeFromUnixtime()は、コードが長くなっているので細分化して解説します。
if(!this.current_unixtime) {
return
}まず関数の最初に、現在時刻のUnixタイムスタンプがセットされているかをチェックします。値がない場合は処理を終了します。
const date = new Date(this.current_unixtime)
let format = "yyyy/MM/dd hh:mm:ss"次に、定数dateに現在時刻のUnixタイムスタンプをDateオブジェクト形式で代入し、変数formatには出力形式のフォーマットを代入します。もし出力形式に（時・分・秒）が必要ない場合は format = “yyyy/MM/dd”とすればOKです。
const year = date.getFullYear()
const month = zeroPadding(date.getMonth()+1)
const day = zeroPadding(date.getDate())
const hour = zeroPadding(date.getHours())
const minutes = zeroPadding(date.getMinutes())
const seconds = zeroPadding(date.getSeconds())次に、現在時刻のUnixタイムスタンプを使って月・日・時・分・秒の各値をそれぞれ取得します。getMonth()は最初の月 = 0を返すので+1で加算します。zeroPadding()は桁数を揃えるための処理ですが、後ほど解説します。
return format
.replace("yyyy", year)
.replace("MM", month)
.replace("dd", day)
.replace("hh", hour)
.replace("mm", minutes)
.replace("ss", seconds)最後にフォーマット形式にデータを変換して返す処理です。関数の最初にlet format = “yyyy/MM/dd hh:mm:ss”と出力形式を指定しましたが、JavaScriptのreplace()を使って月・日・時・分・秒の値を置換します。この置換処理で”yyyy/MM/dd hh:mm:ss”が、”2022/05/17 09:55:36″となります。
3. 月・日・時・分・秒が1桁だった場合、0を付与し桁数を合わせる
function zeroPadding(value) {
return ("0" + value).slice(-2);
}こちらは、convertDatetimeFromUnixtime()のインライン関数になっており、月・日・時・分・秒の桁数を揃えるために整形処理を行っています。
取得された月・日・時・分・秒の値に0を加算し、slice(-2)で後ろから2文字を返します。例えば5月の場合は一桁なので、”0″ + “5” = “05”となり、後ろから2文字でそのまま05が戻り値になります。12月の場合は、”0″ + “12” = “012”となり、後ろから2文字で”12″が戻り値となるわけです。
たった一行の処理を関数化した理由は、convertDatetimeFromUnixtime()内部で、(“0” + value).slice(-2);の記述が少なくとも5回出現することになりコードの可読性が下がるので、整形処理をインライン関数に移動して値を返すようにしました。
