はじめに
「コーディングに時間が掛かってしまう、、、」
「記述ミスの多発でいつもエラーに悩まされる、、、」
「もっと効率よくコーディングができるようになりたい、、、」
その悩み、実は簡単に解決できちゃいます。
今回の記事は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