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

powered by hm solution

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

お問い合わせ
ブログTOP » web » コーディング » コーディングの能率を飛躍的に上げる「Emmet」を使ってみる

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

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はあくまでも楽するためのツールなので、気楽な気持ちで活用してみてはいかがでしょうか。

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution

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

お問い合わせ
お問い合わせ
gmt
© hm solution,ltd.