今まで確実に損をしていた？！Emmetってご存知？

こんにちは！ぐちです。

HTMLコーディング

Webシステムを作るときやハイブリットアプリを作る時など何かとHTMLコーディングをする機会がありますよね。これまではタグを一から手で打ったり既存のコードからコピペしたり超無駄な時間をかけてコーディングしてきました。そう！Emmetを知るまでは・・・。

言葉自体は見たことがあり知っていたのですがなぜだかスルーしてきました。つい先日PHPの調べ物をしていた際に偶然Emmetに関する記事を見つけふと読んでみました。なんということでしょう！超便利な書き方ができそうではありませんか。愕然としましたね。今まで手でチマチマ行っていた作業はなんだったのか！と。。。

Emmetとは

Wikipediaには下記のように記載があります。要するに生産性があがるよ！ってことですよね。

Emmet（旧：Zen Coding）は既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できるテキストエディタ用プラグインである。 2008年にVadim Makeevが開発を始め、Sergey Chikuyonokと利用者によりMIT Licenseのオープンソースとして継続して開発されている。多くの著名なエディタに実装されているが、特定のソフトウェアに特化して開発されておらず、どのテキストエディタにも偏向していない。

では実際にどういう使い方をするのかご紹介します。
※Emmetのインストールは各エディタに沿ったものを調べてくださいね。

CSS読み込み

linkと書いてタブキーを押下すれば下記のように展開されます。

<link rel="stylesheet" href="">

メニューなど

nav>ul#menu>li*3>a[#]{menu$}と書けば下記のように連続したタグも書けます。*でその後ろの数字分繰り返され、$を書くことで連番が振られるので便利ですね。

<nav>
    <ul id="menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</nav>

雛形

!と1文字だけ書いてタブキーで下記のようにHTML文書の雛形が展開されます。ゼロベースで書き始めることってなかなかないとは思いますがEmmetの特徴らしいので。笑

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

</body>
</html>

idをclass

.を使うことでclass属性名を、#を使うことでid属性名を指定することができます。

<!-- div.hoge -->
<div class="hoge"></div>

<!-- div#fuga -->
<div id="fuga"></div>

タグ名を省略

上記の例でdivを省略してもデフォルトではdivが付加されます。.hogeや#fugaといった記述でも同じ展開結果となります。

このような感じで圧倒的にコーディング量を減らすことができます。慣れるまでは多少時間がかかるかもしれませんが慣れた後のことを考えたら使わない手はないですよね！

またもう一つのメリットとしてチャットなどで部分的に送る場合に1行で済むので非常にわかりやすいです。サイドメニューのタグってどうなってるんだっけ？という時にこれだよ〜といった感じでチャットで送られてきたものが何行にも渡るものだとちょっとイラっとしますよね。笑
Emmetの構文であればシンプルに1行のみを送れば済むのですからその差は歴然です。

皆さんからすると今更かよ！ってツッコミを入れられそうなネタでしたが僕としては本当に衝撃的なツールでしたね。今後活用しまくっていきたいと思います！