Emmet: 省略記法の展開 — コードに命を吹き込むTabキー

最初の13回を通じてul>li*3のような省略記法の書き方を学びましたが、すべてはエディタの中で待機しているだけで、実際にはまだ何も「展開」されていません。このレッスンではEmmetの最初のコアアクション：省略記法の展開を教えます — 省略記法を実際のHTML/CSSに変えるキーアクションです。Tabキーはこのアクションの魂です。習得すれば、あなたの1行の省略記法が瞬時に完全なコードに変わります。

1. 学習内容

• 省略記法の展開のコア定義：CSSライクな省略記法を完全なHTML/XML/CSSコードに変換する
• トリガー方法：Tabキー（デフォルト）+ Ctrl+Eおよびその他のフォールバックトリガー
• 4大エディタでのトリガーキー比較（VSCode/WebStorm/Sublime/Atom）
• 動作しない場合：4つの一般的なシナリオ（プレーンテキストファイル、コメント内、JSXなど）
• カスタムキーバインド：VSCodeのkeybindings.jsonで任意のショートカットにリマップ

2. あるフロントエンド開発者の実話

(1) 課題：省略記法を入力し、Tabを押しても…何も起きない

アリスはEmmetの構文を学び終えたばかりです。興奮してVSCodeで新しいtest.htmlを作成し、div.container>h1{Hello}と入力して、Tabを押して展開されるのを見ようとします。Tabを押す — インデントされます。もう一度Tabを押す — またインデントされます。5回のTab押下後も何も起きません。省略記法の書き方を間違えたのかと思い、ul>li*3、a[href="#"]を試します — どれも動作しません。

彼女はVSCodeでEmmetが有効になっていないと思い、GitHubのissueを検索し始めます。するとTabキー展開の条件が予想よりも複雑であることがわかりました。3つの一般的な原因：

1. ファイルが.html拡張子で保存されていない（VSCodeは拡張子のないファイルをHTMLとして認識しない）
2. Tabを横取りするプラグインがインストールされている（例：古いVETURバージョン、TabNine AI補完）
3. カーソルの後ろに文字がある（Tabはインデントを優先する）

アリスは最終的にコマンドパレット（Ctrl+Shift+P）を開き、手動でEmmet: 省略記法の展開を実行し、4行のHTMLが表示されるのを見ます。彼女は考えました：省略記法の展開は明らかに最も頻繁に使用するアクションなのに、なぜTabが失敗するのか、どうトラブルシューティングするのかを知らなかった — これはどのEmmetチュートリアルもスキップできない最初のアクションです。

(2) 省略記法の展開による解決策

省略記法の展開はEmmetツールキットのコアアクションです — CSSライクな省略記法（ul>li*3）を完全なHTML/XML/CSSコードに変換します。これは他のすべてのEmmetアクション（Wrap、Balanceなど）が依存する基盤です。

アリスの解決策は3ステップで構成されます：

1. ファイルタイプを確認：.html / .css拡張子で保存する
2. 競合プラグインをチェック：TabNine、レガシーVETURなどTabを横取りするプラグインを無効にする
3. フォールバックを知る：各エディタにはコマンドパレットフォールバックがある（例：VSCodeのEmmet: 省略記法の展開）

トリガーキーと失敗トラブルシューティングを習得した後、アリスはul.nav>li*3>a{リンク $}と入力し、Tabを押すと、3行の完全なHTMLが1秒で表示されます。彼女は今やナビゲーションメニューを手打ちで30秒かかっていたのを1行の省略記法で書けるようになりました — 30倍の速度向上。

(3) メリット

省略記法の展開はEmmetチュートリアルで最も重要な「分水嶺」です — 最初の13回はすべて「入力」についてでしたが、このレッスンからは「展開 + 編集」に移行します。習得すれば：1行の省略記法が5〜50行のコードを折りたたみ、HTMLスケルトン構築が5分から10秒に短縮されます。このレッスンだけで、アリスは5段落の記事ページのHTMLコンテナ（article>header>h1+meta+time+nav）を90秒ではなく8秒で書きます。

3. 省略記法の展開のコア定義

省略記法の展開はEmmetツールキットで最も頻繁に使用されるアクションです — CSSライクな省略記法（ul>li*3）を現在のドキュメント構文（HTML/CSS/XML）に基づいて完全なコードに展開します。

4. 4つのトリガー方法

省略記法の展開には、エディタやシナリオに応じて4つのトリガー方法があります。

(1) Tabキー（デフォルト、最も一般的）

VSCode、WebStorm、AtomなどはデフォルトでTabキーを省略記法の展開にマッピングしています。前提条件：

(2) Ctrl+E（代替、Sublimeデフォルト）

Sublime TextはデフォルトでTabをインデントに使用するため、省略記法の展開はCtrl+Eでトリガーされます。VSCodeユーザーもTabをCtrl+Eにリマップできます（セクション(4)参照）。

(3) コマンドパレット（フォールバック）

各エディタにはコマンドパレットエントリポイントがあります。VSCodeではCtrl+Shift+P → 「Emmet: 省略記法の展開」と入力します。これは最も信頼性の高いトリガー方法です — Tabの競合、ファイルタイプ問題、プラグイン干渉の影響を受けません。

(4) カスタムショートカット（keybindings.json）

VSCodeのkeybindings.jsonを使用して省略記法の展開を任意のショートカットにマッピングできます：

[
  {
    "key": "ctrl+e",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

5. 4エディタでのトリガーキー比較

Emmetのコアの強みはエディタ非依存であることです — 同じ省略記法ul>li*3がVSCode、WebStorm、Sublimeで同一に展開されます。唯一の違いはトリガーキーと設定方法にあります。

6. 動作しない場合：4つの一般的な失敗シナリオ

最も一般的な初心者の落とし穴 — Tabを押しても何も起きません。最も頻繁な4つの失敗シナリオ：

(1) 未認識ファイル

VSCodeはファイル拡張子で言語を判別します。拡張子のないファイル（例：test）はHTMLとして認識されず、Emmetは動作しません。修正：test.htmlとして保存するか、右下隅から手動で言語を選択します。

(2) 間違ったカーソル位置

省略記法の途中にカーソルがある状態でTabを押すと、Emmetはそれを展開ではなく「2文字間へのTab挿入」（インデント）として扱います。修正：まずEndを押して行末にジャンプし、それからTabを押します。

(3) コメント内

<!-- div.container -->

カーソルがコメント内にある状態でTabを押しても、コメント化されたテキス��は展開されません。修正：省略記法をコメントの外に移動するか、コマンドパレットをフォールバックとして使用します。

(4) Tab横取り

AI補完プラグイン（TabNine、Codeium、GitHub Copilotなど）はTabを優先的に処理し（「補完提案の受け入れ」のため）、EmmetのTab横取りが失敗します。修正：これらのフ�ァグインを無効にするか、コマンドパレットをフォールバックとして使用します。

7. ハンズオン例

以下の4つの例で省略記法の展開のコアシナリオをカバーします。

▶ サンプル: 基本的な展開 div.container（難易度：★）

最も一般的な展開 — HTMLファイルでdiv.containerと入力し、Tabを押すと1行がクラス付きのdivになります。

省略記法：

div.container

展開結果：

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

出力：

TEXT 📖 参照専用

📋 Copy

分解：`div.container`では、`div`はタグ名、`.container`はクラス省略記法です。Emmetは`.`をクラス属性として解析し、`<div class="container"></div>`を出力します。展開されたタグは**空**（コンテンツなし）で、カーソルは`<div>`の内側の`</div>`の前に配置されます（これは第16回でカバーする「次の編集ポイント」機能です）。これはEmmetの最もシンプルで最も高頻度な展開シナリオです。

▶ サンプル: HTMLリスト構造 ul>li*3（難易度：★）

HTMLファイルで乗算付きネスト構造を展開 — 1行で3項目のリストを生成します。

省略記法：

ul>li*3

展開結果：

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

出力：

TEXT 📖 参照専用

📋 Copy

分解：`ul>li*3`は3つの部分で構成されます：① `ul`は親タグ、② `>`は子ネスト、③ `li*3`は子タグ`li`を3回繰り返し。Emmetは1つの`ul`が3つの`li`要素を含む構造に展開します��子タグの**2スペースインデント**（Emmetのデフォルトインデント）��注意してください。これはEmmetの「コンテキスト認識」機能です — HTMLの`<ul>`内ではデフォルトコンテキストが`<li>`であるため、タグ名を省略することもできます（`ul>*3`も`ul>li*3`に展開されます）。暗黙的タグ名につい��は第3回で詳しく説明しました。

▶ サンプル: CSS省略記法 m10-20（難易度：★）

CSSファイルでTabを押す — 1行でマージン省略記法を書きます。

省略記法：

m10-20

展開結果：

margin: 10px 20px;

出力：

TEXT 📖 参照専用

📋 Copy

分解：`m10-20`はCSS省略記法です — `m`は`margin`の正確な省略記法（Emmetの辞書で定義）、`10-20`は2つの値（px単位を自動付加）。Emmetは`margin: 10px 20px;`（上下10px、左右20px）を推論します。これは省略記法の展開におけるCSS省略記法の典型的な応用です — 同じアクションがHTML省略記法とCSS省略記法の両方を展開します。Emmetは**現在のファイルタイプ**に基づいてコンテキストがHTMLかCSSかを判断します。これは第11回〜13回で学んだCSS省略記法と一致します。

▶ サンプル: カスタムキーバインド Tab → Ctrl+E（難易度：★★）

VSCodeのkeybindings.jsonで省略記法の展開をCtrl+Eにリマップします — Tabキーが他のプラグインと競合するユーザーに最適です。

変更ファイル：keybindings.json（VSCodeコマンドパレット → Preferences: キーボードショートカットを開く(JSON)）

[
  {
    "key": "ctrl+e",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

変更後の動作：

出力：

TEXT 📖 参照専用

📋 Copy

分解：この例は標準的なkeybindings.jsonの使用方法を示します。`key`はショートカット文字列（Tabは`"tab"`と表記）、`command`はVSCodeのコマンドID（`editor.emmet.action.expandAbbreviation`はEmmetの内部展開コマンド）、`when`はトリガー条件（カーソルがエディタテキスト領域 + ファイル書き込み可能）。変更後、Tabはデフォルトのインデント動作を復元し、Emmet展開はCtrl+Eに委譲されます。この「Tabバインド解除」パターンはTabがTabNine/CopilotなどのAI補完プラグインと競合するシナリオに適しています。注意：カスタムショートカットはデフォルトのTabトリガーを**上書きしません** — VSCodeのEmmetは「カーソルが行末 + Tab」を優先します。Tabトリガーを完全に無効にするには、`emmet.triggerExpansionOnTab`をfalseに設定します。

8. 完全な例：ランディングページのヒーローセクションを1行で書く

すべての省略記法の展開メカニズムを実際の「ランディングページヒーローセクション」に適用します — 1行の省略記法が完全なHTMLブロックに展開されます。

▶ サンプル: ヒーローセクションHTMLコンテナ（難易度：★★）

省略記法：

section.hero>div.container>(h1{Hello World})+p.lead{This is a landing page.}+a.btn.btn-primary[href="#cta"]{Get Started}

展開結果：

<section class="hero">
  <div class="container">
    <h1>Hello World</h1>
    <p class="lead">This is a landing page.</p>
    <a href="#cta" class="btn btn-primary">Get Started</a>
  </div>
</section>

出力：

TEXT 📖 参照専用

📋 Copy

分解：この例は省略記法の展開の実際のフルアプリケーションです。`section.hero>div.container>(h1{Hello World})+p.lead{...}+a.btn.btn-primary[href="#cta"]{...}`は5つのEmmetメカニズムを1行で組み合わせています：① `section.hero` — タグ + クラス、② `>` — 子ネスト、③ `()` — グループ化（3つの兄弟ノードのスコープを分離）、④ `+` — 兄弟ノード、⑤ `{text}`テキストコンテンツ + `[attr=val]`カスタム属性 + 複数クラス（`.btn.btn-primary`）。展開結果は完全なSaaSランディングペ��ジヒーローセクションです — 4つのセマンティックHTMLタグ、3つのクラス名、1つのCTAリンク。構造全体が1行約80文字から7行のHTMLになります（Emmetのデフォルト2スペースインデント）。このHTMLを手打ちすると60〜90秒かかります（クラススペル、属性順序、インデント調整を含む）。Emmetでは1行の省略記法 + 1回のTab押下 = 2秒。**速度向上30〜45倍**。これが「構文」と「エディタ」の両方のレイヤーにわたる省略記法の展開の効率の究極の形です。

❓ よくある質問

📖 まとめ

• 省略記法の展開はEmmetで最も使用されるアクション — CSSライクな省略記法を完全なHTML/XML/CSSコードに変換
• デフォルトトリガーキーはTab。ただしVSCode/WebStormはTabを使用、SublimeはCtrl+E、BracketsはCtrl+Alt+Space
• コマンドパレットがフォールバッ��：VSCode Ctrl+Shift+P → Emmet: 省略記法の展開
• 4つの一般的な失敗シナリオ：未認識ファイル、カーソルが末尾でない、コメント内、プラグインによるTab横取り
• カスタムショートカット：VSCodeのkeybindings.jsonに"command": "editor.emmet.action.expandAbbreviation"と記述
• コード補完（IntelliSense）との違い：Emmetは行全体を書き換える。補完はスニペットを挿入するだけ

🌐 自分で試す： VSCode Emmetドキュメントで完全なショートカットリストと設定を確認してください。

📝 練習問題

1. 基本（難易度：★）：現在のエディタで、新しいtest.htmlファイルを作成してください。div.container>h1{Hello}+p.lead{This is Emmet}と入力し、Tabを押してください。展開結果を記録してください。Tabが反応しない場合は、上記の4つの失敗シナリオを使ってトラブルシューティングし、コマンドパレットにフォールバックしてください。最終的な展開のスクリーンショットを撮ってください。

2. 中級（難易度：★★）：VSCodeでkeybindings.jsonを開いてください（コマンドパレット → Preferences: キーボードショートカットを開く(JSON)）。省略記法の展開をCtrl+Eにリマップするルールを追加してください。動作変更を確認してください：Tabを押すとインデントされ、Ctrl+Eで展開されるはずです。エディタがSublime Textの場合は、SublimeのCtrl+EトリガーとVSCodeのCtrl+Eトリガーの違いをそれぞれのkeybindings.json形式で文書化してください。

3. 応用（難易度：★★★）：5要素の完全なHTMLランディングページヒーローセクション（タイトル + サブタイトル + 説明 + プライマリボタン + セカンダリボタン）を1つのEmmet省略記法で書いてください。5つのメカニズムすべてが正しく動作することを確認してください：>子ネスト、+兄弟ノード、{}テキストコンテンツ、[attr=val]カスタム属性、複数クラス（.btn.btn-primary）。展開されたHTML行数と省略記法の文字数を記録してください。同じHTML構造を手打ちした場合の時間と比較し、「省略記法の展開 速度利点」レポートを書いてください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて