4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-10

はじめに

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

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

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

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



VScode

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

スクリーンショット 2020-12-10 17.34.52.png

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

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



Emmet

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

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

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

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

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



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

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

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



まとめ

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

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

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

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





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

4
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?