こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。
今回は、Javascriptにて日付のフォーマット処理について解説していきます。実はJavaScriptには日付のフォーマット処理を行うための標準の関数やメソッドがありません。
ではどのように日付のフォーマット処理を実現するのかについて
- 日付のフォーマット指定方法
- 日本語の曜日を出力する方法
という気になる基本的な内容から24時間制/12時間制で日付を表示する方法という応用的な方法まで解説していきたいと思います。javascriptにおける日付のフォーマット処理について正しく理解し、必要な場面で使いこなせるように学習していきましょう。
日付のフォーマット指定方法
javascriptでは日付のフォーマットを指定する場合、大きく２通りの方法が存在します。一つは既存のライブラリを利用すること、そしてもう一つは自分で関数を作ることです。それぞれのメリットとデメリットについて解説します。
ライブラリはある程度基本的な機能が最初から提供されていますが、自分のシステムに沿った機能にカスタマイズする際に、少々手間がかかります。
そして、自分で関数を作る場合は、自由に希望通りのフォーマット指定処理が作れますが、作るための作業の手間がかかります。
そのため、初心者の方にオススメなのは、まずライブラリの方を確認し、自分自身がやりたい内容を満たしているかどうか判断し、もし満たしていなければ、本記事でご紹介する自作関数の例を元に、ご自身の必要な機能を追加する、という流れが良いかと思います。
ライブラリを利用する方法(Moment.js)
では、まずはライブラリを利用する方法からご紹介します。代表的なライブラリとして本記事ではMoment.jsを解説します。
まずは公式サイトからライブラリをダウンロードしjavascriptファイルを格納するディレクトリに配置する、もしくはhtml内のヘッダー等に外部サービスサイト(CDNJS.com)で配信されているライブラリのパスを指定することで使用できます。
[moment.jsライブラリを導入する]
//ダウンロードする場合 <script src="moment.js"></script> //CDNJS経由でパスを指定する場合 *バージョン番号2.18.1は2017年8月時点 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
momentjsを導入した後は、通常の日付処理で利用するDateオブジェクトの代わりにMomentオブジェクトを利用し日付のフォーマット処理を行います。
実際のサンプルを確認してみましょう。
var beforeDate = moment("20170817", "YYYY-MM-DD"); // 第一引数：日時、第二引数：フォーマット形式
var afterDate = beforeDate.format('YYYY年MM月DD日 HH:mm');
console.log(afterDate);
実行結果：
2017年08月17日 00:00
momentオブジェクトの第一引数に指定したい日付、第二引数にフォーマットを指定することが可能です。さらに、momentオブジェクトにformatメソッドが用意されており、そちらで別の形式のフォーマットを指定することも可能です。
指定できるフォーマットについては公式サイトを参考にしてみてください。
このようにライブラリを使うことで基本的な日付のフォーマット処理をカバーすることが可能です。
ライブラリを使った曜日の日本語表示
現在のmoment.jsの仕様では、ロケールファイルを追加することで対応する国の慣習にそった日時・曜日を表示することが可能です。
ロケールファイルは、公式サイトからダウンロードする場合、moment-with-locales.jsを選択することで入手できます。
CDNJSを利用する場合はhttps://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js
のように、末尾がlocale/ja.jsのものをmoment.jsに組み合わせる方法。
もしくは、https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.jsのようにロケールファイルファイルが最初からセットになっているものを選択することで利用できます。
下記サンプルのように日本語の曜日もカンタンに出力できますので、ぜひご活用ください。
console.log(moment().format('dddd'));//実行時点での曜日を表示
console.log(moment().format('LLLL'));
console.log(moment().format('llll'));
var oneDay = moment("20170817", "YYYYMMDD");
console.log(oneDay.format('dddd'));
console.log(oneDay.format('LLLL'));
console.log(oneDay.format('llll'));
実行結果：
火曜日 2019年1月22日 15:50 火曜日 2019年1月22日 15:50 火曜日 木曜日 2017年8月17日 00:00 木曜日 2017年8月17日 00:00 木曜日
moment.jsを使いこなすことで、様々なフォーマットで表示や、特定の日時の10日前を表示するなど、時間に関する様々なことが実現できます。
ぜひ公式サイトもあわせてご覧ください。
自作関数を利用する方法
フォーマット文字列で指定して、フォーマット通りの文字列を返す関数を示します。ポイントとなる点は、
var replaceStrArray
というキー/値のペアの配列で、例えば’YYYY’と指定された時は西暦年、’D’と指定された時は0埋めなしの日、’mm’と指定された時は0埋めありの分、とキーに対応する値にフォーマット文字列を置換する点です。
また、もうひとつのポイントとして、置換実行時のコードがあります。
ret = format.replace(regex, function (str) {<br>
return replaceStrArray[str];<br>
}
というコードですが、フォーマット文字列の中で、先のキーあった場合、キーがstrに入ります。その後function(str){}のコールバック関数が呼ばれて、その返値でフォーマット中のキーを置換します。
コールバック関数中の、
replaceStrArray[str]
は、上で述べた、キー/値ペアの値そのものですので、キーが西暦年や0埋めなし日、0埋めあり分などに置換されるわけですね。
window.onload = function () {
function datetostr(date, format, is12hours) {
var weekday = ["日", "月", "火", "水", "木", "金", "土"];
if (!format) {
format = 'YYYY/MM/DD(WW) hh:mm:dd'
}
var year = date.getFullYear();
var month = (date.getMonth() + 1);
var day = date.getDate();
var weekday = weekday[date.getDay()];
var hours = date.getHours();
var minutes = date.getMinutes();
var secounds = date.getSeconds();
var ampm = hours < 12 ? 'AM' : 'PM';
if (is12hours) {
hours = hours % 12;
hours = (hours != 0) ? hours : 12; // 0時は12時と表示する
}
var replaceStrArray =
{
'YYYY': year,
'Y': year,
'MM': ('0' + (month)).slice(-2),
'M': month,
'DD': ('0' + (day)).slice(-2),
'D': day,
'WW': weekday,
'hh': ('0' + hours).slice(-2),
'h': hours,
'mm': ('0' + minutes).slice(-2),
'm': minutes,
'ss': ('0' + secounds).slice(-2),
's': secounds,
'AP': ampm,
};
var replaceStr = '(' + Object.keys(replaceStrArray).join('|') + ')';
var regex = new RegExp(replaceStr, 'g');
ret = format.replace(regex, function (str) {
return replaceStrArray[str];
});
return ret;
}
console.log(datetostr(new Date(), 'Y/MM/DD(WW) hh:mm:ss AP', false));
}
実行結果：
2017/05/15(月) 17:29:42 PM
結果は、以上のようになります。ぜひ、「replaceStrArray」を自分なりに改造してください。
日本語の曜日の出力
JavaScriptのメソッドには、日本語の曜日を出力するメソッドはありません。そのため、自分で実装する必要があります。（ライブラリを使えば上で紹介したように簡単に実現できますが、外部のライブラリを利用できない、というケースでは実装するしかありません）
しかし、幸いにも、週の日曜～土曜までの曜日を0～6で返す、Date#getDay()というメソッドがあります。このメソッドをインデックスにし、以下の配列を用意します。
var weekday = ["日", "月", "火", "水", "木", "金", "土"];
これで、
weekday[date.getDay()]
により、日本語の曜日が取得できます。Date型の日付とフォーマットを指定して、フォーマット通りの日付の文字列を返し、日本語の曜日にも対応した関数は以下のようになります。
window.onload = function () {
function dateToStr24HPad0DayOfWeek(date, format) {
var weekday = ["日", "月", "火", "水", "木", "金", "土"];
if (!format) {
format = 'YYYY/MM/DD(WW) hh:mm:ss'
}
format = format.replace(/YYYY/g, date.getFullYear());
format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
format = format.replace(/WW/g, weekday[date.getDay()]);
format = format.replace(/hh/g, ('0' + date.getHours()).slice(-2));
format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
return format;
}
console.log(dateToStr24HPad0DayOfWeek(new Date(), 'YYYY/MM/DD[WW] hh:mm:ss'));
}
実行結果：
2017/05/15[月] 17:29:42
以上のように、日本語の曜日が取得出来ていますね。
UTCやISO形式での日付出力
JavaScriptでは、Date型の日付をUTC形式やISO形式での文字列にすることは簡単に可能です。まず、UTC形式のコードを以下に示します。
window.onload = function () {
var dateForUtc = new Date();
console.log(dateForUtc.toUTCString());
}
実行結果：
Mon, 15 May 2017 09:23:42 GMT
UTC形式の日付の表示は以上のようになります。次にISO形式のコードを以下に示します。
window.onload = function () {
var dateForISO = new Date();
console.log(dateForISO.toISOString());
}
実行結果：
2017-05-15T09:23:42.139Z
ISO形式の日付の表示は以上のようになります。
24時間制の日付出力
0埋めなし
まずは、24時間制の0埋めなしの日付出力方法を解説します。この場合、通常のJavaScriptのメソッドDate#getXXX()系をそのまま使用します。
ただし、Date#getMomth()だけは、0月～11月を返しますので、「+1」して1月～12月に変換します。また、フォーマットを指定して出力できる関数にしています。フォーマット文字列にString#replace()メソッドを適用して、例えば、
- ‘Y’がフォーマットに指定されていたら、年に置換する
- ‘D’がフォーマットに指定されていたら、日に置換する
などの置換を、年、月、日、時、分、秒に対して行います。
window.onload = function () {
function dateToStr24H(date, format) {
if (!format) {
format = 'Y/M/D h:m:s';
}
format = format.replace(/Y/g, date.getFullYear());
format = format.replace(/M/g, (date.getMonth() + 1));
format = format.replace(/D/g, date.getDate());
format = format.replace(/h/g, date.getHours());
format = format.replace(/m/g, date.getMinutes());
format = format.replace(/s/g, date.getSeconds());
return format;
}
console.log(dateToStr24H(new Date(), 'Y年M月D日 h:m:s'));
}
実行結果：
2017年5月15日 17:20:29
関数の返値は、以上のような結果になります。
0埋めあり
0埋めありの日時表示を行うには、少々技巧的なことを行います。現在、2020/4/1だとすると、
dat.getDate()
は、「1」を返します。そこで、
('0' + date.getDate()).slice(-2)
のような式を組むと、式の計算結果は、”01”という文字列になります。もう少し詳しく説明します。String#slice()メソッドは-2を指定されると、文字列の後方から2文字分切り取ります。
変数dateが2020/4/1 の場合、
‘0’+date.getDate() == “01”
変数dateが2020/4/30の場合、
‘0’+date.getDate() == “030”
となりますので、いずれの場合にも、文字列の後方2文字を切り取ることで、0埋めの2桁の数字の文字列が得られます。コードで確認してみましょう。
window.onload = function () {
function dateToStrPad0Sample(date) {
var format = "DD";
format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
return format;
}
var dateSample = new Date(2020,4,1);
console.log(dateToStrPad0Sample(dateSample));
}
実行結果：
01
きちんと動いていますね。次は、年、月、日、時、分、秒をフォーマットを指定して、0埋めで表示してみましょう。
window.onload = function () {
function dateToStr24HPad0(date, format) {
if (!format) {
format = 'YYYY/MM/DD hh:mm:ss'
}
format = format.replace(/YYYY/g, date.getFullYear());
format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
format = format.replace(/hh/g, ('0' + date.getHours()).slice(-2));
format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
return format;
}
console.log(dateToStr24HPad0(new Date(), 'YYYY/MM/DD hh:mm:ss'));
}
実行結果：
2017/05/15 17:29:42
以上のような結果になります。
12時間制の日付の出力
0埋めなし
今度は、12時間制で日付を出力してみましょう。まず、AM/PMを出力するために、現在の時間が12時を超えているかどうか判定し、変数ampmに"AM"、"PM"を代入します。
var ampm = hours < 12 ? 'AM' : 'PM';
また、12時を超えていた場合、例えば15時などを3時にするために、時間を12で割った余りを求めます。なお、0時は12時とします。
hours = hours % 12; hours = ( hours != 0 ) ? hours : 12; // 0時は12時と表示する
以上をまとめ、Date型の日時に対し、フォーマットを指定して12時間制で日時の文字列を得る関数は、以下のようになります。24時間制の時と同じように、String#replace()を使って、フォーマット文字の’Y’や’Ｄ’を年や日に置換しています。
window.onload = function () {
function dateToStr12H(date, format) {
if (!format) {
format = 'Y/M/D h:m:s AP';
}
var hours = date.getHours();
var ampm = hours < 12 ? 'AM' : 'PM';
hours = hours % 12;
hours = ( hours != 0 ) ? hours : 12; // 0時は12時と表示する
format = format.replace(/Y/g, date.getFullYear());
format = format.replace(/M/g, (date.getMonth() + 1));
format = format.replace(/D/g, date.getDate());
format = format.replace(/h/g, hours);
format = format.replace(/m/g, date.getMinutes());
format = format.replace(/s/g, date.getSeconds());
format = format.replace(/AP/g, ampm);
return format;
}
console.log(dateToStr12H(new Date(), 'Y年M月D日 h:m:s AP'));
}
実行結果：
2017年5月15日 5:29:42 PM
結果は以上のようになります。
0埋めあり
12時間制の0埋め表示も、24時間制の0埋め表示と同じテクニックが使用できます。また、AM/PMの表示や、15時を3時と表示するテクニックも前項の通りです。
実際に、Date型の日付とフォーマットを指定すると、フォーマット通りの文字列を返す関数は以下のようになります。
window.onload = function () {
function dateToStr12HPad0(date, format) {
if (!format) {
format = 'YYYY/MM/DD hh:mm:dd AP'
}
var hours = date.getHours();
var ampm = hours < 12 ? 'AM' : 'PM';
hours = hours % 12;
hours = (hours != 0) ? hours : 12; // 0時は12時と表示する
format = format.replace(/YYYY/g, date.getFullYear());
format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
format = format.replace(/hh/g, ('0' + hours).slice(-2));
format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
format = format.replace(/AP/, ampm);
return format;
}
console.log(dateToStr12HPad0(new Date(), 'YYYY/MM/DD hh:mm:ss AP'));
}
実行結果：
2017/05/15 05:29:42 PM
結果は、以上のようになります。
日付の使い方総まとめ
日付の様々な使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
いかがでしたでしょうか。JavaScriptでは、日付のフォーマット付きの文字列化がサポートされておらず、意外と苦労します。基本的な日付のフォーマット処理であれば、momentjsなどの外部ライブラリを利用することが効率が良いです。
ですが、自分のシステムに合わせてカスタマイズが必要で、かつmomentjsではカバーできない内容であれば、自作関数がオススメでした。自作関数は一度内容を整理して関数化してしまえば汎用的に使用できますので、うまく自分なりに応用されてください。
また、UTCやISO形式での文字列化は、JavaScriptがサポートしていますので、こちらは便利に使用できますね。国際化対応や世界標準時を使用する場合もあると思いますので、ここでしっかり会得されてください。
JavaScriptの日付のフォーマットについて忘れてしまったら、またこのページをご覧ください！
