はじめに

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

その悩み、実は簡単に解決できちゃいます。

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

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

VScode

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

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

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

Emmet

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

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

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

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

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

HTMLのEmmet

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

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

HTMLの決まり文句は ! で

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

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

!
<!-- ↑を記述して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 の強さです。笑

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

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

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

開始タグ無しの記法

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

実際のコードはこちら。

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

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

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

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

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

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

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

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

class属性やid属性の短縮記法

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

まず class属性 はこちら。

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

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

複数の class属性 はこちら。

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

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

id属性 はこちら。

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

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

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

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

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

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

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

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

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

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

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

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

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

複数のタグや入れ子構造

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

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

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

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

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

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

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

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

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

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

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

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タグの間に自動で移動 -->

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

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タグの間に自動で移動 -->

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

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

まとめ

とりあえず今回の記事で紹介した４つのショートカットが書けるようになれば、間違いなく 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

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

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

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

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