日付や時間などの<option>を量産するjsスニペット(ejsを例に)

ejsとかpugでのselect量産をできるだけ楽したい。
ES2015と、ejs等のテンプレートエンジンを前提とした記事です。
キモとなるのは配列の作り方。

やりたいこと

こんなHTMLがほしい。<option>全部書くのはやりたくない

<select>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <!--中略-->
  <option value="1908">1908</option>
</select>

<select>
  <option value="00:00">00:00</option>
  <option value="00:30">00:30</option>
  <option value="01:00">01:00</option>
  <!--中略-->
  <option value="23:30">23:30</option>
</select>

準備

• ES2015の動くNode.js環境
• (必要ならば)gulpやExpress等の環境
• ejsやpug等のテンプレートエンジン
• コンポーネント(下記のような感じ。以下、例はejs。pug等でも同様)

input-select.ejs

<%
var options = options ? options : [];
var selected = selected ? selected : false;
%>
<select>
  <% options.forEach(function (value, idx) { %>
    <option value="<%- value %>"><%- value %></option>
  <% }); %>
</select>

つくってみる

2017〜1898

ejs

<%- include("/atoms/input/input-select", {  //input-select.ejsを呼び出し、optionsを渡す
  //2017 - kの部分を変更すれば昇順降順や開始年を変更できる
  options: [...Array.from(Array(120), (v, k) => 2017 - k)]
})
%>

↑が↓になる

html

<select>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <!--中略-->
  <option value="1898">1898</option>
</select>

• ...はspread operator
• Array.fromは配列っぽいやつから配列を生成する
• ... も Array.fromもES2015

先頭は"--"、続いて1〜12

ejs

<%- include("/atoms/input/input-select", { //input-select.ejsを呼び出し、optionsを渡す
  //spread operatorは配列の途中の要素からでも動く
  options: ["--", ...Array.from(Array(12), (v, k) => 1 + k)]
})
%>

↑が↓になる

html

<select>
  <option value="--">--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <!--中略-->
  <option value="12">12</option>
</select>

00:00〜23:30

ejs

<%- include("/input-select", { //input-select.ejsを呼び出し、optionsを渡す
    options: [...Array.from(Array(48), (v, k) => ( ("00" + Math.floor(k / 2)).slice(-2) ) + ":" + ( k%2 == 1 ? "30" : "00") )]
  })
%>

↑が↓になる

html

<select>
  <option value="00:00">00:00</option>
  <option value="00:30">00:30</option>
  <option value="01:00">01:00</option>
  <!--中略-->
  <option value="23:30">23:30</option>
</select>

• 先頭のゼロパディング(0で始まるように数字をうめる)は http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/zero-padding.htm を参考にしました。