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がmenuのulを入れて…という具合です。
これを展開するとこんな感じになります。

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

連番

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

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

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

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

HTMLのひな形

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

なんと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タグの中身なんかを修正した際、
いちいち修正後をコピーして、１行ずつ貼り付け
なんてことをしなくて済みます。

スニペット管理

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

ちょっとした説明に

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

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

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

まとめ

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

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

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

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

Pocket