ブログトップ 記事一覧 ログイン 無料ブログ開設

idesaku blog

2010-04-24

[][]Vimmerプログラマは迷わずZen-Codingしろ!

前々から気になっていた、Zen-Codingを試してみた。これはすばらしい!特にVimmer*1は迷わず使うべき。

プログラマの世界ではコピペは悪!しかし…

「"Hello."と3回表示するプログラムを書け」と言われたら、どう書く?

puts "Hello."と書いて、コピペで3行にするのさ!

puts "Hello."
puts "Hello."
puts "Hello."

そんなわけない。もちろん、ループを使うだろう。

3.times { puts "Hello." }

それでは、「HTMLで3項目からなるリストを書け」と言われたら?

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

……今、liを書いてコピペして増やさなかった?

こういうときも、プログラミングするときみたいに書ければなぁ。

という願望を満たしてくれるのが、Zen-Codingだ。このケースだと、次のように書いて展開すれば同じHTMLタグが書き出される。

ul>li*3

Zen-Codingとは

CSSセレクタに似た簡単な略記をするだけで複雑なHTMLのコードを記述できるというすぐれたソフトウェアであり、テクニックだ。

知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

私はVimmerなので、ZenCoding.vimを使わせてもらうぞ。

先ほどの例のように、3項目からなるリストを書きたいとする。その場合、HTMLファイルを開き、まずは次のような略記を行う。

ul>li*3

カーソルを行末に置いたまま*2、<C-y>,(Ctrl+yのあとカンマ)を押す。すると。

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

こうなる!

他にも、例えば…

table>thead>tr>th*2<<tbody>tr*3>td*2

これが、次のように展開される。

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

つまり、書きたいHTMLタグをそのまま書くのではなく、HTMLタグの構造を決まった記法で記述してやれば、それを展開して普通のHTMLタグにしてくれるわけだ。まるでプログラミングのようではないか!実に効率的だ!くわしい記法こちらを参照

とはいえ、新しい記述法である、そう簡単になじめるものではないかもしれない。記述するコードを効率的にすることを考えても、書く行為そのものを効率的にするというのはなかなか経験があるまい。せいぜいスニペットからコピペする程度で、Zen-Codingが実現しているような最少のロジカルな記述から大きな出力を生むなんてとてもとても……我々Vimmerを除けば。

VimmerはすでにZen-Codingしている

世界に数多いる屈強で命知らずなテキストエディット野郎どもの中でも最も訓練されている我々Vimmerを、そこらのメモ帳/Eclipse/Emacs使いと一緒にされては困る。こちとら、80i=<ESC>で罫線引くとか、2wで二つ先の単語の先頭文字までジャンプするとか、ditでタグの中身を消すとか、そういう変態的な簡素なコマンドの組み合わせで効率的に編集する手法を日常的に使っているのである。これはまるでZen-Codingしているようではないか!違う、逆だ、Zen-CodingはVimのコマンドを駆使している様と同じだ!

liタグを100行書きたい? 100i<li></li>[return][ESC]としたまえ!

つまり、Zen-CodingはまさにVimmerのためのツールだと言っても過言ではないのである。Vimmerにはすでにこれを即座に使いこなすだけの素養がある。また、Vimの哲学が魂にまで刻み込まれている我々には、例えVimではないエディタを使う場合であっても*3、Zen-Codingにいささかの抵抗も生まれはしないのだ!

Zen-CodingはVimmerからすれば参入障壁など無きに等しく、手っ取り早く恩恵にあずかれる。従って、Vimmerはすべからくzencoding.vimインストールして、Vimのパワーをさらに拡張すべきである!もちろんVimのすばらしいコマンドを使えば、先ほど示したようにliを100行書くなど造作もないが、HTMLタグの記述に関してはZen-Codingのほうがより簡単だ。

li*100

Vimmerではない?よろしい、それでも興味を持ったなら自分の好きなテキストエディタでZen-Codingを始めるとよい。対応しているエディタは多いから、おそらく君の好きなエディタでもZen-Codingできるだろう。そして、Zen-Codingすげぇ!と感じたなら、それはすなわちVimのすばらしさを認めたことに等しいので、Vimに移行しなさい。我々の世界へようこそ。

おまけ:zencoding.vimのための設定

zencoding.vimを使うにあたり、二つだけ設定をいじったので紹介しておきたい。

まず、zencoding.vimデフォルトではインデントにタブを使う。しかし、インデントにタブなんて使わねーよ、set expandtabするに決まってるだろ、という人も多いと思う*4。そこで、.vimrcに次の設定を足した。

let g:user_zen_settings = {
            \'indentation' : '    ',    <--- 半角スペース4つ
            \}

また、略記を展開したとき入力箇所に自動的にカーソルが合うようになっているのだが、そこに必ずゴミ($cursor$)が入ってしまい困った。

<ul>
    <li>$cursor$</li>
    <li></li>
    <li></li>
</ul>

これは、バックスペースの設定が違っているためだった。これまでset backspace=indent,eolにしていたのだが、これだと挿入開始位置より手前の文字を削除できないので、$cursor$という文字列の削除に失敗してしまうらしいのだ。そこで、set backspace=indent,eol,startにしたところ、ちゃんと消えるようになった。

(2010/05/07追記)ZenCoding.vim 0.37で、backspaceの設定に関係なく$cursor$が消えるよう修正されているので、こんな小細工は不要になった。自分の信じるbackspace設定を貫いてよし。修正内容はこのへん*5mattn氏ならびに jk3us氏に感謝しましょう。っていうかありがとうございます!

*1Vimユーザを指す。

*2:insertモードのままでいい。

*3:極めて不愉快なことだが、現実は厳しく妥協を迫られることもあろう。

*4:ワシもじゃ ワシもじゃみんな!!

*5:コマンドの使い方が勉強になるなぁ。sとか知らなかった。"_使ってもらえると、レジスタが汚れなくてなお良いかもしれない?

tyrutyru 2010/04/24 21:52 > Vimer
僕もどっちが正解か分からないですがVimmerの方がよく聞く気がします。

idesakuidesaku 2010/04/24 22:34 ツッコミありがとうございます。

私もどっちにしようかと悩んだのですが、はてなキーワードにVimmerと載っているのを今確認したので、はてな民としてVimmerに合わせたいと思います。というわけで修正しました。

tyrutyru 2010/04/24 23:12 微妙に残ってます。>Vimer
> 私はVimerなので、ZenCoding.vimを使わせてもらうぞ。
> VimerはすでにZen-Codingしている

idesakuidesaku 2010/04/24 23:50 おおっと、やっつけ作業なのがバレバレだ。今度こそ。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証