Qiita初心者です。ご質問・ご指摘はコメントかツイッターまでお気軽にどうぞ！
よかったらLGTMや拡散していただけると励みになります。
爆速でHTMLをコーディングしよう
プログラマーの大事な要素の１つとして速さは割と大事な要素でもあります。同じ仕事をするのであれば、早いか遅いかを比較したときに早いほうが良いということは言うまでもない事実かと思います。
自分はよくHTMLのコーディングの速さにびっくりされることがあります。
ただそれは自分が爆速でタイピングをしているわけではなくある1つの知識を身に着けているからです。
この知識を早めに知ってぜひ他の同期や社員との差をつけちゃいましょう！
そしてその秘訣が明する「Emmet」です。
そして、Emmetのたった10個のコツを押さえるだけで爆速コーディングが可能になります。
Emmetとは
Emmet（旧：Zen Coding）は既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。
(引用：wikipedia)
つまりは、HTMLやCSSを素早く編集できるプラグインを入れてそれを使っているということです。
どうやって使うの
Visual Studio CodeでEmmetは標準で使えるようになっています。
また、他のIDEなででも拡張機能を追加することによって多くの環境で利用することができます。
Let's try
でも、難しいんじゃないかと思われる方もいるかもしれませんが、HTMLの知識とCSSの知識さえあれば覚えるコツがあり、基本的にはとっっても簡単なんです。
なぜかというと、基本的な使い方はほぼCSSのセレクタの書き方と連動しているからです。
基本
まずは、基本的なものからお伝えしていきます。
ほぼCSSのセレクタと一緒なのでとっつきやすいかと思いますので安心してついていってください。
タグの出力(一つの要素だけ)
例えば
<section></section>
と出力する場合は
section
を押してTabで表示されます。
sectionの部分は好きなタグ名に置き換えても使えますので
<div></div>
と出力する場合は
div
でも使えます。
class
ただこれだけでは、あまり便利に思えないです。ここからがだんだん便利になってきますのでご安心ください。
クラスを付与したい場合は、CSSと同じセレクタを使えばEmmetで書くことが可能なので
例えばclassを付けたい場合は
div.test
<div class="test"></div>
.を付与してあげるだけでclassが付与されます。
またdivは下記のように省略できます。
.test
<div class="test"></div>
ID
IDも同様にCSSのセレクターのような書き方で表示されます。
同様にdivはタグを省略できます。
#test
<div id="test"></div>
もちろん他のタグでもID使えます。
section#test
<section id="test"></section>
要素のネスト（入れ子）
これだけでは、あまり便利さは実感できないですが、安心してください。まだまだ便利な機能はたくさんあります。
それが要素のネストです。
CSSのセレクターでネストした場所を指定したい場合は>を追加ますがそれを使ってネストしたHTMLの作成ができます。
section>div
<section>
<div></div>
</section>
応用
ここまででEmmetの基本は押さえれたかと思いますがもっと便利になってきます。
ここからはCSSのセレクターの概念からは少し外れていくかと思いますが
ここまで押さえれたあなたは応用もマスターしないともったいないです！
複製
プログラムで掛け算をしたい場合は*を使いますが、なんとこれを使うだけで同じタグが複製できるんです。
ul.test>li.item*3
<ul class="test">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
兄弟要素
また兄弟要素を書きたい出力したい場合は
h1+p
<h1></h1>
<p></p>
で出力できます。
グループ化
先ほどのグループ化あまり便利に思えなかったと思いますが、このグループかをマスターすると抜群に威力を発揮します。
(div>h1+p)*2
<div>
<h1></h1>
<p></p>
</div>
<div>
<h1></h1>
<p></p>
</div>
発展
ここまで、基礎応用と続きまして、少しずつ難しくなってきたかと思いますが。
ここからは、超便利な機能をいくつか紹介します。
連番
例えば、IDを連番で振っていきたいなんてことがあった時は
div#test$*3
と書くと
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
と勝手に連番を振って出力してくれます。
また01のように番号を振りたい場合は
div#test$$*3
<div id="test01"></div>
<div id="test02"></div>
<div id="test03"></div>
とすれば出力できます。
HTMLのひな型
みなさんはHTMLのひな型どうやって記入していますか？
自分はこれを知る前は適当なサイトからコピーして記載していました。
ですがこれを知ってからその時間が短縮されました。
なぜなら
!
で
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
が出力されるからです。
適当な文字（ダミーテキスト）
最後は少し面白機能ですがあまり探してもここまで書かれていないところもありましたのでこんな機能もあります。
それがダミーテキストです。
loremという機能があります
ちなみにloremとは
出版やグラフィックデザインなどに用いられるダミーテキスト「lorem ipsum」の略。(Wikipedia)
lorem
と書くと
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit, incidunt, quam voluptatum veniam qui neque ex, non eum quo harum inventore numquam sequi blanditiis temporibus corrupti ab expedita. Sequi, placeat.
この様にダミーな文字が出力されます。
最後に
ここまでが自分がよく使うEmmetの機能でした。
もちろん他にもひとつ上の要素に戻る(^)や要素属性をつける機能([])、コメントを出力する機能(c)などもありますが自分が実務で使うなかで即効性が高い10個に絞ってご紹介させていただきました。
ぜひこの10個をマスターした後にでも再度覚えてみましょう！