Emmetの魅力は「短い入力で複雑な構造を展開できる」ことです。
以下の表は、よく使われる基本構文の一部です。

<div class="container"></div>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<section>
  <h2></h2>
  <p></p>
</section>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

スニペットは、頻出コードをプレフィックス（prefix）で呼び出せる仕組みです。
VS Codeの場合、次の手順で設定します。

1. Code → 基本設定 → ユーザースニペットを開く

2. 新規スニペットファイルを作成（例：html.json）

3. 以下のように登録

{
  "section template": {
    "prefix": "sect",
    "body": [
      "<section class=\"$1\">",
      "  <h2>$2</h2>",
      "  <p>$3</p>",
      "</section>"
    ],
    "description": "基本のセクション構造"
  }
}

これで sect と入力して EnterやTab を押すだけでテンプレートが展開されます。
繰り返し使う構造を登録しておくことで、入力作業の手間を削減できます。

スニペットは「よく使うコードの自動展開ツール」として、
現場でのコーディング時間を大きく短縮します。
ここでは、筆者が実際に使用しているスニペットの一部を紹介します。
用途別に登録しておくことで、Emmetと併用した効率的な開発フローが実現できます。

HTMLセクションテンプレート（セクション構造）

  "section": {
    "scope": "html",
    "prefix": "sec",
    "body": "<section class=\"sec-$1\"></section>",
    "description": "section tag HTML"
  },

CSSのposition:absoluteを使用した上下中央揃え

  "absoluteCenter": {
    "scope": "css,scss",
    "prefix": "abc",
    "body": ["position: absolute;", "top: 50%;", "left: 50%;", "transform: translate(-50%, -50%);"]
  },

CSSのborderプロパティ

  "border": {
    "scope": "css,scss",
    "prefix": "border",
    "body": "border:1px solid #$1;",
    "description": "border"
  },

スニペットでは、プレースホルダ（タブストップ） という記法を使って、
展開後にカーソルを順番に移動させながら値を入力できます。

たとえば $1, $2, $3 のように記述しておくと、
スニペットを展開した際に Tabキーを押すごとにカーソルが次の入力箇所へ移動 します。

これにより、テンプレートの中でもスムーズに値を入力でき、
「書く」よりも「流れで入力する」感覚に近い操作が可能になります。

Emmetとスニペットを組み合わせることで、
静的なHTML構造と動的なコードを分離しつつ高速に構築できます。

例：WordPressのサブループを使う場合

WordPress制作では、WP_Queryを用いたサブループ構文を頻繁に記述します。
このとき、Emmetで外枠を作り、スニペットでPHPループを呼び出すのが効率的です。

1 Emmetで基本構造を展開


section.post-list>ul

2 スニペットでWordPressサブループを呼び出す

これにより、HTML構造はEmmetで即時生成し、動的部分はスニペットで再利用できます。
結果、修正や差し替えも容易になり、現場での生産性が格段に上がります。

1. 命名ルールを統一する（BEM / OOCSS など）

スニペット登録時にクラス命名が統一されていると、コードの再利用性が高まり、チーム開発でも一貫性が保たれます。

2. 補完キーワードを短く・意味のある単語にする

スニペットの呼び出し名（prefix）は短く覚えやすく。
例：sect（セクション）、card（カードUI）、cta（ボタンエリア）など。

3. スニペットファイルを用途ごとに分けて管理する

VS Codeなどのエディタでは、スニペットをファイル単位で管理できます。
たとえば html.json、php.json、scss.json のように、
言語やプロジェクトごとに分けて保存しておくと便利です。

スニペットを1つの大きなファイルにまとめてしまうと、
補完候補が多すぎて逆に効率が落ちます。
用途別に分割することで、必要なスニペットだけが候補に出る軽快な環境を維持できます。

Emmet は“構造を短時間で作る”ためのツール、
スニペット は“再利用と品質の安定”を支える仕組みです。

両者を組み合わせることで、

• コーディングスピードの向上

• バグや記述ミスの減少

• チーム全体での命名・構造統一

が実現します。
効率化は単なる時短ではなく、品質を保ちながら早く仕上げる技術。
Emmetとスニペットを日常のコーディングフローに組み込むことで、
開発体験そのものが変わります。