タグを連番で複製するにはEmmetが便利

今になってEmmetの便利さに気づきましたので紹介です。

例えば

html

<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>

みたいな連番のタグをバーーーっと書きたいとき、
愚かな私は今まで、同じ行を複製した後に一個一個手打ちで直したり、
また時にはExcelで

　　　　　　　　　　　　　　　↓

みたいなことをやって生きてきました。

Emmet を使えば

Emmet はZen-codingのように簡略化した入力でHTMLやCSSを書くためのツールキットです。WebstormなどのIDEには標準搭載されていますし、色々なエディタ用にプラグインが出ています。
さきほどの例に戻ります。
Webstorm上で、

emmet

li[data-id="archive_$$$"]{/archive/movie/2014/mov_$$$.mp4}*10

と入力し、行末でtabキーをパシーン

html

<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>

タグが展開されます。

Emmet の基本的な使い方

これらはごく基本的な使い方ですが、これらを使うだけでもかなり効率あがりますよね。

タグ展開

emmet

ul

html

<ul></ul>

テキストは{}

emmet

p{こんにちは}

html

<p>こんにちは</p>

classは. idは#

emmet

ul#movies.column

html

<ul id="movies" class="column"></ul>

classやid以外の属性は[attr=val]

emmet

ul[data-id=movies][role=main]

html

<ul data-id="movies" role="main"></ul>

タグの入れ子は> 隣接は+

emmet

ul#movies.column>li>a>span+img

html

<ul id="movies" class="column">
<li><a href=""><span></span><img src="" alt=""/></a></li>
</ul>

タグの複製は*n

emmet

ul>li*5>a

html

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

連番は$

emmet

ul>li.mov_$$*5>a{動画その$}

html

<ul>
<li class="mov_01"><a href="">動画その1</a></li>
<li class="mov_02"><a href="">動画その2</a></li>
<li class="mov_03"><a href="">動画その3</a></li>
<li class="mov_04"><a href="">動画その4</a></li>
<li class="mov_05"><a href="">動画その5</a></li>
</ul>

ゼロ埋めしたい桁数だけ$を書きます

最後に

HTMLだけではなくCSSの簡略化入力もかなり便利とのことです。
「簡略化した入力だけ覚えればよい」となってしまう側面もあるかなと思うと、
もうHTMLやCSSの文法を十分理解している人が使うのがいいのだと思いました。

Emmetから展開したHTMLは非可逆的である点と、
もっとも自分は、HTMLタグを省略せずに書くのは苦ではないので、
連番複製など無意味に時間がかかる作業のアシストに使いたいと思いました。
読んでいただきありがとうございました。

参考

お手持ちの環境にEmmetを導入するやり方から、CSSでのEmmetの便利っぷりにいたるまで、下記の記事に詳しく紹介されていました。

• [Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG]
  (http://leko.jp/archives/442)