CATEGORY

【JavaScript】unixtimeを日付・日時に変換する方法

アプリケーションを構築する過程で、データの保存日時や更新日時を保存したり、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に代入して値を保持します。

Dateオブジェクト

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″となります。

replaceメソッド

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回出現することになりコードの可読性が下がるので、整形処理をインライン関数に移動して値を返すようにしました。

sliceメソッド

【Vue.js】ファイルサイズのバイト数をKB・MB・GBに変換する方法 前の記事 【Vue.js】vue-pdfを使ってPDFプレビューを表示する方法 次の記事

関連記事

コメント

この記事へのコメントはありません。