少し前まではWebページを制作するツールとしてマークアップを意識させずに作業できるDreamweaverなどのWYSIWYGなUIのツールが人気だったと思うのですが、ここ数年ではJavaScriptを駆使して動的な制御を行うことが前提となっていることもあり、HTMLやJSを子細に記述できるテキストエディターを用いるのが一般的になってきている感があります。

テキストエディターを使うにあたっては、よく使うコード片をテンプレートとしてまとめておいて手軽に貼り付けられるコードスニペット機能などの支援機能はありつつも、基本的にはHTMLやCSSやJSを一字一句を手入力していくことになり、複雑で入り組んだHTMLタグを入力しようとする際はある程度時間を要したり、タイプミスに気を付けなければいけないという難点があります。

そこで、その負担を軽減する一助となるのが「Emmet」というエディタープラグインです。エディター上での編集作業をサポートしてくれるものであり様々な機能があるのですが、中でも一番分かりやすいのが「Expand abbreviations」という入力補完機能です。これは、jQueryのセレクターのような書式を文字列で与えると、それに応じたタグを展開して入力してくれるというもので、驚くほど効率的にHTMLを書くことができます。

例を挙げてみましょう。

ここでは、リストを含んだ入れ子構造のタグを入力したいという状況だとします。まずは、エディター上で以下の文字列を打ち込みます。

div#page>div.logo+ul#navigation>li*5>a

そして、おもむろにTabキーを打ちます。するとなんということでしょう！

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

対応するHTMLのコードが展開されます。大幅に手間を省けて便利ですね。さまざまなテキストエディターに対応していますので、公式サイトでチェックしてみてください。

このEmmet、以前から「Zen Coding」という名前で知られており、私も小耳に挟んだことはあるのですが、遅ればせながら最近使ってみて便利さを実感しているところです。これからも効率アップのためのツールには注目して、どしどし取り入れていきたいと思います。