コーディングの能率を飛躍的に上げる「Emmet」を使ってみる

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

コーディングの能率を飛躍的に上げる「Emmet」を使ってみる

7月から入社しました、新人コーダーのトッティです。
トッティという名前ですが、サッカーより野球派です。

入社してから早1ヶ月半、Webページのコーディング仕事も少しずつ慣れ始めてきましたが、だんだん仕事量も多くなってきて、今の自分の生産性では捌ききれなくなりそうな今日この頃・・・
そんな私みたいな状況の新人コーダーさんは意外と多いのではないでしょうか??
今回私がこのドツボ的状況を抜け出すために、Google先生にご教授していただいた中で見つけた、「Emmet」というものを紹介します。

Emmetとはなんぞや?

Emmetはhtmlやcssのコーディングを効率的に入力できるようにするためのプラグインのことで、「zen-coding」と聞けばもしかしたらご存知の人もいるかもしれません。Emmetはそのzen-codingの次期バージョンに当たるものです。
効率的に入力できる仕組みって、今日びのhtmlエディタなら閉じタグの自動補完などがあるじゃねーかと思うでしょうが、甘い!甘すぎる!Emmetはコードとショートカットキーを組合せることで、最小限の入力で記述できるすごいモノなんです。

Emmetでコーディングしてみる

例えばdivタグ
<div></div>
を入力してみたいとき、今までの私だとほとんど愚直に打ち込んでいましたが、Emmetは
divと入力しCtrl+E
で終わり。めちゃカンタン。

あと以下のようなリストの入力。liの数が増えると何気に面倒ですが、

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

Emmetだったら
ul>li*3と入力しCtrl+E
のみ。どんなにliの数が多くても関係なし。
今まで<li></li>のコピペを繰り返していた自分がかわいそうになってきた・・・

ほかにも便利なコマンドがたくさんあるようで、公式サイトでコマンド一覧表がまとめられています。
Cheat Sheet | Emmet

汎用性の高さ

といってもこのプラグインなんて、ワイの愛用エディタじゃ使えねえんじゃねーのか!?と思うかもしれませんが、Emmetは主要のhtmlエディタならだいたいは対応済みです。こういった裾野が広い点もEmmetの大きな魅力です。一度公式サイトをのぞいてみて、対応しているエディタかどうかチェックしてみてください。

Emmetをインストール

今回私が使用しているDreamweaverでインストールしてみます。他のエディタの場合も手順は大きく変わらないかと思います。

1.まずEmmetの公式サイトからダウンロードページに移動し、プラグインを導入したいエディタのリンクを選択。
Emmet公式サイト

2.InstallationのEmmet.zxpのリンクをクリックするとダウンロードされる。
Emmetダウンロードページ

3.ダウンロードしたzxpファイルを開くとDreamweaverの拡張機能画面が開き、インストールできます。
Dreamweaver拡張機能画面

※EmmetのショートカットキーのデフォルトはCtrl+Eですが、エディタのショートカットキーと競合することがあるため、適宜ショートカットキーを調整してください。

まとめ

確かに便利そうだけど、コマンド一覧表の中身を覚えるのが大変。というか無理。と思う人がいるかもしれません。
まずはタグ名→Ctrl+Eだけを覚えて、それ以外のコマンドは後で適宜覚えていくというスタイルで良いかと思います。
Emmetはあくまでも楽するためのツールなので、気楽な気持ちで活用してみてはいかがでしょうか。

powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.