JavaScript PR

JavaScriptでUNIXタイムを読みやすい日時形式に変換する方法

記事内に商品プロモーションを含む場合があります

あなたはTwitterやその他のAPIを使用していると、JSONデータにUNIXタイムとしての投稿日時(created_at)を見ることがあります。
この記事では、そのUNIXタイムを人間が理解しやすいフォーマット化された日時としてJavaScriptで表示する方法を説明します。

UNIXタイムとは?

UNIXタイム、またはエポックタイムとは、1970年1月1日 00:00:00 UTCからの経過秒数として定義される時刻のことを指します。
多くのプログラミング言語やシステムで一般的に使用される時刻の表現方法です。
UNIXタイムは整数であり、時刻の一意の表現を提供します。

JavaScriptでのUNIXタイムの日時変換

JavaScriptには、日付と時刻を扱うためのDateオブジェクトが組み込まれています。
このオブジェクトを使用することで、UNIXタイムを通常の日時に変換することができます。

以下に、UNIXタイムを日時にフォーマット化する方法を示します。

タイムスタンプを指定の日時にフォーマット化するJavaScriptの記述

まず、jquery.min.js(1.8系)ファイルを読み込む必要があります。
unixdateformat()関数を使用してタイムスタンプを指定の日時にフォーマット化します。
ready()関数を使用してページの読み込み後に、UNIXタイムをタイムスタンプに変換し、その後unixdateformat()を使用して日時に変換します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
//タイムスタンプを指定の日時にフォーマット化
function unixdateformat(str){
    var objDate = new Date(str);
    var nowDate = new Date();
    //現在時間との差
    myHour = Math.floor((nowDate.getTime()-objDate.getTime()) / (1000*60*60)) + 1;
    var year = objDate.getFullYear();
    var month = objDate.getMonth() + 1;
    var date = objDate.getDate();
    var hours = objDate.getHours();
    var minutes = objDate.getMinutes();
    var seconds = objDate.getSeconds();
    if ( hours < 10 ) { hours = "0" + hours; }
    if ( minutes < 10 ) { minutes = "0" + minutes; }
    if ( seconds < 10 ) { seconds = "0" + seconds; }
    str = year + '/' + month + '/' + date + ' ' + hours + ':' + minutes + ':' + seconds;
	var rtnValue = str;

    return rtnValue;
}

$(document).ready(function(){
	//UNIXタイムをタイムスタンプに変換
	var date = new Date( 1369720268 * 1000 );
	//日時にフォーマット化したものを出力
	$("#idDate").html(unixdateformat(date));

});
</script>

UNIXタイムをフォーマット化した日時に変換し、日時の出力先HTMLの記述

このコードは、フォーマット化した日時をHTML要素に出力するためのものです。
id属性”idDate”のdiv要素にフォーマット化した日時が出力されます。

<div id="idDate"></div>

UNIXタイムをJavaScriptでフォーマット化した日時として表示するデモページ

実際にUNIXタイムをJavaScriptでフォーマット化した日時として表示するデモページは以下から確認できます。

UNIXタイムをJavaScriptでフォーマット化した日時として表示するデモページ

PHPとの比較

多くのウェブ開発者は、日時の変換に関してはPHPのdate関数を使用するのが一般的です。
しかし、クライアントサイドでの日時の表示や操作が必要な場合は、JavaScriptが非常に役立ちます。

JavaScriptでは、Dateオブジェクトを利用して簡単に日時の操作や変換が行えます。この記事の方法を参考に、APIから取得したUNIXタイムを読みやすい形式に変換して、ウェブページ上での表示や操作を行うことができます。

まとめ

UNIXタイムは多くのAPIやデータベースで一般的に使用される時刻の表現方法です。
この記事では、JavaScriptを使用してUNIXタイムを人間が理解しやすい日時に変換する方法を詳しく解説しました。
これにより、ウェブページ上での日時の表示や操作が容易になります。

JavaScriptを使って日時の変換を行うことは、ウェブアプリケーションやウェブサイトのユーザーエクスペリエンスを向上させるための重要なステップの一つです。
この技術を取り入れることで、より使いやすく、インタラクティブなウェブコンテンツの制作が可能となります。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。