BLOG
コーディングには必須!?便利なプラグイン「Emmet」の使い方

導入するメリット

上述したとおり、プロの方で使っていない方はいないほど優秀なプラグインです。通常のHTMLやCSSを省略できるだけでなく、その他にも様々なメリットがあります。

• どのテキストエディタで使用しても無料
• HTMLやCSSの記述を省略できる
• コーディングに掛かる時間を短縮できる
• 記述しなくても必要なタグが補完される
• テキストエディタの種類を問わない
• コンパイルする必要がない
• 腕や指の負担軽減に繋がる
• タイプミスによるコーディングミスが減る

などが挙げられます。コーディングの仕方自体に制限をかけるものではないので、チームで制作する場合や、Emmetを使えない方に、Emmetを使ってコーディングしたものを引き継ぐ場合でも、何ら問題ありません。目立ったデメリットもありませんので、ぜひ導入することをおすすめします。

EmmetでHTMLを記述する

通常のHTMLでコード入力する場合、「div」や「img」など様々なタグを使って記述していきますが、そのたびに「<」や「>」を入力するのは面倒になるはずです。Emmetを使用して記述することで、テンプレートのような記述は省略することができます。

例えば、「h1」のタグを使いたい場合を見ていきましょう。
テキストエディタ内でh1と打ち込んで、Tabを押してみます。

         
          <h1></h1>
         
        

このように出力されます。わざわざ記号を打ち込む必要がないので、コード入力に掛かる労力が少し減りました。さらに「a」や「img」タグの場合も見ていきましょう。

a+Tab

         
          <a href=""></a>
         
        

img+Tab

         
          <img src="" alt="">
         
        

このように、使用するタグに対して必要となる属性なども一緒に出力してくれます。一見少しの差かもしれませんが、実際にコーディングを行っている方であれば、この便利さが伝わると思います。ですが、Emmetの力はまだまだこんなものではありません。省略記号を駆使することで、複数の構文を一気に実装することが可能です。

よく使われる「ul」で考えてみましょう。「ul」タグ直下の子要素には、疑似要素を除き、かならず「li」タグがきますよね。その「li」タグは複数になることがほとんどだと思います。
仮に「ul」タグの子要素に「連番classのついたli」タグが5つ。その「li」タグそれぞれの子要素に「a」タグを作りたいとしましょう。これをEmmetで記述してみます。
ul>li.item$*5>a
記述するのはこれだけです。この状態でTabを押してみましょう。ポチ…。

         
          <ul>
           <li class="item1"><a href=""></a></li>
           <li class="item2"><a href=""></a></li>
           <li class="item3"><a href=""></a></li>
           <li class="item4"><a href=""></a></li>
           <li class="item5"><a href=""></a></li>
          </ul>
         
        

はい、まさに一瞬です。Emmetで定めている記号を使う事で、この他にも様々な記述が可能ですし、複雑な入れ子を使いたい場合でも問題ありません。記述する方法も1パターンではありませんので、自身が一番分かりやすい方法を使って作ることができます。

先ほどと同じ条件の「ul」を、別の記述パターンで作ってみましょう。
ul>(li.item$>a)*5
この状態でTabを押してみます。

         
          <ul>
           <li class="item1"><a href=""></a></li>
           <li class="item2"><a href=""></a></li>
           <li class="item3"><a href=""></a></li>
           <li class="item4"><a href=""></a></li>
           <li class="item5"><a href=""></a></li>
          </ul>
         
        

先ほどと同じ結果が出力されます。記号の種類や使い方を覚えておくことで、より柔軟に記述することができます。一気に全ての省略方法を覚える事は難しいと思うので、頻繁に使うことになる記号は優先して覚えておきましょう。

この他にも、まだまだ省略タグや記号はありますので、ぜひご自身でためしてみてください。一覧はページ下部に「Emmetチートシート」のリンクを貼っていますので、気になる方はご参照ください。

EmmetでCSSを記述する

HTMLに続いてCSSでの記述方法も見ていきましょう。HTMLの記述と違う点は、複数の配置や指定を一気にするのではなく、1つのプロパティに対して値を設定していくという記述方法になります。

例えば、「margin-top:10px;」と入力したい場合を見ていきましょう。
テキストエディタ内でmt10と打ち込んで、Tabを押してみます。

         
          margin-top:10px;
         
        

このように出力されます。使い方はHTMLの時とほとんど変わりませんので、こちらも省略された記号やタグを覚えて使うことで、爆速コーディングが可能になります。もう少し種類を見ていきましょう。

m0-a+Tab

         
          margin:0 auto;
         
        

w20p+Tab

         
          width:20%;
         
        

d+Tab

         
          display:block;
         
        

tac+Tab

         
          text-align:center;
         
        

このように、少しの文字で一気にCSSを記述していく事ができます。HTMLと違って省略プロパティが非常に多く、値との組み合わせも多いので、例をあげるとキリがありません。こちらもHTML同様、良く使うプロパティは最低限覚えておき、必要に応じて使える省略プロパティを増やしていきましょう。

Emmetの省略タグやプロパティ、値の種類などの一覧は下記よりご確認いただけます。
Emmetのチートシート