JavaScriptでsprintfを使う

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

プログラムを実行する

サンプル・プログラムの実行例

サンプル・プログラムのダウンロード

ダウンロード

圧縮ファイルの内容
getCursedDays.html	サンプル・プログラム本体（jQuery版）

sprintfライブラリ

24: 
  25: <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script>
  26: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  27: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  28: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
  29:

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

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

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

13日の金曜日を取得

  77: /**
  78:  * 指定した年月からが指定した期間にある13日の金曜日を返す
  79:  * @param   int year, int month 調査開始年月
  80:  * @param   int period          調査期間（年）
  81:  * @param   array items         13日の金曜日を格納する配列
  82:  * @return  bool true：13日の金曜日／false：それ以外
  83: */
  84: function getCursedDays(year, month, period, items) {
  85:     var dt, dw;
  86:     var ss;
  87:     var cnt = 0;
  88:     var finish = Number(year) + Number(period);
  89:     while (year < finish) {
  90:         ss = sprintf('%04d/%02d/%02d', year, month, 13);
  91:         dt = new Date(ss);
  92:         dw = dt.getDay();
  93:         //金曜日
  94:         if (dw == 5) {
  95:             items[cnt] = new Object();
  96:             items[cnt].year = year;
  97:             items[cnt].mmdd = sprintf('%02d月%02d日(金)', month, 13);
  98:             cnt++;
  99:         }
100:         month++;
101:         if (month > 12) {
102:             month = 1;
103:             year++;
104:         }
105:     }
106: }

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

一覧表を作成

108: /**
109:  * 一覧表を作成
110:  * @param   array items 13日の金曜日を格納した配列
111:  * @return  string HTML文
112: */
113: function makeTable(items) {
114:     var html = `
115: `;
116:     var cnt = 1;
117:     var old = 0;
118:     items.forEach(function(e) {
119:         //西暦年
120:         if (e.year != old) {
121:         html += `
122: <tr>
123: <td class="year" colspan="2">${e.year}年</td>
124: </tr>
125: `;
126:         }
127:         html += `
128: <tr>
129: <td class="index">${cnt}</td>
130: <td class="mmdd">${e.mmdd}</td>
131: </tr>
132: `;
133:         cnt++;
134:         old = e.year;
135:     });
136:
137:     return html;
138: }

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

一覧表を作成し、ページ上に表示

140: /**
141:  * 一覧表を作成し、ページ上に表示
142:  * @param   なし
143:  * @return  なし
144: */
145: function putCursedDays() {
146:     items = new Array();
147:     var year = $('#year').val();
148:     getCursedDays(year, 1, PERIOD, items);
149:     table = makeTable(items);
150:     $('#plist').html(table);
151: }

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

Spinnerの使い方

52: //Spinner設定
53: $('#year').spinner({

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

参考サイト

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