Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

Emmetでコーディングスピードをあげよう!

スポンサーリンク

keys

コーディングスピードを上げるためにオススメなEmmet。

Emmetとはなにか?についてと、Emmetを使ってみてよかった点をまとめました。

 

Emmetとは?

HTML・CSSをコーディングする時のショートカットキーのひとつで、使いこなせる様になると圧倒的なスピードでコーディングが進みます。

 

時間短縮の他にもショートカットを自動的に展開してくれるので、

 

タイプミス(スペルミス)が減少します。(←ありがたいです)

 

backgroundなどをタイプミス(スペルミス)してコードが動かないことがよく起こっていた私にはスピードアップ加え、タイプミス減少したので、コードを考えることに集中できるようになりました。

 

テキストエディタによってはEmmet機能が標準装備されている場合もありますが、私が使っているテキストエディタの「Brackets」は拡張機能を導入する必要がありましたので、お使いのエディタをいまいちどご確認ください。

 

Brackets」の拡張機能についてはこちらの記事でどうぞ↓

treatmyself.hatenablog.jp


 

Emmet記法を使えるようになってよかったこと

私がEmmet記法を覚えてよかったことを考えてみました↓

  • ドットインストールの動画に1倍速でもついて行けるようになった
  • スペルミスが減ったのでコードが動いてくれる
  • 全体的に時間短縮になったのでコードを考える時間が増えた


Emmeが使えるようになるといいことがいっぱい!

Emmetをやるために覚えておきたい構文(文法)


Emmetはショートカット記法で書いて、Tabキーを押すと展開されます。

カーソルがEmmetはショートカット記法で書いた文の最後にいることを確認してTabキーを押します。


Tabキーを押さないと何も起こりませんのでご注意を。


そして、私がよく使っているEmmetの構文(文法)を紹介します。

子要素を作る時

「>」を使います↓

nav>ul>li

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

同格の要素を作る時

「+」を使います↓

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

グループ要素を作る時

「()」を使います↓

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

同じ要素を複数作る時

「*」を使います↓

ul>li*5

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

Class要素を作る時

「.」を使います↓

.title

<div class="title"></div>

Id要素を作る時

「#」を使います↓

#header

<div id="header"></div>


 HTMLとCSSのEmmetのショートカットについては別記事でまとめていますので、下記記事をご参照下さい。


Emmetに慣れるためには


とにかく使うことが慣れる近道です。(←当たり前のことだけど)

私は慣れるまではCheat Sheetを片手にコーディングをしました。

慣れるまでは少しやりづらいこともありますが、慣れると「Emmetなしでコーディングするの大変」ってなりますよ。


まとめ


Emmetをマスターすると効率よくコードを書けるようになるのでまだ使ったことがなければ、ぜひ使ってみてください。