Emmet でHTMLをサクッと気持ちよく書く。

Emmet という、HTMLやCSSをサクッと書くためのプラグインがある。 今日はチーム内で、どこまで一度にHTMLコードを生成できるか小一時間くらい盛り上がってしまった。 それくらい気持ちよく書ける。

emmet.io

vim やemacsを始め、多くのテキストエディタのプラグインが提供されている。 Visual Studio Codeには同梱されているので、すぐに試せる。

CSSセレクターに似た記述でHTMLを生成してくれる。

例えば、

div.container>div.row>(div.col-md-3{Sidebar}+div.col-md-9{Content})

と入力して展開すると、

<div class="container">
    <div class="row">
        <div class="col-md-3">Sidebar</div>
        <div class="col-md-9">Content</div>
    </div>
</div>

他にも、属性を付けたりもできる。

form.form>(label#name[for="name"]{Name}+input[type="name"]+label#email[for="email"]{Email}+input[type="email"]

こんな一行から、

<form action="" class="form">
    <label for="name" id="name">Name</label>
    <input type="name">
    <label for="email" id="email">Email</label>
    <input type="email">
</form>

フォームがサクッとガッツリできる。 なんか気持ち良い。

良いところ

慣れるまで時間がかかるかもしれないし、テンプレートエンジンやVue.jsなどクライアント側でレンダリングするような場合、そこまで複雑なHTMLを書くことは無いかもしれない。 けれど、

• 記述量が減るし、
• 閉じタグを忘れることもなくなるし、
• 単純作業を減らせる

といった利点がある。

頑張って一行で書ききったつもりが、思ったものと違うHTMLを生成してしまうこともあって、その時の残念感もなかなか大きい。 慣れるために、写経で、チートシートを脇に正解がわかった上でそれをEmmetで生成するにはどうするかと考えていくと良さそう。