Notepad++とEmmetでサクサクコーディング

以前の記事で紹介したNotepad++、大変便利で私もブログライティングやコーディングのデフォルトエディタとしてありがたく使わせてもらってます。

最新のNotepad++ではデフォルトプラグインでEmmetが入っているらしく（もちろん旧バージョンにあとから入れることもできます）、これはちょっと便利だなぁ、と感じましたのでEmmetの基本あたりを備忘録兼ねて紹介しておきます。

Emmetってなにさ？

Webコーディングに携わってる方はご存知の方が多いかもしれない、Zen-Coding。独自の記法でHTMLやCSSを記述し、それを展開することでコーディングが楽チンになるというものです。

EmmetというのはそのZen-Codingの次期バージョンです。

Zen-Codingの次期バージョン、Emmet について

Sergey Chikuyonok氏のGithubを見に行ったら、”Emmet (ex-Zen Coding)” という気になる記述があり、気になったので調べてみました。

Zen-Codingについて

Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。

そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。

Emmet(beta)

Emmetは、2013年2月24日に正式リリースされました。

(以下略)

Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17より。

ここに紹介されているようにEmmetとは単体のアプリケーションではなく、テキストエディタでコーディングする際のプラグインとしてリリースされています。よって使い慣れたエディタがEmmetプラグインに対応していればその恩恵にあずかれる、ということです。

ショートコードを入力して展開する…といってもイマイチピンとこない人もいるかもしれません。たとえばこんな例。Emmetに対応しているテキストエディタなどで

と入力して展開すると


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>

このように記述されます。

展開方法はだいたいどのエディタでもデフォルトで「Ctrl(またはCommand)+E」キーに割り当てられていると思います。

つまりテキストエディタで「!」と入力し、続けて「Ctrl(またはCommand)+E」を押すことで、HTML5のdoctypeからhead/bodyまでお約束のめんどくさい記述をたった「!」一文字で入力できるんです。

またこんな例も。


ul>li*5

これを展開すると


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

このように指定した数だけリストタグを自動的に発行します。展開前の記述にはEmmet独特の記法が使われていて、「A>B」は「Aの中にBを含む(BはAの入れ子の中に入る)」ということです。また、「C*n」は「Cをn回繰り返す」という意味です。

ざっくりHTMLの構造が頭の中でできているときはこれでじゃんじゃん文書構造書いていって、後からテキストなり画像ソースなりを埋めていく、ということでどんどんコードを生産していくことができます。

Emmetで扱えるのはHTMLだけではなくCSSを記述することも可能で

pos

は展開すると


position:relative;

になります。これではあんまり有難味がないですが


anim-

などは


animation:name duration timing-function delay iteration-count direction fill-mode;

こんな感じで長い定型のプロパティ書くときに重宝します。

というわけで基本的にはHTML/CSSがベタで書ける程度に理解していることは大前提で、かつEmmet独自の記法を覚えなければなりませんので全くコーディングをしたことがない人が突然コーディングできるようになる夢の記法ではありませんが、実務で携わっている人にとっては大変有用なものだと思います。

対応エディタなど

先ほど紹介したKOJIKAさんの記事に2013年5月14日現在の対応エディタが載ってたので改めてここでも紹介しておきたいと思います。

公式サポート

Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSPad
textarea
CodeMirror
Brackets
NetBeans

サードパーティサポート

SynWrite
WebStorm
PhpStorm
Vim

とある書籍を読んでコーディング環境としてAptanaが紹介されていまして、ものは試しにと思って使ってみたんですが、やっぱり重い。常用マシンが骨董品なのでその辺の影響も多分にあると思いますが、やっぱりNotepad++はとてつもなく軽くていいなぁ。

かつ過去記事でも紹介しましたが、ショートカットキー一発で今編集しているページを直接ブラウザ（FF/IE/Chrome/Safari）でプレビューできるのがとにかく便利。WISIWIGオーサリングツールの付属ビューワで確認してあとで「こんなはずじゃあなかったのに…」ということがないですからねぇ。

というわけでNotepad++用Emmetプラグインはこちらからダウンロードどうぞ。

emmetio/npp · GitHub

その他のエディタ用のプラグインも以下のリストページからダウンロードできます。

Download

EmmetのHTML基本の記法

Emmetの文法については以下のリンクに一覧がありますのでまずこちらをブクマしておきましょう。

Cheat Sheet

英語のページですが、基本的に展開前/後の記法/コードという紹介の仕方なので英語読めなくても勝つる！ます。

なのでだいたいそこを読めばわかるんですが、HTMLの基本部分だけこちらでもざっと紹介しておきましょう。サンプルコードについては基本的にここで紹介したページからの引用です(解説のみ追記)。

子要素/入れ子


(展開前)
nav>ul>li
(展開後)
<nav>
<ul>
<li></li>
</ul>
</nav>

子要素(ネストされる要素)は親要素(ネストする要素)の後に「>」に続けて記述します。

並列の要素


(展開前)
div+p+bq
(展開後)
<div></div>
<p></p>
<blockquote></blockquote>

「+」で結合された要素は同階層の要素となります。

上の階層に戻る


(展開前)
div+div>p>span+em^bq
(展開後)
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

「^」のあとに記述されたものはその直前に記述された要素より一つ上の階層に配置されます。また「^^」のように複数続けて書くことでさかのぼる階層を指定することができます。上のサンプルと似ていますが


(展開前)
div+div>p>span+em^^bq
(展開後)
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

「^^」以外は直前のサンプルと同じなのですが、blockquoteタグの挿入されている位置が異なるのがお判りでしょうか。

ちなみに前バージョンであるZen-Codingでは「^」は実装されていなかったようです。

グループ化


(展開前)
div>(header>ul>li*2>a)+footer>p
(展開後)
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

「()」でくくられた要素は一つのグループとして取り扱われます。そのうえで他の制御文字（「^」や「+」など）の評価を行います。

要素の数の指定


(展開前)
ul>li.item$*5
(展開後)
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

「*」でその要素を繰り返す数を指定できます。かつこの例では「.item(n)」という共通接頭をもつクラス名に自動的にナンバリングされています。

classとid


(展開前)
#header
(展開後)
<div id="header"></div>
(展開前)
.title
(展開後)
<div class="title"></div>

通常のHTMLと同様、要素に続けてclassの場合は「."クラス名"」、idの場合は「#"クラス名"」と記述します。要素が無指定だとこの例のようにdiv要素にclassやidを付して展開します。

属性と属性値


(展開前)
p[title="Hello world"]
(展開後)
<p title="Hello world"></p>

要素のあとに「[属性="属性値"]」の形で属性と属性値を付すことができます。

テキスト


(展開前)
a{Click me}
(展開後)
<a href="">Click me</a>

「{}」内でくくられたものは直前の要素のテキストノードとしてそのタグ内に挿入されます。

その他HTMLタグ


(展開前)
a
(展開後)
<a href=""></a>
(展開前)
sect
Alias of section(sectionのエイリアス)
（展開後）
<section></section>

HTML要素のタグ自体は「<」「>」を記述することなく、また閉じタグを書く必要もありません。aのようにタグの名称そのままの場合もありますがsectionをsectとするように短縮形で記述する場合もあります。先ほど紹介したチートシートのページに一覧がありますのでここではすべての紹介は割愛します。

まとめ

私自身も最近ショートコードでのコーディングを真面目に調べ始めたので偉そうに紹介できたもんでもないですが、業務でもそれ以外でもコーディング作業のボリュームが大きい人にとっては覚えておいて損のないことでしょう。

また、Emmetそれ自身が単独のアプリケーションではなくプラグインという形で配布されているものですので、使用するエディタが変わってもプラグインで対応際していれば同じ記述でコーディングでき環境に制作依存しにくい(汎用性が高い)というのもミソです。

私ごときブロガーなどは通常使うタグなどほぼ決まり切っている場合がほとんどでしょうから、覚えることも少なくある意味ライティングに専念出来てそれはそれで役に立つでしょうし。皆様のスタイルに合わせて活用いただければと思います。

んじゃ。