ブログ

HOME/ブログ

Emmetの使い方を知り、爆速コーディングを実現しよう

Emmetの使い方を知り、 爆速コーディングを実現しよう

Emmetの使い方について解説していきます。Emmetとは、コーディングのスピードを速める便利なツールのようなものです。コーディングの際に面倒な記述を省略・短縮して入力することができます。

今回はEmmetの使い方について理解していただき、コーディングのスピードを速めてほしいと思います。

Emmetとは?

プログミラングをする技術・利便性は日々進化しています。Webページ一つとっても開発技術と開発のスピードは格段に早くなっています。

そして、開発のスピードを速めることができる便利なツールの一つがEmmetです。Emmetはコーディングのスピードを速めるために開発された便利なツールになっています。色々なコーディングソフトで利用することができるようになっていて、多くのコーダーに人気な機能です。

Emmetは元々Zen-Codingと命名されたもので、シンプルに記述することを目的としたものになっています。

例えば、上記のような入力をしたいときには下記のように簡略化することが可能です。

.classと入力したのちにTabキーを押すことで<div class=”class”></div>が自動で入力されます。<タグ>の入力を毎回する必要がなくなり、入力がだいぶ簡略化されたと思います。

このように入力を簡略化することで、コーディングのスピードを3倍、5倍と上げていくことが可能となります。

Emmetの具体的な使い方

Emmetの実践的で具体的な使い方について記述していきます。まずは使用しているコーディングソフトにEmmetをダウンロードする必要があります。DreamWeaverを使用していれば、ほとんどの場合デフォルトでダウンロードされています。

DreamWeaver以外を使用している方は下記URLからダウンロードすることが可能です。

https://github.com/sergeche

Emmetの使い方〜基本編〜

EmmetはHTML・CSSともに使用することが可能ですが、基本となる使い方についてみていきます。

基本となる使い方は

Emmetの省略コードの入力

Tabキー、もしくは、control + eを押す

たったこれだけです。入力が省略され、必要なことはTabキーを押すだけです。Emmetを導入すれば短いコードを書いて、すぐに反映させることが可能になります。この基本的な記述の仕方はHTML・CSS共に共通です。

Emmetの使い方〜HTML編〜

HTMLでEmmetの具体的な使い方について見ていきたいと思います。まずはHTMLのEmmetの使い方を表にまとめたので、ご覧ください。

Emmetの記述 コーディング結果
要素 <要素></要素>
.クラス名 <div class=”クラス名”></div>
#id名 <div id=”id名”></div>
要素1>要素2 <要素1>
<要素2>
</要素2>
</要素1>
要素1 + 要素2 <要素1></要素1>
<要素2></要素2>

上記の表が一般的なEmmetの使い方になります。要素だけを入力してTabキーを入力した時を見てみます。

と入力してTabキーを押せば

と表示されます。

他にも見ていきます。

と入力すれば

と表示されます。要素.クラス名とする事で「要素 class=”クラス名”」が成り立ち、要素#id名とする事で「要素 id=”id名”」が成り立ちます。上記のものはそれを連結させたものになります。また、要素をつけずに.class名とした場合には自動的に<div class=”クラス名”></div>となり、自動的にdiv要素になることは覚えておきましょう。

以上が基本的な使い方になります。Emmetは応用的な使い方もあるので、もう少し見ていきます。

このように入力すれば

あっという間に構成を仕上げることも可能です。「+」を使用することで、同じ階層に別のタグを作ることが可能です。

比較的、記述が多いlistメニューについても簡略化することが可能です。

「>」の記号を使用することで、入れ子構造をとることができます。また、li.list*5とすることで<li>タグを5つ自動で生成してくれます。

ulタグの中にliタグを5つ作るという構造が成り立ちます。仮にクラス名を一から順番に番号順につけたい場合にもEmmetは対応可能です。

ul.itemのところで$*5とすることで、

とリストのクラス名を一から順番につけていくことが可能です。

Emmetには、HTMLの文書を作るときに必要な一番最初の記述も省略する機能もあります。

ビックリマークを入力して、タブキーを押すと

HTMLの記述として必要なものが全て入力されるようになっています。

以上がHTMLでのEmmetの具体的な使い方になります。

CSS

CSSにおけるEmmetの使用はちょっとした簡略だけなので、Emmetの記述を覚えることに時間を取られるぐらいであれば、少しでもCSSの記述になれた方が早いというのが個人的な意見です。

それでもEmmetを使用して少しでもCSSの記述のスピードをあげたいという方はCSSのEmmetの書き方について見ていってほしいと思います。Emmetを入力してTabキーを入力するやり方はHTMLのEmmetの使い方と一緒です。

taでtext-align:が記述され、cとすることでtext-align: center;となります。cを「l」「r」に変えることでleft、rightに変えることが可能です。

dでdisyplay:となり、bでblockを表現しています。bを「f」「i」に変えることでflex、inlineと変えることが可能です。

このようにCSSはルールがあるというよりもむしろ、それぞれの記述に簡略化されたものが適用されるといった感じです。なので、CSSに関してはどんなEmmetがあるかを覚える必要があります。

 

覚えるというより使っていくうちに慣れる感じですが、よく使う記述だけ覚えるぐらいがちょうど良いと思います。

 

HTMLに関してもCSSに関してももっとたくさんの記述方法があるのですが、ここで全て紹介することはできません。もっとEmmetの書き方を知りたい場合にはEmmetのチートシートを参照するのが良いでしょう。https://docs.emmet.io/cheat-sheet/←こちらがチートシートのURLとなっているので、参照してみてください。

まとめ

コーディングを速める技術には、Sassというものを設計したり、PugHamlといったHTMLを簡略化する技術も進化しています。そんな中でEmmetは誰でも簡単にすぐに実行することができるテクニックですので、ぜひ利用してみてください。

EmmetのHTMLの記述の仕方を基本的な使い方だけでもコーディングするスピードは大きく変わってくると思うのでぜひ利用してみてください。

この記事を書いた人

田村 京暉

FOCUS SQUAREのフルスタックエンジニアとして活動中。LP・HPのコーディングだけでなく、Wordpressのカスタマイズやサーバーサイドも行なっています。 技術的なサポートを全般行います。