Vimmer のための Zen-Coding 入門

Vim

はじめに

AppEngine アプリを作るようになって、HTML を記述する頻度がかなり上がりました。DreamWeaver みたいな高級アプリは持っていないので、Vim でゴリゴリ。メンドクセ〜。そろそろなんとかしたい。そこで Zen-Coding の出番です。

Zen-Coding とは

簡単に説明すると、

ul>li*3

みたいな専用の記法で記述された HTML の構造を

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

という風に、普通の HTML タグに変換するシロモノ。多くのエディタや IDE のプラグインとして提供されています。

Vim で Zen-Coding を使う準備

Vim には zencoding.vim というプラグインがあるので、Zen-Coding を導入することができます。

Vim プラグインは pathogen で管理しているので、vimfiles/bundle 下に放り込めばインストール終了。

Zen-Coding はデフォルトだとインデントにタブを使ってしまうので、半角スペースを使うように _vimrc で設定した方がいいです。

" インデントは半角スペース4個
let g:user_zen_settings = {
            \'indentation' : '    ',
            \}

さっそく Vim で試してみます

略語とその変換結果をざっとまとめてみました。

略語を変換してみる

Vim で次の略語を入力し、

div

インサートモードで、div のすぐ後ろにカーソルがある状態で , を押すと

<div></div>

という風に HTML タグに変換されます。これが基本。

タグを階層化してみる

略語を > で連結すると階層化されます。

変換前
div>h1
変換後
<div>
    <h1></h1>
</div>
IDを指定してみる

# でタグの ID を指定できます。CSS セレクタに似ていますね。

変換前
div#foo
変換後
<div id="foo"></div>
クラスを指定してみる

. (ピリオド) でクラスを指定できます。これも CSS セレクタ風。

変換前
div.foo
変換後
<div class="foo"></div>

また、複数のクラスを指定できます。

変換前
div.foo.bar
変換後
<div class="foo bar"></div>
属性を指定してしてみる

[属性名=属性値] という書式で指定します。他の書式と比べると、ほとんど短くなってないです。

変換前
input[type=text][name=foo][value=bar]
変換後
<input name="foo" type="text" value="bar" />
繰返してみる
変換前
div*5
変換後
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

リストやテーブルを作成するときに大活躍。まぁ、Vim なら

5i<div></div><Enter><Esc>

でも同じことができますけど。

繰り返しつつ連番を振ってみる

$ の位置に連番が振られます。

変換前
div.foo$*5
変換後
<div class="menu1"></div>
<div class="menu2"></div>
<div class="menu3"></div>
<div class="menu4"></div>
<div class="menu5"></div>

桁数を指定することもできます。

変換前
div.bar$$$*5
変換後
<div class="bar001"></div>
<div class="bar002"></div>
<div class="bar003"></div>
<div class="bar004"></div>
<div class="bar005"></div>
同じ階層に複数の異なるタグを生成してみる

＋で連結すると、タグが同じ階層に展開されます。

変換前
h1+ul+div
変換後
<h1></h1>
<ul></ul>
<div></div>
まとまったブロックを変換してみる

() で挟むと、まとまったブロックとして扱われます。ちょっと複雑な HTML を作成するときに使います。

変換前
(div>h1+ul>li*3)+(div>address)
変換後
<div>
    <h1></h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div>
    <address></address>
</div>

Zen-Coding の生産性は想像以上

想像以上どころか、遥かに超えていました。

例えば、

(div#header>h1+ul#menu>li.menu_item*5)+(div#contents>div#main+div#sidebar)+(div#footer>address>a)

を変換すると

<div id="header">
    <h1></h1>
    <ul id="menu">
        <li class="menu_item"></li>
        <li class="menu_item"></li>
        <li class="menu_item"></li>
        <li class="menu_item"></li>
        <li class="menu_item"></li>
    </ul>
</div>
<div id="contents">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>
<div id="footer">
    <address>
        <a href=""></a>
    </address>
</div>

という風に、よく使用するレイアウトが簡単に作成できてしまいます。これだけの HTML が一瞬で作成されるさまは爽快。

記法も難しくないので、使いこなせるようになるまで、そう時間はかかりません。劇的に HTML 記述速度が速くなります。もう Zen-Coding 無しではやってられません。特に Web プログラマなら導入しないと損です。ホントに。