Emmet: Balance、ジャンプ、選択 — 編集高速化トリオ + コメント切り替え

第14回〜15回では展開とラップ — Emmetの2つのコア「入力」アクションを学びました。しかし実際の開発では、展開した後も編集する必要があります — 5つの<li>項目のコンテンツ��更、コメント追加、外側タグの削除など。このレッスンではEmmetの「編集トリオ」：Balance / 次の編集ポイント / アイテム選択、さらにコメント切り替えとタグ削除を教えます。これら5つのアクションで展開後も3〜5倍の高速化を継続できます。

1. 学習内容

• Balance / 対応するペアに移動：対応するHTMLタグ（またはCSS括弧）にジャンプ、内向きと外向きの双方向ナビゲーションをサポート
• 次の/前の編集ポイント：Emmet展開後の複数のタブストップ（編集可能ポイント）間をナビゲート
• アイテム選択：現在の要素を段階的に細かい粒度で選択（タグ名 → 完全な属性 → 属性値 → 個別クラス → 要素全体）、要素を越えない
• コメント切り替え：HTMLコメント<!-- -->とCSSコメント/* */を切り替え（コンテキスト認識）
• タグ削除：コンテンツを保持したまま外側タグを除去（名前変更やシェル削除用）

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

(1) 課題：100行のHTMLを展開した後、編集箇所を見つけるのに30秒かかる

アリスはブログ記事ページのHTMLコンテナを書きました：

<article>
  <header>
    <h1>Hello World</h1>
    <time>2026-07-31</time>
  </header>
  <section>
    <p>...</p>
    <p>...</p>
  </section>
  <footer>
    <address>...</address>
  </footer>
</article>

彼女は今3つの一括置換を行う必要があります：

1. <h1>Hello World</h1>を<h1>Hello Emmet</h1>に変更
2. 2つの<p>タグそれぞれにlorem ipsumプレースホルダーテキストを1行追加
3. <footer>にコメントを追加

彼女のワークフロー：

1. <h1>を見つける：Ctrl+F → Hello Worldと入力 → Hello Emmetに置換（5秒）
2. 1つ目の<p>を見つける：Ctrl+F → 置換（5秒）。2つ目の<p>を見つける：もう一度Ctrl+F（5秒）
3. <footer>を見つける：Ctrl+F → コメント追加（5秒）

合計：20秒、9回のCtrl+F操作。アリスは考えました：HTMLは本質的にツリー構造なのに、「構造ベースのナビゲーション」ショートカットがあるべきです。カーソルを<h1>に移動して、1キーで直接</h1>にジャンプし、1キーで外側の<header>にジャンプする... Emmetにはこれらの「ツリー構造ショートカット」があるべきです。

(2) Emmet編集トリオによる解決策

Emmetの5つの編集アクションは「ツリー構造ショートカット」です — HTML/CSSツリー構造をナビゲーションツールに変えます。

アリスの解決策：

1. Balance：カーソルを<h1>内に置き、Ctrl+Alt+Bを押して</h1>終了タグまで選択 → 2秒
2. 次の編集ポイント：ul>li*3を展開した後、Ctrl+Alt+→を押して各<li>のコンテンツ位置にジャンプ → 5秒
3. アイテム選択：<p>にカーソルを置き、Shift+Ctrl+.を押して次の<p>を選択 → 3秒
4. コメント切り替え：<footer>にカーソルを置き、Ctrl+/を押して<!-- -->コメントを追加 → 1秒
5. タグ削除：<h1>にカーソルを置き、Shift+Ctrl+;を押して<h1>を削除するが「Hello World」を保持 → 2秒

合計：13秒、5回のショートカット操作。Ctrl+F置換より35%高速、誤置換ゼロ（Ctrl+Fは複数箇所に誤マッチしやすい）。

(3) メリット

編集トリオは「展開後編集」時間を20秒から13秒に短縮し、さらに重要なのは誤操作を減らすことです — Ctrl+F置換はスキップや過剰置換が起こりやすい。Emmetの構造ナビゲーションはHTMLツリーに沿って移動するため、誤発火しません。これら5つのアクションを習得すれば、アリスの5段落記事ページの合計編集時間が5分から2分に短縮されます。

3. 5つの編集アクションのコア定義

Emmetは5つの「編集高速化」アクションを提供し、展開後の最も一般的な5つの操作をカバーします：タグジャンプ、タブストップナビゲーション、要素選択、コメント切り替え、外側タグ除去。

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

5つのアクションのトリガーキーは4大エディタで大きく異なります。これはこれらが比較的新しいアクションであり、実装の進捗がエディタによって異なるためです。重要な事実：VSCodeにはEmmetの内蔵アクションに対して1つのデフォルトキーバインドしかありません — Tabが省略記法の展開をトリガーします（第14回）。他のすべてのEmmetアクション（Balance / ラップ / アイテム選択 / タグ削除など）にはVSCodeでデフォルトショートカットがなく、コマンドパレットまたはカスタムkeybindings.jsonでトリガーする必要があります。

5. Mermaid図：エディタカーソル移動パス

以下の図は、Emmetがul>li*3を展開した後の編集可能ポイント（タブストップ）間のカーソルナビゲーションパスを示します。

graph TB
    Start([ユーザーがul>li*3と入力<br>Tabを押して展開]) --> Expand[Emmetが4行のHTMLを展開]
    Expand --> S1[タブストップ1:<br>ulの最初のliのコンテンツ位置]
    S1 -->|Ctrl+Alt+→を押す| S2[タブストップ2:<br>ulの2番目のliのコンテンツ位置]
    S2 -->|Ctrl+Alt+→を押す| S3[タブストップ3:<br>ulの3番目のliのコンテンツ位置]
    S3 -->|Ctrl+Alt+→を押す| End([展開終了点:<br>ul終了タグの後])
    S1 -->|Ctrl+Alt+←を押す| Start
    S2 -->|Ctrl+Alt+←を押す| S1
    S3 -->|Ctrl+Alt+←を押す| S2
    End -->|Ctrl+Alt+←を押す| S3

    style Start fill:#3b82f6,color:#fff
    style Expand fill:#8b5cf6,color:#fff
    style S1 fill:#10b981,color:#fff
    style S2 fill:#10b981,color:#fff
    style S3 fill:#10b981,color:#fff
    style End fill:#ef4444,color:#fff

graph TB
    Start([ユーザーがul>li*3と入力<br>Tabを押して展開]) --> Expand[Emmetが4行のHTMLを展開]
    Expand --> S1[タブストップ1:<br>ulの最初のliのコンテンツ位置]
    S1 -->|Ctrl+Alt+→を押す| S2[タブストップ2:<br>ulの2番目のliのコンテンツ位置]
    S2 -->|Ctrl+Alt+→を押す| S3[タブストップ3:<br>ulの3番目のliのコンテンツ位置]
    S3 -->|Ctrl+Alt+→を押す| End([展開終了点:<br>ul終了タグの後])
    S1 -->|Ctrl+Alt+←を押す| Start
    S2 -->|Ctrl+Alt+←を押す| S1
    S3 -->|Ctrl+Alt+←を押す| S2
    End -->|Ctrl+Alt+←を押す| S3

    style Start fill:#3b82f6,color:#fff
    style Expand fill:#8b5cf6,color:#fff
    style S1 fill:#10b981,color:#fff
    style S2 fill:#10b981,color:#fff
    style S3 fill:#10b981,color:#fff
    style End fill:#ef4444,color:#fff

6. ハンズオン例

以下の5つの例で編集トリオ + コメント切り替え + タグ削除のコアシナリオをカバーします。

▶ サンプル: Balance — 対応する<div>タグにジャンプ（難易度：★）

最も一般的な「タグナビゲーション」 — カーソルを<div>内に置き、Balanceを押してコンテンツを選択、もう一度押してタグ全体を選択。

元のコード：

<div class="container">
  <p>Hello World</p>
</div>

手順：

1. <p>Hello World</p>のコンテンツ領域のどこかにカーソルを置く
2. Ctrl+Alt+Bを1回押す → Hello World（コンテンツ）を選択
3. もう一度Ctrl+Alt+Bを押す → <p>Hello World</p>（pタグ全体）を選択
4. もう一度Ctrl+Alt+Bを押す → <div>全体とそのすべてのコンテンツを選択
5. Ctrl+Alt+Bを押し続ける → 選択がレベルごとに外向きに拡大（外向きバランス）

もう一度（Shift+Ctrl+Alt+B）押す → 選択が内向きに縮小（内向きバランス）

出力：

TEXT 📖 参照専用

📋 Copy

分解：Balanceの「双方向バランス」はEmmet独自の機能です — ほとんどのエディタは「外向き拡大」のみをサポートしますが、Emmetは内向き縮小もサポートします。この「調整可能な選択サイズ」設計により、BalanceはHTML編集の多用途ツールになります：1単語選択、1タグ選択、1コンテナ選択、1セクション選択 — Balanceを押すごとにレベルごとに調整。**重要な詳細**：EmmetのBalanceは「カーソル移動」ではなく「選択変更」です。カーソルはそのままですが、選択範囲が拡大または縮小します。「選択」せずに「ジャンプ」したいだけの場合は、対応��るペアに移動を使用してください。

▶ サンプル: 次の編集ポイント — 展開後のタブストップジャンプ（難易度：★★）

ul>li*3を展開した後、Ctrl+Alt+→を押して各liのコンテンツ位置にジャンプします。

元のコード：

ul>li*3

手順：

1. Tabを押して展開をトリガー → 4行のHTMLが表示される
2. カーソルはタブストップ1（最初のliの内部）にある
3. Ctrl+Alt+→を押す → タブストップ2（2番目のliの内部）にジャンプ
4. Ctrl+Alt+→を押す → タブストップ3（3番目のliの内部）にジャンプ
5. Ctrl+Alt+→を押す → 終了点（</ul>の後）にジャンプ

展開されたHTML：

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

出力：

TEXT 📖 参照専用

📋 Copy

分解：第14回の省略記法の展開で「展開にはタブストップが含まれる」と説明しましたが、それらをナビゲートする方法は説明しませんでした。次の編集ポイントは「次のタブストップにジャンプする」ための専用アクションです。`Ctrl+Alt+→`は前方、`Ctrl+Alt+←`は後方です。**なぜTabキーを使わないのか？** 展開完了後、VSCodeはTabを「インデント」として扱うためです（カーソルは既にliのコンテンツ内の「編集可能位置」にあるため）、Emmetナビゲーションを再度トリガーしません。「タブストップ間のジャンプ」には`Ctrl+Alt+→`を使用します。これが「入力トリガー」（Tab）と「編集ナビゲーション」（Ctrl+Alt+→）を分離するEmmetの重要な設計判断です。

▶ サンプル: アイテム選択 — 段階的粒度選択（難易度：★★）

HTMLにクラス付きの<p>が含まれています。カーソルはテキスト上にあります。アイテム選択を押して選択を段階的に拡大します — 現在の要素内のみで、隣接する要素にジャンプしません。

元のコード：

<p class="fruit">Apple</p>

手順：

1. <p class="fruit">Apple</p>内のAppleテキストにカーソルを置く
2. Shift+Ctrl+.を1回押す → Apple（テキストノード）を選択
3. もう一度押す → fruit（個別クラス名）を選択
4. もう一度押す → class="fruit"（属性値）を選択
5. もう一度押す → class="fruit"（完全な属性）を選択
6. もう一度押す → <p class="fruit">Apple</p>全��（要素全体）を選択

出力：

TEXT 📖 参照専用

📋 Copy

分解：アイテム選択の「拡大選択」は**現在の要素内のみ**で段階的に深く動作します — テキストから → 個別クラス → 属性値 → 完全な属性 → 要素全体（公式ドキュメント：「現在の選択をその親アイテムに拡大」）。**要素を越えません** — `<p>Apple</p>`から次の`<p>Banana</p>`にジャンプしてバッチ選択するには、VSCodeの`Ctrl+F2`（すべての出現箇所を変更）またはマルチカーソル（`Ctrl+D`で次、`Ctrl+Shift+L`で同じ名前のすべて）を使用してください — それらはIDEのネイティブ機能であり、Emmetではありません。**`Shift+Ctrl+.`は前方（外向き拡大）**、`Shift+Ctrl+,`は後方（内向き縮小）です。CSSでも同様の動作：セレクタ → プロパティ → 値。「単一のCSSプロパティ行を素早く選択する」シナリオに役立ちます。この「段階的粒度拡大」はJetBrains IDEの選択拡張（W/Aスタイル）を模倣しています。

▶ サンプル: コメント切り替え — コメントのオン/オフ切り替え（難易度：★）

HTMLの<footer>タグにカーソルを置き、Ctrl+/を押して<!-- -->コメントを追加��ます。

元のコード（コメントなし）：

<footer>
  <address>contact@example.com</address>
</footer>

手順：

1. <footer>タグのどこかにカーソルを置く
2. Ctrl+/を押す → <footer>タグ全体が<!-- -->でラップされる

展開結果：

<!-- <footer>
  <address>contact@example.com</address>
</footer> -->

もう一度Ctrl+/を押す → コメント削除（元のHTMLに復元）

出力：

TEXT 📖 参照専用

📋 Copy

分解：コメント切り替えの「コンテキスト認識」がEmmetと通常のエディタコメントを区別します。通常の`Ctrl+/`は現在行のみをコメント化します。Emmetのコメント切り替えは**現在のコンテキストを認識**します — HTMLではタグ全体をコメント化し（HTMLコメントは行をまたげるため）、CSSでは現在のルールまたはプロパティをコメント化します。この「コンテキスト認識」によりコメント切り替えはIDEの内蔵コメント機能より有用です — キーストロークが少なくなります。**注意**：コメント切り替えはCSSでも同様にコンテキスト認識です — カーソルが完全な`padding: 10px;`行にある場合、`Ctrl+/`は`padding: 10px;`全体をコメント化します。カーソルが単語`padding`にある場合、`Ctrl+/`も`padding: 10px;`をコメント化します（プロパティ全体）。同様にHTMLでも — `<p>`内のどこにカーソルがあっても`<p>...</p>`全体をコメント化します。

▶ サンプル: タグ削除 — 外側タグを除去し、コンテンツを保持（難易度：★★）

<h1>にカーソルを置き、Shift+Ctrl+;を押して<h1></h1>を削除するがテキストコンテンツを保持します。

元のコード：

<h1>Hello World</h1>

手順：

1. <h1>タグにカーソルを置く
2. Shift+Ctrl+;を押す → <h1>と</h1>を削除し、「Hello World」を保持

展開結果：

Hello World

複合シナリオ：ネストされた外側タグの除去

元のコード：

<section class="hero">
  <h1>Welcome</h1>
</section>

手順：

1. <section>タグにカーソルを置く
2. Shift+Ctrl+;を押す → <section>と</section>を削除し、<h1>Welcome</h1>を保持

展開結果：

<h1>Welcome</h1>

出力：

TEXT 📖 参照専用

📋 Copy

分解：タグ削除の「シェル除去、コンテンツ保持」はEmmetの編集アクションの中で最も簡潔です — 1キー押下で外側タグを除去。一般的なシナリオ：① デザイン修正 — 元の`<header>`コンテナが不要になったが、内部の`<h1>`テキストは保持する必要がある。② 一時的デバッグ — 外側を除去してスタイル��検査。③ リファクタリング — DOMネスト深度を削減。注意：タグ削除は一度に複数レイヤーを除去しません — 3階層のネスト（div > section > h1）を除去するには、`Shift+Ctrl+;`を3回連続で押します。`Shift+Ctrl+;`のセミコロンキー（`;`）は多くのエディタで「マクロコマンド」キーであり、Emmetの内部`removeTag`コマンドに対応します。

7. 5つのアクション選択の決定木

実際の開発では、5つのアクションを組み合わせて使用する必要があることがよくあります。以下が決定木です：

❓ よくある質問

📖 まとめ

• 編集トリオ：Balance（選択変更） / 次の編集ポイント（タブストップジャンプ） / アイテム選択（同じ名前の要素選択）
• コメント切り替え：HTMLタグ全体、CSSプロパティ行全体をコメント化（コンテキスト認識）
• タグ削除：外側タグを除去するがコンテンツを保持（シェル除去）、1押下で1レイヤー除去
• 対応するペアに移動：ジャンプ（選択なし）。Balance：選択（選択変更）
• トリガーキー：VSCode Ctrl+Alt+B / Ctrl+Alt+→ / Shift+Ctrl+. / Ctrl+/ / Shift+Ctrl+;
• 次の編集ポイント ≠ Tabキー：Tabはインデント/補完受け入れ。Ctrl+Alt+→はタブストップジャンプ

📝 練習問題

1. 基本（難易度：★）：HTMLファイルで、ネスト構造（<div><section><p>...</p></section></div>）を書き、カーソルを<p>に置き、Balanceを5回押してください。各選択範囲を記録してください（「コンテンツ」→「pタグ」→「sectionコンテンツ」��「sectionタグ」→「divタグ」）。選択の変化をスクリーンショットしてください。

2. 中級（難易度：★★）：HTMLファイルで、3つの<p>要素（<p>One</p>、<p>Two</p>、<p>Three</p>）を書いてください。最初の<p>のタグ名にカーソルを置き、アイテム選択を6回押してください（Shift+Ctrl+.）。各回で選択された具体的な内容を記録してください（タグ名 / 完全な内容 / 次のタグ名 / 次の完全な内容）。最後にコメント切り替えを使用して3つの<p>要素すべてをグループとしてコメントアウトしてください。

3. 応用（難易度：★★★）：完全なHTMLランディングページコンテナ（article > header + section + footer、3階層ネスト）を書いてください。5つのアクションを組み合わせて最適化してください：(a) article>header>h1+section.content>p*3+footer.addressを展開、(b) 次の編集ポイントで各<p>にジャンプして内容を入力、(c) Balanceでarticleタグ全体を選択してコピー、(d) コメント切り替えでfooterをコメントアウト、(e) タグ削除でarticleを一時的に除去して��タイルを検査（Ctrl+Zで元に戻す）。5つのアクションすべてのトリガーシーケンスと最終状態を記録し、「編集トリオ ワークフロー」vs.「Ctrl+F置換」効率比較レポートを書いてください。

Web-Tutorial 技術チーム

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

私たちについて