Emmetメモ：面倒なselectタグを一気に作る

selectタグによるプルダウンは量が多いこともあり、普通にコーディングしていると結構な手間です。そんな時こそEmmetで楽しましょう。

select>option*115>{$@1900}
select>option*12>{$}
select>option*31>{$}

上記は何となく予想つくかも知れませんが、年月日です。
年に関しては通常はシステム的に年を出力する方が良いですが、月と日は固定なのでベタコーディングで済ませてしまうこともあるでしょう。

HTMLに展開すると下記のようになります。

<select name="" id="">
  <option value="">1900</option>
  <option value="">1901</option>
  <option value="">1902</option>
  <option value="">1903</option>
  …
</select>

option内容がバラバラの場合

連番を出力するのは楽ですが、テキストの選択肢の場合も多少工夫すれば対応できます。

table>tr*5>(td>select[name=select$]>(option>{AAA})+(option>{BBB})+(option>{CCC})+(option>{DDD}))+(td>input[type=radio][name=gender$]+{男性}+input[type=radio][name=gender$]+{女性})

HTMLに展開すると下記のようになります。

<table>
  <tr>
    <td><select name="select1" id="">
      <option value="">AAA</option>
      <option value="">BBB</option>
      <option value="">CCC</option>
      <option value="">DDD</option>
    </select></td>
    <td><input name="gender1" type="radio"/>男性<input name="gender1" type="radio"/>女性</td>
  </tr>
  …
</table>

optionの値を「()」でまとめ、「+」で連結していく形です。ついでなのでラジオボタンの例も含めています。

さすがにここまで長い記述はシステム側で出力した方がいいんじゃないかと思いますが、HTMLコーディングによるプロトタイプ作成には力を発揮すると思います。

「()」でまとめ「+」で連結する方法が個人的に分かりやすく好んで使っていますが、「^」で「一つ上の階層に戻る」ということもできます。

table>tr*5>td>select[name=select$]>option>{AAA}^option>{BBB}^option>{CCC}^option>{DDD}^^td>input[type=radio][name=gender$]+{男性}+input[type=radio][name=gender$]+{女性}

この記述でも同じ結果を得られます。

個人的に、括りが分かりにくくなるのでこの記述は苦手ですが、Emmetの記述量は減るので好みに合った書き方を使えば良いと思います。