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

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

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

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

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

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

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


```html:
!
```

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


```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)
1. Emmetの設定するには、まずメニューから「Code→基本設定→設定」から設定画面にアクセス。

2. 検索窓で「Emmet」と検索して、「Emmet Preferences」を探す

3. 「Emmet Preferences」の中にある「settings.jsonで編集」をクリックして、ファイルを開く

4. ファイルを開くことができたら、以下のように、
"emmet.triggerExpansionOnTab": true,
"emmet.variables": {"lang" : "ja"},
を追加
１つ目が、Tabキーを押した時に、Emmetが展開されるようにする設定で、２つ目がデフォルトの言語設定を日本語にする設定です。
※１つ目の項目については、もしすでにあるのであれば、追加しなくても問題ありません。

##Emmetでよく使用する省略形【HTML編】
以下に例を載せます。
###HTMLの雛形
こちらについてはすでに記載したとおり、`html:5`また`!`と記述し、その後にTabキーを押すと展開されます。

###通常のHTMLタグ
```html:
<!-- 「h1+Tabキー」 -->
<h1></h1>

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

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

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

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

```html:
<!-- 「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タグを「>」で繋ぐことによって、入れ子構造を実現することができます。

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

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

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

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

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

```html:
<!-- 「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:;  | 

以下に例を載せます。

```css:
<!-- 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の省略記法をマスターすれば、かなりコーディング時間の効率化に繋がりますね！

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

##参考
https://docs.emmet.io/cheat-sheet/