design makes life richly.

Published: 5年 ago

Sublime Text 2『hayaku』+『Emmet』で変わるセカイ


 
この記事は、Sublime Text 2 Advent Calendar 2012の16日目の記事です。
 

コーディングが苦手だからこそ、コーディングを効率化しよう

 
Web制作にあたり、デザイン業務とコーディング業務をやっている。
もっとデザインに時間を割きたいけど…コーディング苦手だし、なかなか時間取れない…。こういった悩みを持っている方って結構多いと思うんですよね。
デザインが絶対的な土台にあるわけですから、コーディングの時間を効率化させて、デザインにかける時間を増やす事は、必ずメリットになります。
そこで、そのコーディングの効率化をするための、SublimeText2のパッケージ。
『Emmet』『hayaku』を紹介します。
 

 

『Emmet』でhtmlコーディングの効率化

 
Zen-codingより、更に使い勝手の良くなったEmmet。基本的にhtmlのコーディングにおいてはZen-codingと変わりはありませんが、階層の付け方に変更が加えられました。
例を出して説明しましょう。

<div id="header">
    <div class="nav"></div>
    <div class="logo"></div>
</div>
<div id="wrapper"></div>

<-- Zencodingの場合 -->
(#header>(.nav+.logo))+#wrapper<!-- 展開は「tab」 -->

<-- emmetの場合 -->
#header>.nav+.logo^#wrapper <!-- 展開は「control+e」 -->

どうでしょう?Emmetの方がずいぶんとすっきりしていますね。
どういう事かというと、Zen-Codingの場合、階層ごとの並列する要素を”()”で囲う必要がありました。
Emmetでは”()”で囲う必要がなくなり、”^”で階層を一段階上に上がる事が出来るようになったという訳です。
正直Zen-codingの時は階層が大きくなる程、まとめて展開するのが、ややこしい印象がありました。この階層を上がる機能って地味に、ありがたいです。
 

他に面白い機能としましては、

p*2>lorem

と入力して展開すると

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor sint aspernatur sit nostrum nisi asperiores vel. Nihil tempore a quia et ducimus quidem beatae impedit rerum provident maxime non assumenda.</p>
<p>Assumenda consequatur porro commodi molestiae eum aut inventore aperiam voluptates pariatur reprehenderit facere est eos earum repellat aliquam magnam dignissimos vitae nisi dolore placeat ab distinctio mollitia modi nobis quasi.</p>

といったようにダミーテキストを入力してくれるといったものです。これも地味にありがたいですね!
 

実際に、しばらく使っている印象としても、Zen-Codingをもともと使っている人でしたら、すんなり移行出来る範囲での変更ですし、試してみてはいかがでしょう?
使った事の無い方でも、Emmetの階層に対する考え方さえ理解すれば、割と早く慣れて行くかと思います。
こんなに簡単にコードを展開出来る『Emmet』を使わない手は無いですよね!!
 

 

『hayaku』+『Emmet』でcssコーディングの効率化

 
htmlの効率化に対して、今度はcssの効率化についてです。先ほど紹介したEmmetのショートコードも驚く程、優秀なのですが、今から紹介するhayakuはさらにcssを簡単に、早く入力出来るパッケージになっています。
では、hayakuがどれほど優秀なのか、比較してみましょう。
 

例えば、

div {
    overflow: hidden;
}

といったコードの展開の仕方をEmmetとhayakuで比べてみましょう。

<-- emmetの場合 -->
ov:h
<-- hayakuの場合 -->
oh

どうでしょう?Emmetの場合ってこの”:”などの記述が結構面倒くさかったりするんですよね。
さらに、Emmetって展開の仕方がガチガチに固められていて、決まった記述じゃないと上手く展開されないんですよね。
つまり、どういう事かと言いますと、hayakuで「overflow: hidden;」を展開しようと思ったら、
 
「oh」でも「ofh」でも「ovh」でも「ovelh」でも、何でも良いんですww
 
なんというか、記述の仕方どうのこうのをすっとばして、適当にこれで展開できるんじゃね?みたいなノリで使えるのがhayakuなんです。
真面目な話、学習コストがかからないってのは、本当にすばらしいです。
hayakuを使えばショートコードを覚える必要なんて、ほぼありません。
 

ただ、そんなhayakuにも問題はあります。
hayakuだと

div {
    margin: 20px 10px 5px 0;
}
notice
といった細かい数字の展開は出来ないのです。
そこで、『Emmet』の登場です。
 

上記のコードを展開する場合、Emmetだと

m20-10-5-0<-- control+eで展開 -->

という風に細かいニュアンスのものまで展開出来るわけです。
柔軟な、『hayaku』厳格な『Emmet』。
hayakuをメインで使用して、どうしても手の届かないカユい部分にEmmetを使用してみてはどうでしょうか?それぞれ特徴はありますが、共用すれば鬼に金棒です!
『Emmet』+『hayaku』でコーディング対する苦手意識を無くしましょう!!
効率化を突き詰めれば、デザインに対する余裕も増えるはずです!
 

 

 
■Emmet
https://github.com/sergeche/emmet-sublime

■hayaku
https://github.com/hayaku/hayaku

※追記
どうやらEmmetにも『Fuzzy Search』という機能が追加され、「oh = overflow:hidden;」と展開出来るようになっていたようです。とはいえ、全てのコードに対応している訳では無いようなので、『hayaku』を使って損は無いかと思います。
 
詳しくはこちらから 『Fuzzy Search』

 

 

 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK