JavaScriptでsprintfを使う

CやPHPの組み込み関数  sprintf  は、数値を整形出力するときによく使う。ところが、JavaScriptにはこの関数がない。
そこで今回は、CDN（Content Delivery Network）にあるsprintfライブラリを利用してみることにする。プログラムの素材として、「PHPで13日の金曜日を列挙」を移植する。

プログラムを実行する

ダウンロード

圧縮ファイルの内容

getCursedDays.html

サンプル・プログラム本体（jQuery版）

0024: <!-- 外部ライブラリ -->
0025: <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script>
0026: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
0027: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
0028: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
0029: 

sprintf ライブラリは cdnjs ライブラリにある。
UIとして Spinner（後述）を使用するので、あわせて、jQuery等のライブラリをロードしておく。

0090:         ss = sprintf('%04d/%02d/%02d', year, month, 13);
0091:         dt = new Date(ss);

使い方は、CやPHPの sprintf とほぼ同じだ。

0077: /**
0078:  * 指定した年月からが指定した期間にある13日の金曜日を返す
0079:  * @param   int year, int month 調査開始年月
0080:  * @param   int period          調査期間（年）
0081:  * @param   array items         13日の金曜日を格納する配列
0082:  * @return  bool true：13日の金曜日／false：それ以外
0083: */
0084: function getCursedDays(year, month, period, items) {
0085:     var dt, dw;
0086:     var ss;
0087:     var cnt = 0;
0088:     var finish = Number(year) + Number(period);
0089:     while (year < finish) {
0090:         ss = sprintf('%04d/%02d/%02d', year, month, 13);
0091:         dt = new Date(ss);
0092:         dw = dt.getDay();
0093:         //金曜日
0094:         if (dw == 5) {
0095:             items[cnt] = new Object();
0096:             items[cnt].year = year;
0097:             items[cnt].mmdd = sprintf('%02d月%02d日(金)', month, 13);
0098:             cnt++;
0099:         }
0100:         month++;
0101:         if (month > 12) {
0102:             month = 1;
0103:             year++;
0104:         }
0105:     }
0106: }

ユーザー関数 getCursedDays は、指定した年月からが指定した期間にある13日の金曜日を配列 items に代入して返す。
Date.prototype.getDay() メソッドを使って、毎月の13日の曜日を調べるだけの単純な関数である。
Dateオブジェクトに渡す年月日（数字・記号のみ）や、配列に代入する年月日（日本語を含む）を生成するのに、前述の sprintf 関数を利用している。

0108: /**
0109:  * 一覧表を作成
0110:  * @param   array items 13日の金曜日を格納した配列
0111:  * @return  string HTML文
0112: */
0113: function makeTable(items) {
0114:     var html = `
0115: `;
0116:     var cnt = 1;
0117:     var old = 0;
0118:     items.forEach(function(e) {
0119:         //西暦年
0120:         if (e.year != old) {
0121:         html += `
0122: <tr>
0123: <td class="year" colspan="2">${e.year}年</td>
0124: </tr>
0125: `;
0126:         }
0127:         html += `
0128: <tr>
0129: <td class="index">${cnt}</td>
0130: <td class="mmdd">${e.mmdd}</td>
0131: </tr>
0132: `;
0133:         cnt++;
0134:         old = e.year;
0135:     });
0136: 
0137:     return html;
0138: }

ユーザー関数 makeTable は、13日の金曜日を格納した配列 items から、TABLEタグを生成するものである。
ES6で実装されたヒアドキュメントを使い、HTML文を記述し易くしている。

0140: /**
0141:  * 一覧表を作成し、ページ上に表示
0142:  * @param   なし
0143:  * @return  なし
0144: */
0145: function putCursedDays() {
0146:     items = new Array();
0147:     var year = $('#year').val();
0148:     getCursedDays(year, 1, PERIOD, items);
0149:     table = makeTable(items);
0150:     $('#plist').html(table);
0151: }

ユーザー関数 putCursedDays は、getCursedDays と makeTable を呼び出し、ページ上に13日の金曜日一覧表を表示する。
プログラム起動時に一度実行し、それ以降は開始年を変更する都度、実行する。

0052:     //Spinner設定
0053:     $('#year').spinner({

Spinner は jQuery のUIの1つで、数値を増減させるボタンが付いており、input type="text" タグの代わりに使うことで数値入力をし易くすることができる。
プロパティとして、min に選択できる最小値、max に最大値、step に増減の刻み幅を設定する。また、change には値が変更されたときに実行する処理を記載する。ここでは前述のユーザー関数 putCursedDays を記載した。

• sprintf：cdnjs
• Spinner：jQuery UI
• PHPで13日の金曜日を列挙：ぱふぅ家のホームページ