2019年11月26日 Emmetで快適コーディング

 
こんにちは！アシスタントデザイナーのイワタです。
 
今月11月に入社いたしました。
私にとって、はじめてのWeb業界ですが、弊社にて日々、先輩方に教わりながら仕事に取り組んでいます。これからどうぞよろしくお願いいたします。
 
今回のブログはEmmetについて書いてみたいと思います。
 
私はWebデザインに興味を持った当初、教則本などを参考にHTML、CSSコーディングを練習していました。見慣れない単語をポチポチと打ち込んで、それがブラウザに反映されることに感動していました。
 
しかし、タグやプロパティの英単語のタイプミス、閉じタグや閉じ波括弧の書き忘れ、などで表示が崩れてしまうことも多く、このような簡単なミスを修正することも含めて、とにかくコーディングに時間がかかっていました。
 
ところがEmmetを取り入れてからというもの、英単語のタイプミス、閉じタグ、括弧忘れなどが格段に減り、結果コーディングにかかる時間を大幅に短縮することにつながっています。
 

Emmetとは？

 
HTML、CSSを記述する時に使用する省略記法。
 
Emmetが定義しているHTML、CSS省略記法を記述してTabキーで展開します。展開すると正規のHTML、CSSに変換されます。
※コード展開方法はテキストエディタにより異なる場合あり
 
主要テキストエディタ、オンラインエディタのEmmetプラグインを公式サポートをしており、VS Codeなどサードパーティー開発のEmmetでも一部機能を除きサポートしているようです。
 
Emmet公式ダウンロードページにてサポート先の一覧が記載されています。
https://emmet.io/download/
 
私の場合、テキストエディタはBracketsを使っているのですが、Emmetプラグイン導入はものの数分で完了できるので、とても手軽に機能を追加できるのがうれしいです。Bracketsのコード補完機能とEmmetを組み合わせることでよりコーディングの時短と効率化を実感しています。
 

基礎的な記述展開例

 

HTMLの例

 

<!-- 展開前 -->
div

<!-- 展開後 -->
<div></div>

divと入力して展開するだけでdiv要素が展開されました。うっかり忘れがちな開始タグと閉じタグが自動入力されています。
 
 

<!-- 展開前 -->
div>ul*3>li>a

<!-- 展開後 -->
<div>
  <ul>
    <li><a href=""></a></li>
  </ul>
  <ul>
    <li><a href=""></a></li>
  </ul>
  <ul>
    <li><a href=""></a></li>
  </ul>
</div>

 
 

CSSの例

 

/* 展開前 */
w100

/* 展開後 */
width: 100px;

数字に単位を指定しなければデフォルトの値は「px」になります。単位を指定すれば「%」「em」などの単位が展開されます。よくやりがちな英単語のタイプミス、コロンとセミコロン忘れのリスクが軽減されます。
 
 

/* 展開前 */
w100+m0-a+bd+

/* 展開後 */
width: 100px;
margin: 0 auto;
border: 1px solid #000;

このような複数のプロパティも一度に展開することができます。私もはじめて複数プロパティを一括展開できたときは感動を覚えました。
 
 
Emmet公式チートシートページにて省略記法の一覧が記載されています。
https://docs.emmet.io/cheat-sheet/
 

まとめ

 
Emmetは、省略記法に慣れるまで少し時間がかかるかも知れません。
しかし、一度慣れてしまえば、きっとEmmetなしのコーディングには戻れなくなるでしょう。
そのくらいコーディングに時短と効率化をもたらしてくれます。もうEmmetの制作者にリスペクトを感じずにはいられません。
 
これからWebデザインの勉強を始める、あるいは、始めたばかりなど、Emmetを使ったことがない方にオススメです。導入も簡単なので、よければぜひ一度体験してみてください。
 
今回はEmmetをご紹介させてもらいました。