“Emmet” でコーディングを効率化する
/
HTMLやCSSのコーディング作業をヘビーにする人なら、必須とは言わないまでも “Emmet” はその作業負荷を軽減するのに一役買ってくれそうだ。それも大いに。
たとえば以下の様なソースを記述したいとき
Emmetを使えば
div.wrapper>ul#list>li.item${list$}*5
わずかこれだけのソースを記述してキーボードから ^E ショートカットを実行すれば自動的に上記の整形されたHTMLソースに変換をしてくれます。
同様に、CSSに関しても
w100p
m10-2e
bdrs10
lg(top,#fff,#000)
m10-2e
bdrs10
lg(top,#fff,#000)
と書いた各行をEmmetで展開すれば瞬時に
width: 100%;
margin: 10px 2em;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000));
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);
margin: 10px 2em;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000));
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);
へと変換される。
（やだ、、超速いウケる）
変換前のコードはEmmet独自のシンタックスに従う必要がありますが、HTMLについては割とすぐに覚えられるかと思います。
問題はCSSの方で、こちらはショートコードが無数に用意されており詳しくはサイト上のCheat Sheetにまとめられています。正直なところこれを覚えるのは苦痛でしかありませんが、覚えてしまうとコードの展開に快感さえ伴うようになるのでその価値はあまりあるのではないかと。
またこのシンタックスやショートコードはプラグインパッケージ内のJSONファイルで記述されているため、もし必要であれば独自のコードを加えたり編集することも可能になっています。
ここまで読んでまるでZenCodingみたいだなと思った方も多いと思いますが、Emmetはその次世代プロジェクトとのこと。各種エディタのプラグインとして配布されており、Eclipse, Sublime Text, TextMate, Coda, Espressoなどコーダーが使いそうなエディタはおおむねカバーしています。
CodaのZenCodingプラグインは開発が終了してしまって残念に思っていましたので、Emmetのこの先のアップデートに期待してしまう。