Emmetでコーディングスピードをあげよう！
スポンサーリンク
コーディングスピードを上げるためにオススメなEmmet。
Emmetとはなにか？についてと、Emmetを使ってみてよかった点をまとめました。
Emmetとは？
HTML・CSSをコーディングする時のショートカットキーのひとつで、使いこなせる様になると圧倒的なスピードでコーディングが進みます。
時間短縮の他にもショートカットを自動的に展開してくれるので、
タイプミス（スペルミス）が減少します。（←ありがたいです）
backgroundなどをタイプミス（スペルミス）してコードが動かないことがよく起こっていた私にはスピードアップ加え、タイプミス減少したので、コードを考えることに集中できるようになりました。
テキストエディタによってはEmmet機能が標準装備されている場合もありますが、私が使っているテキストエディタの「Brackets」は拡張機能を導入する必要がありましたので、お使いのエディタをいまいちどご確認ください。
「Brackets」の拡張機能についてはこちらの記事でどうぞ↓
Emmet記法を使えるようになってよかったこと
私がEmmet記法を覚えてよかったことを考えてみました↓
- ドットインストールの動画に１倍速でもついて行けるようになった
- スペルミスが減ったのでコードが動いてくれる
- 全体的に時間短縮になったのでコードを考える時間が増えた
Emmeが使えるようになるといいことがいっぱい！
Emmetをやるために覚えておきたい構文（文法）
Emmetはショートカット記法で書いて、Tabキーを押すと展開されます。
カーソルがEmmetはショートカット記法で書いた文の最後にいることを確認してTabキーを押します。
Tabキーを押さないと何も起こりませんのでご注意を。
そして、私がよく使っているEmmetの構文（文法）を紹介します。
子要素を作る時
「>」を使います↓
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
同格の要素を作る時
「+」を使います↓
div+p+bq
<div></div> <p></p> <blockquote></blockquote>
グループ要素を作る時
「()」を使います↓
(div>dl>(dt+dd)*3)+footer>p
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
同じ要素を複数作る時
「*」を使います↓
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Class要素を作る時
「.」を使います↓
.title
<div class="title"></div>
Id要素を作る時
「#」を使います↓
#header
<div id="header"></div>
HTMLとCSSのEmmetのショートカットについては別記事でまとめていますので、下記記事をご参照下さい。
Emmetに慣れるためには
とにかく使うことが慣れる近道です。（←当たり前のことだけど）
私は慣れるまではCheat Sheetを片手にコーディングをしました。
慣れるまでは少しやりづらいこともありますが、慣れると「Emmetなしでコーディングするの大変」ってなりますよ。
まとめ
Emmetをマスターすると効率よくコードを書けるようになるのでまだ使ったことがなければ、ぜひ使ってみてください。