Emmet概要
目次
Emmetとはなにか?
HTMLやCSSを記述するときに使用する略記法、およびこれを実行するためのテキストエディタ用プラグインです。
プラグインがインストールされているエディタ上でEmmetの略記法（以下『スニペット』と呼ぶことにします）に対し、これを変換(多くはCtrl+E、Ctrl+Shift+Enterなどのショートカットキーが割り当てられている)することで正規のHTML/CSSに展開されます。
使用例
div>ul>li*5
上記のスニペットを展開すると以下のようなHTMLソースが生成されます。
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
このようにHTML/CSSコーディングの省力化ができ、かつ階層構造の自動展開によってタグの閉じ忘れやネスト入れ違い・階層ずれなどロジカルなエラーの確率を低減することができます。
複数のプラットフォーム・多くのアプリケーションに対応しているため、環境依存度の低い利用ができます。そのため生産量あたり学習コストが極めて低いと言うことができるでしょう。
また、Sassのようなスクリプト言語ではなくあくまでhtml/cssの略記法であり、コンパイル環境を必要とすることもありません。
Emmetに関する一次情報/公式サイト
最新の公式情報(英語版)については以下を参照ください。
Emmetに関する当サイトでの情報
公式サイトが英語表記ですのでとっつきにくさを感じる方もいるのではないかと思います。実際のところ英語力がなくてもある程度の内容はわかりますしブラウザの機械翻訳でもそれなりに意味は読み取れるのですが、それでも抵抗感を感じる人も少なくないでしょう。また、日本語でEmmetに関する総括サイトがなかったためこれを開設することにしました。
大まかに分けて以下のようなパートで構成されています。
まったくemmetに触れたことがない方は概要のあとにアクションの項でどのような操作ができるのかを見てみましょう。普段使っているエディタにemmetプラグイン（後述）があればインストールし、HTML文法とCSS文法を見ながら、よく使うタグやプロパティのスニペットを入力し、展開する練習をしてみましょう。
すでにEmmetを知っている方はHTMLチートシートやCSSチートシートのページを参考にしてください。
より短期間での学習
『3分動画でマスターできる、初心者向けプログラミング学習サイト』でご存知の方も多いかもしれません、ドットインストールでもEmmetの講座が開設されています。全10回、1回5分弱の講座ですのでEmmetがどんなものなのかこれを見て感触をつかむのも良いかと思います。
とはいえ、動画を見ただけでは学んだ『つもり』でしかありません。実際にスキルを身に着けるには動画のサンプルのように入力/展開をやってみることです。
Emmet対応エディタ
公式サポート
以下のテキストエディタ、WEBオーサリングツールについてはプラグインが公式サポートされています。
| アプリケーション名 | プラグイン | OS/プラットフォーム |
|---|---|---|
| Sublime Text | download | cross-platform |
| Atom | download | OS X |
| Ecllipse/Aptana | download | cross-platform |
| TextMate | download | OS X |
| Coda | download | OS X |
| Espresso | download | OS X |
| Chocolat | download | OS X |
| Komodo Edit | download | cross-platform |
| Notepad++ | download | Windows |
| PSPad | download | Windows |
| textarea | download | browser based,cross-platform |
| CodeMirror | download | browser based,cross-platform |
| Brackets | download | cross-platform |
| NetBeans | download | cross-platform |
| Adobe Dreamweaver | download | Windows,OSX |
サードパーティサポート
以下のエディタのためのプラグインは、サードパーティの開発者によって開発されています。すべてのエメットの機能をサポートしない場合があります。
| アプリケーション名 | プラグイン | OS/プラットフォーム |
|---|---|---|
| SynWrite | download | Windows |
| WebStorm | download | cross-platform |
| PhpStorm | download | cross-platform |
| Vim | download | cross-platform |
| HTML-Kit | download | Windows |
| HippoEDIT | download | Windows |
| CodeLobster PHP Edition | download | Windows |
| TinyMCE | download | browser based,cross-platform |
| EverEdit | download | Windows |
| EditPlus | download | Windows |
オンラインサービス
以下のオンラインサービスもEmmetに対応しています。構築済みの環境がなくてもネットに繋がれば一時的にEmmetでコーディングできるので便利かと思います。
| サービス名 |
|---|
| JSFiddle |
| JSBin |
| CodePen |
| ICEcoder |
| DivShot |
| Codio |
| Codeanywhere |