Emmetでコーディングを効率化しよう

Emmetは、コードを簡潔に記述するための強力なツールです。使いこなせるようになればかなりコーディングの効率が上がるのでぜひ最後までご覧ください。

これから紹介するものはVisual Studio Codeで使用することができます。

基本的な操作について
基本的なHTML構造
要素名
クラス名、id名
数を指定する
複数の要素を並べる
まとめ

基本的な操作について

Emmetは、Visual Studio Codeさえ使っていれば、だれでも使用することができます。

使い方はとても簡単で、コードを入力した後にTabキーを押すだけです。

それでは、以下に一般的なEmmetを紹介していきます。

基本的なHTML構造

基本的なHTMLの構造を手で毎回打っている人いませんか、あれめんどくさいですよね。しかし、Emmetを使用すれば、一瞬でHTMLの基本構造が作成できます。

「!」を打ってTabキーを押せば以下のHTMLのひな型が作成できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

初心者の方は、知らなかった人もいるのではないでしょうか。これからは便利なので使っていきましょう。

要素名

それぞれの要素名を<>なしで打ってEnterを押すだけで、その要素のタグを作成できます。

以下がコード例です。

h1 → <h1></h1>
p → <p></p>
img →<img src="" alt="">

imgなどは、srcなどの一緒に扱われることの多い属性も一緒に出してくれます。

クラス名、id名

要素名の後にCSSのセレクタと同じように、id名やクラス名を指定するだけでそれぞれの名前付きのタグが作成されます。

以下がコード例です。

a.btn → <a href="" class="btn"></a>
section#about → <section id="about"></section>
.content → <div class="content"></div>

上記のコードのように、要素名なしでクラス名だけ記述するとクラス名付きのdivタグが作成されます。このEmmetはかなりコーディングの効率が上がるので使って慣れていきましょう。

数を指定する

要素名の後ろに「*」をつけて数を指定すると、その数だけ要素が作成されます。

以下がコード例です。

p*3 → <p></p>
       <p></p>
       <p></p>
br.space*2 →<br class="space"><br class="space">

上記で紹介した、クラス名を付けるEmmetとも併用して使えるのでどんどん使って慣れていきましょう。

複数の要素を並べる

Emmetは一つの要素だけではなく、複数の要素を同じ階層に並べたり、入れ子にしてコードに変換できます。

以下がコード例です。

a.link>p →  <a href="" class="link"></a>
             <p></p>
ul>li*3>a → <ul>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
             </ul>

上記のコードのように紹介したEmmetを組み合わせることで、一気にコードが書けるので慣れてくると効率が爆上がりします。

ここまでくると複雑で難しいかもしれませんが、慣れてくるとそこまで難しくないのでガンガン使っていきましょう。