【作業時間が約半分に！】VScodeでHTMLを書く速さが倍になる記述方法４選【具体例あり】

<br>

## はじめに
「コーディングに時間が掛かってしまう、、、」
「記述ミスの多発でいつもエラーに悩まされる、、、」
「もっと効率よくコーディングができるようになりたい、、、」

<font size=5>その悩み、実は<font color=red>**簡単に解決**</font>できちゃいます。</font>
<br>

今回の記事は**VScodeで標準搭載されている機能**を用いて、`HTML` のコーディング速度を、簡単に**爆速化**させる方法を解説していこうと思います。

結論から言いますと、VScodeでのコーディングは `Emmet(エメット)` と言うショートカットを用いる事で、**効率良くコードを書く事**ができます。
<br>
<br>

## VScode
まずそもそもVScodeとは何か？について説明すると、マイクロソフト社が出しているIDE(統合開発環境)になります。まあ簡単に言えば、**いろいろな事ができるソースコードエディタ**ってことです。

![スクリーンショット 2020-12-10 17.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/8ede8fd6-d076-50b3-6a70-139e06b0c0db.png)

この記事はこのVScodeの話になりますので、まだインストールされていない方は、公式ページよりダウンロードを↓

公式ページ：https://azure.microsoft.com/ja-jp/products/visual-studio-code/
<br>
<br>

## Emmet
次に `Emmet` とは何か？について説明すると、`短縮記法` と呼ばれる書き方ができるプラグインのことになります。

要するに、**特定の書き方**をすることによって、開始タグや閉じタグ、良く使うクラスなどを、<font color=red>**短縮して一気に書く事**</font>ができるのです。

通常のエディタであれば、これはプラグインで機能拡張をする必要があるのですが、VScodeにはインストール時点でこの `Emmet` 機能が備わっています。(なんと初心者に優しいことか、、、)
<br>

ただし、この `Emmet` は便利なのですが、**ショートカットの種類が多すぎて覚えられない問題**があります。(実際に僕も最初は苦労しました笑)

そこで次からは実際に、このVScodeに標準搭載されている `Emmet` の機能の中でも、`HTML` で特に<font color=red>**利用頻度の高い４つのショートカット**</font>を厳選し、最小限の学習コストでスピーディーな開発ができるように、解説をしていきます！
<br>
<br>

## HTMLのEmmet
今回ご紹介するのは、`HTMLファイル内` でのショートカット記法になりますので、まずは `拡張子.html` のファイルを準備して頂くようにお願いします。

準備ができましたら、早速ショートカットを実際に書いて `Emmet` に慣れていきましょう！
<br>
<br>

### HTMLの決まり文句は ! で
最初は `HTML` を書く際に、必ず必要になる `htmlタグ` `headタグ` `bodyタグ` の記述を、**たった一文字**で簡単に作成できてしまうショートカットについてです。
<br>

言葉で説明するのは難しいので、実際のコードをご覧ください。

```html
!
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<!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>
```

はい、これだけです。
これが `Emmet` の強さです。笑
<br>

この**エクスクラメーションマーク(通称：ビックリマーク)**を使用する事で、今まで煩雑に感じていた `htmlタグ` `headタグ` `bodyタグ` が一瞬で生成できます。しかも良く利用する `metaタグ` まで。

普段からあまり `HTML` のコードを書かない方だと、最初の `metaタグ` の記述などは、思い出すだけで時間のロスだったと思いますが、これがあれば**無駄な時間を割かずに済む**ので、かなり便利です。

>ただし、lang属性が英語表記の "en" で出てきますので、日本語のページを作成する場合は、ここを忘れずに "ja" と変更するのをお忘れなく。

<br>
<br>

### 開始タグ無しの記法
次に `HTMLタグ` のショートカットについてです。全てのタグの紹介はできないので、一部良く利用するものを抜粋して解説いたします。
<br>

実際のコードはこちら。

```html
link
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<link rel="stylesheet" href="">
<!-- カーソルは"と"の間に自動で移動 -->
```

```html
h1
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<h1></h1>
<!-- カーソルはタグの間に自動で移動 -->
```

```html
a
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<a href=""></a>
<!-- カーソルは"と"の間に自動で移動 -->
```

こんな感じです。
**もう閉じタグ忘れでエラーになる事はありません。**(多分)

さらに嬉しいのが、ショートカットで生成したあとは、ちゃんと次に記述をするであろう場所に、**カーソルが自動で移動してくれている**ので、これもかなり作業効率の短縮に繋がります。
<br>
<br>

### class属性やid属性の短縮記法
次に `HTMLタグ` を生成する際のと同時に、`class属性` や `id属性` も合わせて生成してくれるショートカットの書き方についてです。(こちらも一部の紹介)

まず `class属性` はこちら。

```html
h2.title
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<h2 class="title"></h2>
<!-- カーソルはタグの間に自動で移動 -->
```
<br>

複数の `class属性` はこちら。

```html
h2.title.inner
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<h2 class="title inner"></h2>
<!-- カーソルはタグの間に自動で移動 -->
```
<br>

`id属性` はこちら。

```html
section#main
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<section id="main"></section>
<!-- カーソルはタグの間に自動で移動 -->
```
<br>

`class属性` と `id属性` の両方を生成する場合はこちら。

```html
p#sub.sub-title
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<p id="sub" class="sub-title"></p>
<!-- カーソルはタグの間に自動で移動 -->
```
<br>

さらに `divタグ` の場合はこちら。

```html
.container
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<div class="coutainer"></div>
<!-- カーソルはタグの間に自動で移動 -->
```

```html
#top
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<div id="top"></div>
<!-- カーソルはタグの間に自動で移動 -->
```

```html
#top.container
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<div id="top" class="container"></div>
<!-- カーソルはタグの間に自動で移動 -->
```

これでもう、これからは *class=""* や *id=""*、なんなら *div* も打つことはありません。これだけ習得するだけでも、**作業効率は劇的に変わる**のが、目に見えてわかると思います。(感動)
<br>
<br>

### 複数のタグや入れ子構造
さらにこれは余裕がある方向けにはなりますが、面倒な**複数のタグ**や**入れ子構造**も、`Emmet` を利用すれば**簡単に記述する事**ができます。

まず**複数のタグ**を生成するコードはこちら。

```html
li*5
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- カーソルは最初のタグの間に自動で移動 -->
```
<br>

次に**入れ子構造**を生成するコードはこちら。

```html
ul>li
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<ul>
  <li></li>
</ul>
<!-- カーソルはliタグの間に自動で移動 -->
```
<br>

そして**複数のタグ**と、**入れ子構造**を生成するコードはこちら。

```html
ul>li*5
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<!-- カーソルは最初のliタグの間に自動で移動 -->
```
<br>

さらに**多重入れ子構造**はこちら。

```html
ul>li*5>ul>li*3
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>
<!-- カーソルは最下層にある最初のliタグの間に自動で移動 -->
```
<br>

class属性も付与した、極め付けはこちら。

```html
ul.order-lists>li*5>ul.order-list>li*3.name
<!-- ↑を記述してenter -->

<!-- 完成する記述がこちら↓ -->
<ul class="order-lists">
  <li>
    <ul class="order-list">
      <li class="name"></li>
      <li class="name"></li>
      <li class="name"></li>
    </ul>
  </li>
  <li>
    <ul class="order-list">
      <li class="name"></li>
      <li class="name"></li>
      <li class="name"></li>
    </ul>
  </li>
  <li>
    <ul class="order-list">
      <li class="name"></li>
      <li class="name"></li>
      <li class="name"></li>
    </ul>
  </li>
  <li>
    <ul class="order-list">
      <li class="name"></li>
      <li class="name"></li>
      <li class="name"></li>
    </ul>
  </li>
  <li>
    <ul class="order-list">
      <li class="name"></li>
      <li class="name"></li>
      <li class="name"></li>
    </ul>
  </li>
</ul>
<!-- カーソルは最下層にある最初のliタグの間に自動で移動 -->
```

最後にご紹介させていただいような複雑なコードは、慣れるまで時間が掛かるかもしれませんが、**たったの１行で作れちゃう**ので、言うまでもなく作業効率は爆上がりします。
<br>

また上記のように `ulタグ` `liタグ` で多重入れ子構造にする事は、稀かもしれませんが、例えばこれが `tableタグ` などの場合は、**かなり重宝する**ので、余裕のある方は習得されるのがオススメになります！
<br>
<br>

## まとめ
とりあえず今回の記事で紹介した**４つのショートカット**が書けるようになれば、間違いなく `HTML` でのコーディングは、**爆速化**すること間違い無しです。

最後にもう一度、紹介したショートカットの記法をまとめます。

```html
<!-- htmlタグ、headタグ、bodyタグ、metaタグ生成 -->
!

<!-- 各タグの開始タグと閉じタグを生成 -->
link
h1
a

<!-- class属性とid属性付きのタグを生成 -->
h2.title
h2.title.inner
section#main
p#sub.sub-title
<!-- divタグの場合 -->
.container
#top
#top.container

<!-- 複数のタグや入れ子構造、多重入れ子構造の生成 -->
li*5
ul>li
ul>li*5
ul>li*5>ul>li*3
ul.order-lists>li*5>ul.order-list>li*3.name
```
<br>

因みに補足で説明すると、他にも**複雑な記述を書くショートカット**や、`CSS` も `Emmet` でショートカットが使用できたりするので、興味のある方は**チートシート**を共有しておきますので、ぜひご覧ください！

**Emmet cheat sheet**
https://docs.emmet.io/cheat-sheet/

それでは、最後まで読んでいただき、ありがとうございました！
また次の記事もお楽しみに！
<br>
<br>
<br>

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack
<br>