Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
Pocket

バイト先で「新ゆとり世代」と言われました。れこです。

HTML、CSSを省略して書けるZen-Codingの後見、
Emmetについて書こうと思います。

やれCoffeeだTypeScriptだSassだ〜と手をつける前に、
もっと簡単に、デメリット無く作業効率をあげられます。

CoffeeScriptやSassなどのプリプロセッサ系とは違い、
CoffeeやSassの知識を開発メンバー全員が持ってないとならず
結局自由が効かなくなる、ということはありません

個人から使えて、チームで使ってもなお良し。

更に、展開後のカーソルの位置がいい感じだったりと、
細かい気配りまで完璧です。

そんなEmmetを
僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。

目次

  • Emmetの導入
  • 基本的な使い方
  • HTML編
  • CSS編
  • 自分なりの使い方

Emmetの導入

Emmetは各種エディタ・IDEのプラグイン形式で配布されています。
お値段は無料です。

Web系の人が使ってそうなエディタについて
導入方法をざっくり説明します。

SublimeText2

Package Controlは入っている前提で、
Ctrl + Shift + Pを押し、Install Packageを選択。
出てきたリストの中からEmmetを選ぶだけです。

数秒待てばインストールが完了し、もう準備完了です。

【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 | Developers.IO

Coda

プラグインページからCoda用プラグインを落としてきて、 それをダブルクリックするだけで準備完了です。

もっとコーディングが早くなる「Emmet」の環境設定(coda2)

Web Storm

最強と呼ばれるWeb Stormですが、
使ったこと無いので導入方法はイマイチわかりません。

Enabling Emmet Support

DreamWeaver

コーディングが4倍早くなる「zen-coding」をDreamweaver CS5に導入してみる « WeBridge

Eclipse

EclipseにZen Codingをインストールする

基本的な使い方

Emmetの使い方は、
各エディタやOS、設定によって微妙にショートカットが変わる可能性があるので、 もし展開がされなかったら、ググってみてください。

ショートカットは、基本的にCtrl + eになっていると思います。

Emmetのコードを入力して、その行末でショートカット押せば
カーソル以前のEmmetコードが展開されます。

HTML編

EmmetでHTMLを書く際最低限知っておくと便利なのは、

  • HTMLのひな形を一瞬で作れる
  • idは#、classは.
  • タグを表すための<>は不要。タグ名だけでいい
  • 入れ子にする際にはA>Bのように>を使う
  • 展開した時に連番にしたいときは$を使う
  • 属性を表すときは、[属性名=値]と書く。値に"は不要
  • 各タグにいい感じにデフォルト属性をつけてくれる

基本これだけで恩恵を受けられます。
CSSやjQueryを使ったことが有る方なら、すぐ馴染めると思います。

他にも()でグループ化したり、^で階層を上に戻ったりできますが、
そこら辺は割愛します。

基本形

ごくごくベーシックな例を出すと、

headタグ内に必ず入れると思います。
これを展開すると、

と、rel="stylesheet"href=""を付加した状態にしてくれます。

メニュー

よくあるメニューは、こんな感じになると思います。

navの中にidがmenuulを入れて…という具合です。
これを展開するとこんな感じになります。

liに*5とついていますが、タグ名の後ろに*数字を入れることで、
そのタグを指定した数字分繰り返しますよー
とうい指定をすることができます。

連番

最近は連番を使う機会があまりないのですが、
たまに使う時でもあると便利です。 連番を利用するには$を使います。

今回はタグ名がありません。
タグ名を省略すると、デフォルトではdivになります。
ulの中でタグ名を省略するとliになったり、だいたいいい感じになります。

連番って、行コピペする際に、
さりげなくも、かなり面倒な作業だと思います。

そんなときも、連番にしたい所に$を一つ置くだけで連番に出来ます。
ちなみに$$と$を2つ並べると、010203…と2桁の連番になります。

HTMLのひな形

僕がよく使うDOCTYPE宣言は、HTML4.01 transitionalHTML5なので、
とりあえずそれだけ説明します。

なんと1文字です。びっくり。
これを展開するとHTML5のひな形が出来ます。

文字コード指定のmetaタグまで入れてくれます!!!

デフォルトだと英語なのでlangがenになってしまいますが、
設定ファイルを数文字書き換えるだけでjaにできます。

新規テキスト ドキュメント (128).txt: Sublime Text 2 : Emmet プラグインが出力する HTML の言語を修正する

次に、HTML4.01 transitionalはこうです。

これがやや覚えにくいのですが、
IEが居る限り4.01と戦わざるを得ません。何とか覚えましょう
展開すると以下のようになります。

XHTML transitionalにしたい場合は、html:xtです。

CSS編

Emmetの記事はHTMLについて書かれている場合が結構多いのですが、
個人的にはEmmetの真価はCSSにあると思ってます。

EmmetでCSSを書く時に意識すべきことは、

  • 複数行まとめて展開は出来ない
  • 基本的に-で繋がるプロパティ名は、頭文字を打てばOK
  • 先頭に-を打つと、ベンダープレフィックスを適切に入れてくれる

です。

慣れるまでは「むしろ面倒」と思うかもしれませんが、
慣れると、いちいちプロパティ名をフルで打つのがアホらしくなってきます。

基本形

EmmetのCSSの基本形は、こんな感じです。

唐突すぎてわけがわかりませんね。展開してみます。

text-align: center; と、
頭文字をつないだ文字列になっています。

他にも例を出していきます。

このように、被るプロパティ名が多い頭文字は
少し長めに打たないと行けないのですが、たかだか5文字程度です。

単位は、多くの場合
省略してもpxを入れてくれるので数字だけ打てばOK。

他の単位を利用したい場合、明示的に書いてあげればそちらが優先されます。

+を最後につける書き方

僕も最近知りました。
上記の指定に+を組み合わせられるものがあります。
backgroundなどを一括指定する場合に使うことが多いかと思います。

ベンダープレフィックス

CSS3を使うのがやや億劫な理由の一つ、
ベンダープレフィックスさんにもしっかり対応しています。

Sublime Text2のように、複数カーソルに対応したエディタなら、
値を一度に指定することができます。

ただでさえ捗るのに、更に捗ります

box-sizing

box-shadow

transition

border-radius

などなど。
お分かりだと思いますが、全部が全部に付けるのではなく、
必要な分だけプレフィックスを付けてくれます。

これは、ブラウザの進化ごとに、
Emmetもアップデートする形で変更されると思うので、 ちょくちょくアップデートをかけたほうが良さそうです。

自分なりの使い方

Emmetを覚えて使うようになってから、 気にしているやEmmetが有効なタイミングも書いておきます。

展開するときに、展開前のEmmetコードを残しておく

これはコーディングする際かなり重宝しています。

htmlに展開してみて、「あ、ここの構造ミスったな」と思った時に、
展開前のEmmetコードを残しておくと、修正が非常に容易です。

特に、繰り返しのliタグの中身なんかを修正した際、
いちいち修正後をコピーして、1行ずつ貼り付け
なんてことをしなくて済みます。

スニペット管理

素のhtmlは、見ればわかるのに、やたらと行数を取ります。
Emmetのコードとして1行で残いておいて、貼り付けて、展開
とすると、管理もしやすいし、何よりかさばりません

ちょっとした説明に

htmlやjsの話をチャットなどでしている時に、
html構造やclass、idさえ伝われば良いのに、
いちいちhtmlを書くのは冗長です。

そんなときにEmmetのコードで表現すると、
簡潔かつ要所を的確に伝えることができます。

「メニューののhtmlどうなってる?」
nav>ul>li*3>a[href=#]だよー」
と言った具合に。

まとめ

ほぼ100%使用する機能しか触れていないので、
紹介がけっこう浅くなってしまいました。

「こういうのないの!?」と思われたら、公式のチートシートを見てみて下さい。
めちゃくちゃな数があります。とても覚えきれません。
要所要所見て覚えてみて下さい。

formやinputタグ回りや、CSSの面白い省略記法などアリアリです。

あと、日本語化で少し触れましたが、
自分流のカスタマイズも手軽にできるので、
チームで共有したりなんだりして、コーディングの効率をあげましょう!!!

Pocket