emmetを使って、コードの編集を強力にサポートする

アクションの種類

Emmetは、主に16のアクションがあります。既存のタグを編集、削除を素早く行うアクションも用意されており、お使いのエディタをより便利にしてくれます。
これまでの連載で紹介したものもありますが、おさらいも含めて説明します。

下の表がアクションの一覧です。エディタによって利用できないものがありますが、オフィシャルでサポートされているエディタであれば、ほぼ利用できます。
なお、ショートカットキーはOSやエディタによって異なるので、割愛します。

アクション名	アクションの説明
1. Expand Abbreviation	省略記法の展開
2. Wrap with Abbreviation	展開したコードの包括
3. Toggle Comment	コメントの表示・非表示
4. Remove Tag	タグの削除
5. Update Tag	タグの編集
6. Balance	タグの領域を選択
7. Select Item	タグや属性の選択
8. Go to Matching Pair	開始タグと終了タグの間を移動
9. Go to Edit Point	編集点への移動
10. Merge Lines	選択範囲内の文字列を1行に変換
11. Update Image Size	画像パスから、widthとheightを取得
12. Evaluate Math Expression	四則演算
13. Increment/Decrement Number	数値の増減
14. Reflect CSS Value	CSSの値の反映
15. Encode/Decode Image to data:URL	画像をdataURLに変換
16. Split/Join Tag	タグを空タグに変換。また逆も可能

1. Expand Abbreviation | 省略記法の展開

HTMLやCSSの省略記法を展開するアクションです。
多くのエディタでは、[tab]キーで実行されます。

HTMLの場合

1 2 3 4 5 6 7 8

<!-- 展開前 --> #main>h1{Headling}+p>lorem   <!-- 展開後 --> <div id="main">   <h1>Headling</h1>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptates vero, nulla, maxime enim et ratione voluptatem adipisci quis aut. Sit debitis, facere iure, ut saepe pariatur ea aperiam natus.</p> </div>

CSSの場合

1 2 3 4 5 6 7 8 9 10 11 12

/* 展開前 */ .foo {   d-ib+bdb++m10-0+c#3 }   /* 展開後 */ .foo {   display: inline-block;   border-bottom: 1px solid #000;   margin: 10px 0;   color: #333; }

2. Wrap with Abbreviation | 展開したコードの包括

タグで囲みたい箇所を選択し、「Wrap with Abbreviation」を実行すると、入力ボックスが表示されます。入力ボックスに省略記法を記述すると、選択した箇所がタグで囲まれます。
Bracketsでは、Ctrl（Cmd）+Shift+Aで実行します。
省略記法の「*」を利用することで、改行ごとにタグで囲むことも可能です。

上の画像では、テキストを選択した後に「Wrap with Abbreviation」を実行し、タグを追加しています。「*」を利用することで、一瞬でリストを作成しています。

3. Toggle Comment | コメントの切り替え

キャレットがある位置の行をコメントにできます。
コメント上にキャレットがある場合は、通常のテキストに戻します。
Bracketsでは、Ctrl（Cmd）+/で実行します。

「Toggle Comment」を実行すると、コメントにしたい行やコメントを解除したい行を簡単に切り替えることができます。

4. Remove Tag | タグの削除

タグの削除を行うアクションです。
削除したいタグにキャレットを移動させ、このアクションを実行すると、インデントの位置なども調整してタグを削除してくれます。
Bracketsでは、Ctrl（Cmd）+Shift+Kで実行します。

上の画像では、キャレットの位置にあるタグを削除しています。単にタグを削除するだけはなく、インデントも調整して削除されています。

5. Update Tag | タグの更新

Emmet v1.1から追加されたアクションです。
アクションを実行すると、タグの変更から属性の追加まで行えます。便利なアクションのひとつです。
Bracketsでは、Ctrl（Cmd）+Shift+Iで実行します。

上の画像では、属性が指定されていないタグにIDやclassの追加をしています。またタグをh2からh1要素に修正しています。

6. Balance | 領域を選択

HTMLやCSSの選択を行います。HTMLは、タグごとに選択範囲の拡大と縮小が行えます。
CSSは、宣言から規則セットまで選択範囲の切り替えが行えます。

上の画像では、キャレットの位置から選択範囲をタグをもとに拡大しています。一定以上選択範囲を拡大したら、今度は選択範囲を縮小しています。

7. Select Item | タグや属性の選択

タグや属性を選択しながら、キャレットを移動させるアクションです。属性の書き換えや削除が行いやすくなります。

上の画像では、「Select Item」アクションを利用して、タグ名や属性を素早く移動しています。

8. Go to Matching Pair | 開始タグと終了タグの間を移動

開始タグか終了タグへキャレットを移動します。入れ子になっているHTMLで任意の終了タグを探したい時に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Tで実行します。

上の画像では、HTMLの開始タグと終了タグへ、移動しています。

9. Go to Edit Point | 編集点への移動

要素や属性が空のポイントにキャレットを移動します。
Bracketsでは、Ctrl（Cmd）+Alt+←かCtrl（Cmd）+Alt+→で実行します。

中身が空の要素や属性に移動し、内容が入るとそのポイントに移動しなくなります。

10. Merge Lines | 選択範囲内の文字列を1行に変換

HTMLやCSSの選択した範囲を1行にします。 Bracketsでは、Ctrl（Cmd）+Shift+Mで実行します。

上の画像のように、選択範囲が1行に変換されます。

12. Evaluate Math Expression | 四則演算

エディタ上で計算ができるようになります。簡単な計算しかできませんが、数字と「+」「-」「*」「/」の記号を組み合わせて、計算を行えます。
地味なアクションですが、CSSの値などの計算に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Yで実行します。

HTMLやCSSなどのファイルでも、同じように動作します。

13. Increment/Decrement Number | 数値の増減

キーボードで数字を入力せずに、1桁や10桁などの数値を増減できます。
ショートカットは6つあり、1桁の数値を増減させたい場合、BracketsではCtrl（Cmd）+Shift+↑または↓で実行します。他の桁数を変更するショートカットは、Emmetのメニューから確認しましょう。

上の画像では、1, 10, 0.1の位をそれぞれ実行しています。

14. Reflect CSS Value | CSSの値の反映

ベンダープリフィクスのついたプロパティに値を反映させます。ベンダープリフィクスの対応は、autoprefixerを利用する方が便利なので、使う場面が減ってきていますが、覚えておくとおくと便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Alt+Rで実行します。

キャレットの置かれた行の値を、同じプロパティに反映します。

16. Split/Join Tag | タグを空タグに変換。また逆も可能

HTMLでは使うことがありませんが、XMLを作成する時に便利なアクションです。タグを空タグに変換し、空タグを開始タグと終了タグに分けることも可能です。
Bracketsでは、Ctrl（Cmd）+Shift+Jで実行します。

開始タグと終了タグから空タグへ簡単に切り替えられます。

11 & 15. 画像操作系アクション

Emmetは画像の幅と高さの取得や、画像をdataURLに変換する機能があります。

• Update Image Size | 画像パスから、widthとheightを取得
• Encode/Decode Image to data:URL | 画像をdataURLに変換

ただし公式のEmmetプラグインでもこの機能がサポートできないエディタがあり、BracketsやDreamweaverも画像操作系アクションには対応していません。

とはいえ、画像の幅と高さの取得は、Dreamweaverのデフォルトの機能で用意されていますし、Bracketsも「Extract for Brackets」を利用すればPSDファイルから直接スライス、画像サイズを取得して、HTMLやCSSに素早く画像を埋め込むことができます。

Emmetではなく、Extractを使用した例。エディタ上でPSDを開き、画像を生成からHTMLやCSSの反映まで一括で行えます。

画像操作関連の作業は、Emmetだけでコーディングするよりも、Extractの使用をお勧めします。Extractは、BracketsとDreamweaverどちらからも利用できます。

---