この世の大体の事柄は早ければ早いほど喜ばれます。
早くて喜ばれないものもありますが、
コーディングに関して言えば早いにこしたことはありません。
Html/cssをコーディングする上で使ってない人はいないんじゃなか？ってくらいの定番
「Emmet」
（※読み方わからない）
今ではDreamweaverやcloud9などのIDEにも統合されて標準機能として使用することができ、
ATOMやSubline textにEmmetを導入して使う方も沢山います。
今回は必ず覚えておきたいEmmetの使い方をご紹介いたします。
目次
Emmetってなに？
まずEmmetってそもそも何なのか。
Emmetというのは
htmlやcssをコーディングする際に爆速で書けるようにしてくれるプラグインです。
元々はZen-codingという名前でしたが〜〜の歴史的な部分省きます。
なぜ多くのIDEで採用され、導入必須と言われるまでEmmetが普及しているのか。
私が考えるに理由は２つ
- 導入が楽
- 省略記法が超楽
ようは楽なんです。
だって
!
て「！」一個書くだけで
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
って展開してくれるようなプラグイン使うっきゃないでしょう！
省略記法を覚えよう
私的には
- HTMLをCSS的に書くことができる。
- CSSをびびるくらい少ない文字で書ける。
この２点が気に入ってEmmetを使ってる理由です。
まずHTMLですと
.header>h1+ul#nav>li*3>a[href="#"]
このような省略記法を記入して展開をすると
<div class="header"> <h1></h1> <ul id="nav"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div>
こんな風に１発でここまで書けちゃいます！
一つ一つ解説していくと
CSSと同じように.headerとドットを頭につけるとclassとして定義されます。
＃をつけるとIDとして定義されます。
なので
.header #header
はそれぞれ
<div class="header"></div> <div id="header"></div>
と展開されます。
ちなみにドットや＃をつけないとどうなるかというと
<header></header>
と親タグとして展開されます。
ですので、header.headerで展開すると
<header class="header"></header>
というように展開されます。
なんとなく親子関係はわかってもらえたでしょうか。
どんどん書いてこう
.header>h1+ul#nav
次でてきたのが[>]
これは何かというと、.headerの中に入れますよーって意味です。
h1+ulの[+]は隣り合わせに配置しますという定義。
なので展開すると
<div class="header"> <h1></h1> <ul id="nav"></ul> </div>
としっかり.header>で定義した通り中に入っちゃってるのとか、
h1とulタグが仲良く隣り合わせになってるのがわかってもらえるかと思います。
そして最後に
.header>h1+ul#nav>li*3>a[href="#"]
li3のは何個生成するかという意味です。
li*100とか指定すると
<li></li>
が１００個できます。
li3>
とli3の下に定義したものは作られたそれぞれのタグの中に自動的に入れ込まれます。
つまり
li*3>a[href="#"]
が
<li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li>
となります。
もし
li>a[href="#"]*3
というようにa[href=”#”]の方に*3とつけてしまうと
Liタグの中に３つのa[href=”#”]が展開されるという意味になるため
<li> <a href="#"></a> <a href="#"></a> <a href="#"></a> </li>
という感じで展開されてしまうため注意が必要です。
次回はCSS編！
htmlの説明だけでも結構なボリュームになってしまいましたが、
Emmetの省略記法を覚えるだけで圧倒的にコーディングが早くなります。
導入のハードルも低いため、まだEmmetを導入してない方は是非使ってみてくださいね！
