【爆速コーディング】Emmetはいいぞ！【HTML編】

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のセレクタと一緒なのでとっつきやすいかと思いますので安心してついていってください。

## タグの出力(一つの要素だけ)
例えば
``` HTML
<section></section>
```
と出力する場合は
``` Emmet
section
```
を押してTabで表示されます。

sectionの部分は好きなタグ名に置き換えても使えますので
``` HTML
<div></div>
```
と出力する場合は
``` Emmet
div
```
でも使えます。

## class
ただこれだけでは、あまり便利に思えないです。ここからがだんだん便利になってきますのでご安心ください。
クラスを付与したい場合は、CSSと同じセレクタを使えばEmmetで書くことが可能なので

例えばclassを付けたい場合は
``` Emmet
div.test
```
``` HTML
<div class="test"></div>
```

```.```を付与してあげるだけでclassが付与されます。

またdivは下記のように省略できます。

``` Emmet
.test
```
``` HTML
<div class="test"></div>
```

## ID
IDも同様にCSSのセレクターのような書き方で表示されます。
同様にdivはタグを省略できます。

``` Emmet
#test
```
``` HTML
<div id="test"></div>
```
もちろん他のタグでもID使えます。
``` Emmet
section#test
```
``` HTML
<section id="test"></section>
```

## 要素のネスト（入れ子）
これだけでは、あまり便利さは実感できないですが、安心してください。まだまだ便利な機能はたくさんあります。

それが要素のネストです。
CSSのセレクターでネストした場所を指定したい場合は`>`を追加ますがそれを使ってネストしたHTMLの作成ができます。

``` Emmet
section>div
```

``` HTML
<section>
    <div></div>
</section>
```

# 応用
ここまででEmmetの基本は押さえれたかと思いますがもっと便利になってきます。
ここからはCSSのセレクターの概念からは少し外れていくかと思いますが

ここまで押さえれたあなたは応用もマスターしないともったいないです！

## 複製
プログラムで掛け算をしたい場合は`*`を使いますが、なんとこれを使うだけで同じタグが複製できるんです。

``` Emmet
ul.test>li.item*3
```

``` HTML
<ul class="test">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
```
## 兄弟要素
また兄弟要素を書きたい出力したい場合は
``` Emmet
h1+p
```

``` HTML
<h1></h1>
<p></p>
```
で出力できます。

## グループ化
先ほどのグループ化あまり便利に思えなかったと思いますが、このグループかをマスターすると抜群に威力を発揮します。
``` Emmet
(div>h1+p)*2
```

``` HTML
<div>
    <h1></h1>
    <p></p>
</div>
<div>
    <h1></h1>
    <p></p>
</div>
```

# 発展
ここまで、基礎応用と続きまして、少しずつ難しくなってきたかと思いますが。
ここからは、超便利な機能をいくつか紹介します。

## 連番
例えば、IDを連番で振っていきたいなんてことがあった時は
``` Emmet
div#test$*3
```
と書くと
``` HTML
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
```
と勝手に連番を振って出力してくれます。

また`01`のように番号を振りたい場合は

``` Emmet
div#test$$*3
```

``` HTML
<div id="test01"></div>
<div id="test02"></div>
<div id="test03"></div>
```
とすれば出力できます。

## HTMLのひな型
みなさんはHTMLのひな型どうやって記入していますか？
自分はこれを知る前は適当なサイトからコピーして記載していました。

ですがこれを知ってからその時間が短縮されました。
なぜなら
``` Emmet
!
```
で

``` 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)

``` Emmet
lorem
```
と書くと

``` HTML
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個をマスターした後にでも再度覚えてみましょう！