Emmet
概要
Emmetは、独自の省略記法を入力してから展開キーを押すことで、対応するHTMLタグやCSSプロパティを自動的に生成する仕組みである。例えば「div.container」と入力して展開すると、「container」というclass属性を持つdiv要素のHTMLコードが作成される。子要素や兄弟要素、繰り返しなども記号で表現できる。
記法の中では、要素の階層関係を表す「>」、兄弟関係を表す「+」、繰り返しを表す「*」といった記号が用いられる。これらを組み合わせることで、通常であれば何行にもわたるコードを一行の短い文字列で指定できる。CSSにおいても、プロパティ名の一部を入力するだけで正式な記述に展開される。
こうした省略記法によってタイピング量が大幅に減り、コーディングにかかる時間の短縮につながる。加えて、タグの入れ子や閉じ忘れといった構文上の誤りを防ぐ効果もある。「ul>li*3」のように入力すれば、ul要素の中に3つのli要素を含むHTMLが一度に生成されるため、同じ構造を繰り返し手作業で書く必要がなくなる。
Emmetは単独のアプリケーションではなく、多くのソースコードエディタや統合開発環境（IDE）に組み込まれて利用される仕組みである。「Visual Studio Code」や「Sublime Text」「Atom」など様々なエディタで標準機能として搭載されているか、拡張機能として追加できるようになっている。対応するエディタでは、省略記法を入力してTabキーを押すなどの操作で展開される。現在はHTMLやCSSに加え、一部のテンプレート言語やXML系の文書にも対応が広がっている。
Web制作やフロントエンド開発の現場では、同じようなタグ構造を繰り返し記述する場面が多く発生する。Emmetを利用すれば、こうした定型的な記述作業を省力化でき、開発者はコードの見た目や構造を考える作業により多くの時間を割けるようになる。もともとは「Zen Coding」という名称のプロジェクトとして開発が始まり、その後現在の名称に変更された。現在ではWeb制作における標準的な補助ツールの一つとして広く普及している。
共有ボタンをタップ