Emmet で HTML を手早く書こう

## はじめに

HTML を素直に書こうとすると、小なり(<)大なり(>)を打ったり閉じタグを付けたりと面倒ですよね。
そこで覚えておくと便利なのが`Emmet`です。
[Emmet のドキュメント](https://docs.emmet.io/)には以下のように書かれています。

```english
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
```

※以下、Google 先生による日本語訳

```japanese
基本的に、そこにあるほとんどのテキストエディタでは、「スニペット」と呼ばれる一般的に使用されるコードチャンクを保存して再利用できます。スニペットは生産性を高めるための良い方法ですが、すべての実装には共通の落とし穴があります。最初にスニペットを定義する必要があり、実行時にそれらを拡張することはできません。

Emmetはスニペットのアイデアをまったく新しいレベルに引き上げます。動的に解析できるCSSのような式を入力し、省略形に入力した内容に応じて出力を生成できます。Emmetは、ワークフローがHTML / XMLおよびCSSに依存するWeb開発者向けに開発および最適化されていますが、プログラミング言語でも使用できます。
```

なにやら難しいことが書かれていますが、大雑把な理解として`EmmetはHTML、CSS、XMLに利用できるスニペット`と覚えておけばいいでしょう。

私はエディタに VSCode を使っていますが、VSCode だとデフォルトで Emmet を利用できるようです。
実際便利なのですが、いざ利用しようと思うとぱっと出てこなくて困ります。

というわけで、Emmet を簡単にまとめたいと思います。
HTML(XML)と CSS ではだいぶ記法が異なるようなので、今回は HTML に関するものをまとめていきます。

### 本記事に含まれるもの

- HTML(XML)を記述するときに利用できる Emmet

### 本記事に含まれないもの

- CSS を記述するときに利用できる Emmet

### 今回参考にした資料

[Emmet Documentation](https://docs.emmet.io/)

## 各操作の説明

### 要素の作成

要素名を記述すればそのまま開始タグ・閉じタグにしてくれます。

```emmet:Emmet
html
div
p
```

```html:HTML
<html></html>
<div></div>
<p></p>
```

### 要素の入れ子

`>`を使うことで要素の入れ子を表すことができます。

```emmet:Emmet
div>div>p
```

```html:HTML
<div>
  <div>
    <p></p>
  </div>
</div>
```

### 要素の並列

`+`を使うと要素を並べることができます。

```emmet:Emmet
p+p+p
```

```html:HTML
<p></p>
<p></p>
<p></p>
```

もちろん`>`と合わせて利用できます。

```emmet:Emmet
div>ul>li+li+li>p
```

```html:HTML
<div>
  <ul>
    <li></li>
    <li></li>
    <li>
      <p></p>
    </li>
  </ul>
</div>
```

### 入れ子を抜ける

`^`で入れ子から抜けることができます。

```emmet:Emmet
div>p^div
```

```html:HTML
<div>
  <p></p>
</div>
<div></div>
```

`^`は重ねて使うこともできます。

```emmet:Emmet
div>ul>li+li^^div>p
```

```html:HTML
<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>
<div>
  <p></p>
</div>
```

### 要素の複製

`*`で直前の要素を複製することができます。

```emmet:Emmet
ul>li*5
```

```html:HTML
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

### 要素のグループ化

`()`で要素をグループ化することができます。
個人的には`^`を使うよりもわかりやすいと思います。

```emmet:Emmet
(div>ul>li+li)+div>p
```

```html:HTML
<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>
<div>
  <p></p>
</div>
```

`*`と併せて使うと、複雑な構造も複製できます。

```emmet:Emmet
ul>(li>p)*3
```

```html:HTML
<ul>
  <li>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
</ul>
```

### ID とクラスの設定

CSS や JavaScript のセレクタとして、ID には`#`を、クラスには`.`をつけることがありますね。
Emmet でも同じ方法で ID とクラスを設定することができます。

```emmet:Emmet
div#container>div.box
```

```html:HTML
<div id="container">
  <div class="box"></div>
</div>
```

### 属性の設定

`[]`の中身は属性として認識されます。
複数の属性を記述したい場合はスペースをあけましょう。

```emmet:Emmet
button[name=hoge value=fuga]
```

```html:HTML
<button name="hoge" value="fuga"></button>
```

### 要素のナンバリング

`$`を使うと番号を振ることができます。
`*`と組み合わせれば連番にすることができるようです。

```emmet:Emmet
div>p.sentence$*3
```

```html:HTML
<div>
  <p class="sentence1"></p>
  <p class="sentence2"></p>
  <p class="sentence3"></p>
</div>
```

また、`@N`で任意の数値から開始することができるようです。

```emmet:Emmet
div>a.link$@4*4
```

```html:HTML
<div>
  <a href="" class="link4"></a>
  <a href="" class="link5"></a>
  <a href="" class="link6"></a>
  <a href="" class="link7"></a>
</div>
```

他にも`@-`で降順に並べることもできるようなのですが、比較的新しい機能なのか、手元の VSCode では動作しませんでした。

### テキストの記述

テキストは`{}`で記述することができます。

```emmet:Emmet
P{これはサンプルテキストです。}
```

```html:HTML
<P>これはサンプルテキストです。</P>
```

公式ドキュメントでは、`{}`は`div`や`p`のような個別の要素として判別される、みたいなことが書かれています。
どういうことかというと、以下のような記述ができるということです。

```emmet:Emmet
p>{サンプル。リンクは}+a{こちら}

```

```html:HTML
<p>サンプル。リンクは<a href="">こちら</a></p>
```

上記では`+`で並列させたテキスト要素と a タグについて、`>`を使って p タグに埋め込んでいます。
このように要素として扱えるので、以下のようなこともできます。

```emmet:Emmet
{1月$日の予定}*5
```

```html:HTML
1月1日の予定
1月2日の予定
1月3日の予定
1月4日の予定
1月5日の予定
```

コピペするよりずっと速いですし、HTML 以外にもいろいろと応用が聞きそうですね。

## おわりに

そんなわけで、Emmet でした。
クライアントサイドに関わるのであれば HTML とはずっと付き合っていく必要があるでしょう。
Emmet も使えるようになっておくと心強い味方になってくれそうですね。