Emmetが非常に便利
【参考サイト】
Emmet Cheat-Sheet
Cheat Sheet
【概要】
会社の先輩から「Emmet良いよ」と言われて、
3ヶ月くらい使ってみて思ったことをつらつらと書きます。
EmmetとZenCodingの後継にあたるものです。
と言いつつも自分もよく知らないです。
HTML/CSSのコードをサポートしてくれるツールです。
私はCSSではほとんど使っていないので、HTMLの使い方だけについて書きます。
【インストール】
今回はNetBeanspのEmmetプラグインをインストールします。
Eclipse、Intellij idea、Emacs、Vim、サクラエディタ（！）にもプラグインがあります。
NetBeansの場合はこちらからnbmファイルをダウンロードして、NetBeansにプラグインを追加します。
V7.4用となっていますが、8.0.2でも使えるようです。
キーバインドをCtrl+Eに変えます。
（変えなくてもよいですが使いづらいのでEclipseのデフォルトにあわせてCtrl+Eにします。）
[ツール]->[オプション]->[キーマップ]から[Expanted Abbreviations]で検索します。
キーバインドを変更します。
【どういうものか】
とりあえず、下のコードをコピーして、末尾で「Ctrl + E」を押してみましょう。
table>(col[width=*]+col[width=200]*2)+(thead>tr>th{ヘッダー$}*3)+(tbody>(tr>td{データ$}*3)*3)そうすると下のようなHTMLコードが生成されます。
<table> <col width="*"> <col width="200"> <col width="200"> <thead> <tr> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </tbody> </table>
ワンライナーで書いた内容がきれいなHTMLとして出力されます。
慣れてくるとこのようなHTMLが一行で書けるようになります。
構文は公式のチートシートを見れば書いてあるのですが、
色々書いてあってどれから手をつければいいかはわからないと思います。
個人的にこれだけ覚えるだけで効率が上がると思ったものを取り上げていきます。
【まずは単一のタグ】
最初の第一歩として単一のタグの書き方です。
id属性は#をつけて、class属性は.をつけるとEmmetが設定してくれます。
要素のテキストは{}で、その他の属性は[]でくくります。
p -> <p></p> a -> <a href=""></a> p.message -> <p class="message"></p> div#error-message -> <div id="error-message"></div> div#error-message.fuga.hoge -> <div id="error-message" class="fuga hoge"></div> p{メッセージ} -> <p>メッセージ</p> td[colspan=2 rowspan=2] -> <td colspan="2" rowspan="2"></td>
特定のタグでは必須となりうる属性についてはEmmetが勝手に付与してくれます。
【>:子要素】
つづいて子要素を作成します。
子要素は「>」をつけます。CSSと同じですね。
ul>li
<ul> <li></li> </ul>
子要素は複数の階層指定できます。
table>tbody>tr>th
<table> <tbody> <tr> <th></th> </tr> </tbody> </table>
【+:兄弟要素】
兄弟要素は「+」をつけます。これはCSSの隣接セレクタと同じです。
dl>dt+dd
<dl> <dt></dt> <dd></dd> </dl>
これも子要素と同じく複数指定することができます。
tr>td.hoge+td.fuga+td.bar+td.hoge
<tr> <td class="hoge"></td> <td class="fuga"></td> <td class="bar"></td> <td class="hoge"></td> </tr>
【():グルーピング】
今までに説明した内容を使うだけでも効率が上がると思います。
続いて、さらに効率化させるためにグルーピングを使います。
簡単なテーブルを作りたい場合を例にします。
グルーピングを使わない場合は下記のような順番でコードを書くことになると思います。
- 「table」でtableタグの大枠を作る
- 「col」をカラム数分だけ作る
- 「thead」以下を作る
- 「tbody」以下を作る
グルーピングを使うと一発で書けるようになります。
table>(col+col)+(thead>tr>th+th)+(tbody>tr>+td+td)
<table> <col> <col> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table>
グルーピングはネストすることができます。
div+(table>(col+col)+(thead>tr>th+th)+(tbody>tr>+td+td))
<div></div> <table> <col> <col> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table>
【*:繰り返し】
プログラマとしては同じものを書きたくないですね。
そういう場合は「*」を使うと繰り返して生成してくれます。
ul>li*3
<ul> <li></li> <li></li> <li></li> </ul>
$を使うとテキストに繰り返し回数が埋め込まれます。
ul>li{リスト$}*3
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
【応用編】
今まで説明したことを使ってちょっと複雑なものを作ってみます。
[3×3のテーブルを作る]
table>tbody>(tr>td{セル$}*3)*3
<table> <tbody> <tr> <td>セル1</td> <td>セル2</td> <td>セル3</td> </tr> <tr> <td>セル1</td> <td>セル2</td> <td>セル3</td> </tr> <tr> <td>セル1</td> <td>セル2</td> <td>セル3</td> </tr> </tbody> </table>
[odd/evenで使用するクラスを変える]
table>tbody>((tr.odd>td{odd-セル$}*3)+(tr.even>td{even-セル$}*3))*2
<table> <tbody> <tr class="odd"> <td>odd-セル1</td> <td>odd-セル2</td> <td>odd-セル3</td> </tr> <tr class="even"> <td>even-セル1</td> <td>even-セル2</td> <td>even-セル3</td> </tr> <tr class="odd"> <td>odd-セル1</td> <td>odd-セル2</td> <td>odd-セル3</td> </tr> <tr class="even"> <td>even-セル1</td> <td>even-セル2</td> <td>even-セル3</td> </tr> </tbody> </table>
【おまけ】
ここから正規なHTMLじゃなくて、変則なものでも使えますよと言うお話ですです。
[JSFのタグ]
f:view>h:form#searchForm>h:dataTable>h:column
<f:view> <h:form id="searchForm"> <h:dataTable> <h:column></h:column> </h:dataTable> </h:form> </f:view>
ただし、Emmetの機能性で下記のような変換があるので万能ではないです。
input:button
<input type="button" value="">
[Thymeleaf]
div[th:text th:remove].message
<div th:text="" th:remove="" class="message"></div>
下記のようなものは動かないので注意。
div[th:text=${it.value}].message
<div th:text="it.value" class="message"></div>
【まとめ】
Emmetは非常に便利です。
最近はEmmetがないとHTMLがかけなくなってきました・・・
