Emmetを活用してコーディングのパフォーマンスを向上させよう

2024年11月9日

EmmetはHTMLやCSSを省略記法で記述できるようにプラグイン・拡張機能です。

最近Youtube動画で、Beginner/JuniorエンジニアとPro/Seniorエンジニアのコーディングの仕方についた動画がよく流れてきたので、使い方をまとめてみました。

Emmetの使い方

Emmetの省略記法からHTMLのタグやCSSのプロパティを作成するにはENTER/RETURNまたはTABを使用します。どちらが使用するかはエディタによって異なっており、Visual Studio CodeはENTER/RETURN、TABのどちらでも変換できますが、WebStormでは[TAB]のみで変換します。

例えば、<div></div>タグを作成するには

div[ENTER/RETURN or TAB]

のように入力します。

HTMLのタグの作成

主にEmmetが使用されるのはHTMLのタグを記述する場合です。少ないタイピング量で素早くタグを作成できます。

よく使われる省略記法について見ていきます。

空タグを作成

単に空タグを作成したい場合はタグ名を入力後、[ENTER/RETURN or TAB]を入力します。

h2[ENTER/RETURN or TAB
->
<h2></h2>

空タグを作成するとカーソルは<h2>と</h2>の間にあるので、十字キーやマウスでカーソル位置を変えることなくタグ内に入力することができるようになります。

id属性付きの空タグを作成

実際にコーディングしていると、単純に空タグを作成するということはid属性やclass属性がついたタグを作成することがほとんどだと思います。id属性がついた空タグを作成するには、タグ名に続いて#を入力してid属性の名称を入力し、[ENTER/RETURN or TAB]を入力します。

h2#title[ENTER/RETURN or TAB]
->
<h2 id="title"></h2>

ここではHTMLファイル内で一意になるtitleというid属性をもったh2タグを作成しました。

クラス属性付きの空タグを作成

class属性をついた空タグを作成するにはタグ名に続いて.を入力してclass属性の名称を入力し、[ENTER/RETURN or TAB]を入力します。

div#sidebar[ENTER/RETURN or TAB]
->
<div class="sidebar"></div>

2つ以上のクラスを定義したい場合は、.class名を繰り返します。

div.sidebar.active[ENTER/RETURN or TAB]
->
<div class="sidebar active"></div>

BootstrapやTailwind CSSなどのCSSフレームワークを使っている場合はタグにいくつものクラスを定義することになるため、Emmetを使った省略記法でのコーディングは生産性に大きな影響を与えます。

div.mb-3.row[ENTER/RETURN or TAB]
->
<div class="mb-3 row"></div>

子要素をまとめて作成

例えば、ulタグの中にliタグがあるような構造をまとめて作成するには、>を使用します。

ul>li[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
</ul>

作成後のカーソル位置は<li>と</li>の間にあります。

要素を複数まとめて作成

同じタグを複数個まとめて作成したい場合は*に続いて繰り返し回数を入力することでまとめて作成できます。

前述の例で、子要素のliタグをまとめて3個作成したい場合は

ul>li*3[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

のようにします。作成後のカーソル位置は一番最初のliタグの<li>と</li>の間にあり、[TAB]で次のliタグの<li>と</li>の間に移動できるので、

ul>li*3[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

abc[TAB]
->
<ul>
  <li>abc</li>
  <li></li>
  <li></li>
</ul>

def[TAB]
->
<ul>
  <li>abc</li>
  <li>def</li>
  <li></li>
</ul>

ghi[TAB]
->
<ul>
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ul>

のように十字キーやマウスを使うことなく効率的にコーディングすることができます。

テキスト付きの要素を作成

前述ではh2タグを空タグで作成して、その後にテキストを入力していました。Emmetではテキスト付きの要素を作成することもできます。

h2#title.text-5xl.font-semibold{タイトル}
->
<h2 id="title" class="text-5xl font-semibold">タイトル</h2>

少し注意点すべき点があるとすれば、Copilotなどが有効になっていると、{を入力したあと、CSSのプロパティを候補として提示することがあり、何も考えずに[TAB]を押すと変換できない場合がある点です。初めての場合になりやすいので注意しましょう。

ダミーテキストを作成

デザインを確認するために実際のコンテンツの代わりにダミーテキストを挿入したいということがあります。

このような場合にはloremを入力して[ENTER/RETURN or TAB]を入力すると、

lorem[ENTER/RETURN or TAB]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nisi facere, velit facilis quo rerum quae eveniet animi alias, voluptate rem, tempora placeat ut. Voluptates saepe earum nesciunt! Repudiandae, earum.

のようにダミーテキストが作成されます。

独自の属性付きの要素を作成

ピュアなHTMLのタグしか生成できないというわけではなく、独自の属性をつけることもできます。

例えば、Vue.jsのv-ifディレクティブをもったdivタグを作成するとします。v-ifディレクティブが真になる条件はisShowがtrueになる場合とします。

div[v-if="isShow"]
->
<div v-if="isShow"></div>

今回はVueのディレクティブの例を示しましたが、aria-*属性などにも使用できるため、利用シーンは多いと思います。

CSSプロパティの作成

あまり知られていないかもしれませんが、CSSのプロパティを省略記法で作成することもできます。

.title {

}

というセレクタがあるとき、

.title {
  mb10[ENTER/RETURN or TAB]
}

のように省略記法をでプロパティを書くと、

.title {
  margin-bottom: 10px;
}

のようにプロパティが作成されます。

HTMLの場合と異なり、省略記法を覚えていないと使えませんが、ある程度法則性があり、Tailwind CSSのクラス名と同じようなルールのものもあるので、よく使うものから覚えていくのがよいと思います。

Emmetチートシート

Emmetの使い方をまとめたチートシートが公開されています。

docs.emmet.io

Cheat Sheet

HTMLとCSSの両方をサポートしていますので、是非ご活用ください。

EmmetとCopilotの使い分け

少ないタイピング量でコードを生成するといえば、CopilotやTabnineなどの生成AIがあります。

生成量という意味では生成AIに軍配が上がりますが、必ずしも意図した内容が生成されるとは限りません。同じような内容を何度も生成する場合、定石のような内容を生成する場合、どう書けばいいかわからない場合などは生成AIを使用し、何を出力したいのかがはっきりしている場合は生成AIが提示する候補を[ESC]でキャンセルしてEmmetの省略記法を使うのがよいと思います。

どちらか一方だけを使うのではなく、それぞれの長所と短所を理解し、適したツールを選択していくことを大切です。

コーディング時の意識をアップデートする

HTMLのコーディング時にEmmetを活用する場合、コーディング時の意識をアップデートするようにしていくことが必要かもしれません。

Emmetを使わないときは、タグの構造だけに着目してタグを作成し、その後にデザインを整えるためにクラスをどこにつけようか、といった流れで書くことができます。

例えば、3つの列を持つテーブルを作成する場合、

<table>
  <thead>
    <th>
      <td></td>
      <td></td>
      <td></td>
    </th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

のようにタグの構造を作成してから、テーブル全体をデザインするためにdata-tableクラスをtableタグにつけて、ヘッダー部分をデザインするためにtheadにtable-headerをつけて、ボディ部分をデザインするためにtbodyにtable-bodyクラスをつけて、といったように後からつけていくことができます。

<table class="data-table">
  <thead class="table-header">
    <th>
      <td></td>
      <td></td>
      <td></td>
    </th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

一方、Emmetを活用しようとすると、タグの構造を考えるときにそのタグにどんな意味を持たせるかということを考えながらやった方が効率的に生成できます。

// データテーブルを意味するtableを用意して、
table.data-table
↓
// その中にヘッダーを意味するtheadを用意して、
table.data-table>thead.table-header
↓
// ヘッダータイトルはまだ決めていないけど、3列用意しよう
table.data-table>thead.table-header>tr>td*3
↓
// さらにボディ部分を意味するtbodyを用意して、
table.data-table>thead.table-header>tr>td*3^tbody.table-body
↓
// 同じように3列用意しよう
table.data-table>thead.table-header>tr>td*3^^tbody.table-body>tr>td*3[ENTER/RETURN or TAB]
->
<table class="data-table">
  <thead class="table-header">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

思考の順序と省略記法の書く順序が一致すると、もっとも自然にもっとも効率的にコーディングすることができます。これは慣れが必要となるので、最初は声に出しながら何度もトレーニングするのがよいでしょう。