コーディングの効率化【Emment】 #VSCode

Emmetとは

Emmetは、HTMLやCSSを省略記法であり、これらを簡潔に記述するためのツールです。

もともとはZen-Codingというものだったらしく、その次期バージョンがEmmetです。

ちなみにVSCodeの場合は、標準でサポートされているので、改めてインストールする必要はありません。（初期設定の状態でもEmmetが使えます。）

Emmetを使用することで、タイプ数をかなり削減できるため、省略記法を習得すれば、かなりコーディング効率を上げることができます。

Emmetの使用方法(VScode)

Emmetは、特定の記述を入力した後に、Tabキーを押すだけで展開することができます。

実際にエディタを開いて、html:5また!と記述し、その後にTabキーを押してみてください。

そうすると、以下のようにHTMLの全体構造を一気に記述してくれます。めちゃくちゃ便利ですよね！！

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

ただ、初期設定のままだと、Tabキーを押しても実行されないときがあったり、<html lang="en">になっており、毎回「lang="ja"」に変更しなければならないため、少しだけ設定を追加します。

Emmetの設定(VScode)

Emmetの設定するには、まずメニューから「Code→基本設定→設定」から設定画面にアクセス。
検索窓で「Emmet」と検索して、「Emmet Preferences」を探す
「Emmet Preferences」の中にある「settings.jsonで編集」をクリックして、ファイルを開く
ファイルを開くことができたら、以下のように、
"emmet.triggerExpansionOnTab": true,
"emmet.variables": {"lang" : "ja"},
を追加
１つ目が、Tabキーを押した時に、Emmetが展開されるようにする設定で、２つ目がデフォルトの言語設定を日本語にする設定です。
※１つ目の項目については、もしすでにあるのであれば、追加しなくても問題ありません。

Emmetでよく使用する省略形【HTML編】

以下に例を載せます。

HTMLの雛形

こちらについてはすでに記載したとおり、html:5また!と記述し、その後にTabキーを押すと展開されます。

通常のHTMLタグ

<!-- 「h1+Tabキー」 -->
<h1></h1>

<!-- 「a+Tabキー」 -->
<a href=""></a>

<!-- 「img+Tabキー」 -->
<img src="" alt="">

<!-- 「div+Tabキー」 -->
 <div></div>

classやidを付けて展開する

タグにクラス名やid名をつけたいとき、以下のように「.」や「#」を付けて展開すると、classやidを付加した状態で展開することができます。

<!-- 「h1.title+Tabキー」 -->
<h1 class="title"></h1>

<!-- 「img.picture+Tabキー」 -->
<img src="" alt="" class="picture">

<!-- 「div#main+Tabキー」 -->
 <div id="main"></div>

HTMLを何も指定しないでclassかidだけを付けて展開すると自動的にdivタグになります。

例えば、「.title＋Tabキー」で展開すると<div class="title"></div>になり、「#main＋Tabキー」で展開すると、<div id="main"></div>となります。

複数のHTMLタグを入れ子で展開する

複数のタグを入れ子構造で記述したい時、以下のように、複数のHTMLタグを「>」で繋ぐことによって、入れ子構造を実現することができます。

<!-- 「header>nav+Tabキー」 -->
<header>
  <nav></nav>
</header>

複数のHTMLタグを続けて展開する

入れ子ではなく、HTMLタグを隣接する形で続けて記述したい場合は、複数のHTMLタグを「+」で繋ぎます。

<!-- 「h1+h2+img+p+Tabキー」 -->
<h1></h1>
<h2></h2>
<img src="" alt="">
<p></p>

繰り返しの展開

例えば、li要素でリストを作るときのように、繰り返しで同じタグを記述したい場合があります。

このような時は「ul>li*N」のように、Nの部分に数字を入れると、その数だけ繰り返しで展開することができます。

<!-- 「ul>li*3+Tabキー」 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Emmetでよく使用する省略形【CSS編】

1単語のプロパティの場合、基本は頭文字

Emmet記法	結果
w	width:;
h	height:;
m	magin:;
p	padding:;
c	color: 000;
t	top

2単語以上の場合や1文字の省略記法と重複する場合は2文字以上となる

Emmet記法	結果
ff	font-family:;
lh	line-height:;
ta	text-align:;
bd	border:;
fz	font-size:;
bgc	background-color:;

以下に例を載せます。

<!-- w230+Tabキー -->
width: 230px;

<!-- h20p+Tabキー -->
height: 20%;

<!-- d:b+Tabキー -->
display: block;

<!-- c#c+Tabキー -->
color: #ccc;

「w230」で展開すると「width: 230px」になります。このように、単位を指定せずに数字だけを入力すると、単位は「px」になります。

「h20p」のように、単位を入れて展開をすると「height: 20%」となり、指定した単位を記述することができます。

つまり、
単位の記述がない場合：px
p：%
e：em
r：rem
vw：vw
となります。

また、marginやpadding、borderのように、複数の値を入力する必要のあるプロパティは「-」で数値と数値の間を区切ると、複数の数値を入力することができます。

今回、取り上げたEmmentの省略記法をマスターすれば、かなりコーディング時間の効率化に繋がりますね！

私も使いこなせるようにしていきます^^

コーディングの効率化【Emment】