はじめに
HTML を素直に書こうとすると、小なり(<)大なり(>)を打ったり閉じタグを付けたりと面倒ですよね。
そこで覚えておくと便利なのがEmmetです。
Emmet のドキュメントには以下のように書かれています。
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 先生による日本語訳
基本的に、そこにあるほとんどのテキストエディタでは、「スニペット」と呼ばれる一般的に使用されるコードチャンクを保存して再利用できます。スニペットは生産性を高めるための良い方法ですが、すべての実装には共通の落とし穴があります。最初にスニペットを定義する必要があり、実行時にそれらを拡張することはできません。
Emmetはスニペットのアイデアをまったく新しいレベルに引き上げます。動的に解析できるCSSのような式を入力し、省略形に入力した内容に応じて出力を生成できます。Emmetは、ワークフローがHTML / XMLおよびCSSに依存するWeb開発者向けに開発および最適化されていますが、プログラミング言語でも使用できます。
なにやら難しいことが書かれていますが、大雑把な理解としてEmmetはHTML、CSS、XMLに利用できるスニペットと覚えておけばいいでしょう。
私はエディタに VSCode を使っていますが、VSCode だとデフォルトで Emmet を利用できるようです。
実際便利なのですが、いざ利用しようと思うとぱっと出てこなくて困ります。
というわけで、Emmet を簡単にまとめたいと思います。
HTML(XML)と CSS ではだいぶ記法が異なるようなので、今回は HTML に関するものをまとめていきます。
本記事に含まれるもの
- HTML(XML)を記述するときに利用できる Emmet
本記事に含まれないもの
- CSS を記述するときに利用できる Emmet
今回参考にした資料
各操作の説明
要素の作成
要素名を記述すればそのまま開始タグ・閉じタグにしてくれます。
html
div
p
<html></html>
<div></div>
<p></p>
要素の入れ子
>を使うことで要素の入れ子を表すことができます。
div>div>p
<div>
<div>
<p></p>
</div>
</div>
要素の並列
+を使うと要素を並べることができます。
p+p+p
<p></p>
<p></p>
<p></p>
もちろん>と合わせて利用できます。
div>ul>li+li+li>p
<div>
<ul>
<li></li>
<li></li>
<li>
<p></p>
</li>
</ul>
</div>
入れ子を抜ける
^で入れ子から抜けることができます。
div>p^div
<div>
<p></p>
</div>
<div></div>
^は重ねて使うこともできます。
div>ul>li+li^^div>p
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div>
<p></p>
</div>
要素の複製
*で直前の要素を複製することができます。
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
要素のグループ化
()で要素をグループ化することができます。
個人的には^を使うよりもわかりやすいと思います。
(div>ul>li+li)+div>p
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div>
<p></p>
</div>
*と併せて使うと、複雑な構造も複製できます。
ul>(li>p)*3
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
ID とクラスの設定
CSS や JavaScript のセレクタとして、ID には#を、クラスには.をつけることがありますね。
Emmet でも同じ方法で ID とクラスを設定することができます。
div#container>div.box
<div id="container">
<div class="box"></div>
</div>
属性の設定
[]の中身は属性として認識されます。
複数の属性を記述したい場合はスペースをあけましょう。
button[name=hoge value=fuga]
<button name="hoge" value="fuga"></button>
要素のナンバリング
$を使うと番号を振ることができます。
*と組み合わせれば連番にすることができるようです。
div>p.sentence$*3
<div>
<p class="sentence1"></p>
<p class="sentence2"></p>
<p class="sentence3"></p>
</div>
また、@Nで任意の数値から開始することができるようです。
div>a.link$@4*4
<div>
<a href="" class="link4"></a>
<a href="" class="link5"></a>
<a href="" class="link6"></a>
<a href="" class="link7"></a>
</div>
他にも@-で降順に並べることもできるようなのですが、比較的新しい機能なのか、手元の VSCode では動作しませんでした。
テキストの記述
テキストは{}で記述することができます。
P{これはサンプルテキストです。}
<P>これはサンプルテキストです。</P>
公式ドキュメントでは、{}はdivやpのような個別の要素として判別される、みたいなことが書かれています。
どういうことかというと、以下のような記述ができるということです。
p>{サンプル。リンクは}+a{こちら}
<p>サンプル。リンクは<a href="">こちら</a></p>
上記では+で並列させたテキスト要素と a タグについて、>を使って p タグに埋め込んでいます。
このように要素として扱えるので、以下のようなこともできます。
{1月$日の予定}*5
1月1日の予定
1月2日の予定
1月3日の予定
1月4日の予定
1月5日の予定
コピペするよりずっと速いですし、HTML 以外にもいろいろと応用が聞きそうですね。
おわりに
そんなわけで、Emmet でした。
クライアントサイドに関わるのであれば HTML とはずっと付き合っていく必要があるでしょう。
Emmet も使えるようになっておくと心強い味方になってくれそうですね。