Emmetとは？
Emmet とは、HTMLやCSSなどの入力を補助してくれるVScodeの「拡張機能」と呼ばれているものです！短く略したコードをタイプすることで、本来反映されるべき長いコードに置換することができる仕組みになっています！
「インスタ」と打てば勝手に「インスタグラム」と自動で表記してくれる。
「東大」と打てば勝手に「東京大学」と自動で表記してくれる。
このようにイメージしてもらえればだいぶ親しみやすくなると思います！
まだあまりピンときていない方は、実例も交えて説明していくので、とりあえず下に読み進めていってください！🙌
Emmetの導入
冒頭でも紹介したとおり、EmmetはVSCodeの拡張機能に過ぎないので、まずは使えるように設定する必要があります！
以下に記す２つの工程を踏んでください！
lang="ja"に変更
HTMLの新規ファイルを作成し、! と入力してTabキーを押してください！
すると以下のようにHTMLの雛形ができると思います！
<!DOCTYPE html>
<html lang="en">
<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>
このとき上から2行目が、デフォルトの設定だと
<html lang="en">
と表記されているので
<html lang="ja">
と変更してあげます！（言語設定を日本語に変えただけです）
初めからこのようになっていたら、飛ばしてもらって大丈夫です！
settings.jsonにコードの追加
VSCodeでsettings.jsonのファイルを開いて以下のコードを追加してください！
（見つからない場合は作成しましょう！）
"emmet.variables":{
"lang": "ja"
}
これでEmmetを使う準備が整いました！
ここからは、Emmetを使った効率の良いコードの書き方を説明していきます！
プログラミングをする際の決まり文句みたいなものですが、実際にコードをPC上で打ってみることによって理解していくものなので、説明を読むだけでなくVSCode上でアウトプットまでしっかりおこなうようにしてください！🙇♂️
説明する内容は以下の7つです！
※ここでは、id名class名ともにakitoにしておきます！
Emmetの使用例
①idのついたdivタグの生成
<div id="akito"></div>
id名の先頭に#と記すことが肝です！
idは詳細度がかなり高いので、CSSでの記述には注意が必要です！
#akito
と打ち、Tabキーを押すことによって生成することができます！
（Emmetを使う際はTabキーの入力が必須になるので、ここからは割愛して進めていきます）
②classのついたdivタグの生成
<div class="akito"></div>
class名の先頭に.を付けましょう！
.akito
③classのついたspanタグの生成
<span class="akito"></div>
spanタグはdivタグとは異なるインライン要素として扱われるので前後で自動改行がおこなわれないようになっています！
span.akito
⭐️おまけ⭐️
class名の場合は.class名、id名の場合は#id名で基本なんでも生成することができます！
察しのいい人はもう気づいていたのではないでしょうか？👀
しかし、実際に開発していく際には1つのdivタグの中にclassとidどちらも付与する場合が多いです！
なので、以下のように２つ一気に生成するやり方も説明しておきます！
<div class="akito" id="akito"></div>
この際は以下のように入力してあげましょう！
.akito#akito
classとid反対に書いた場合は、そのままの順番でVSCode上に反映されます！
ここからはネスト（ネスティング）構造のやり方を説明していきます！
少し複雑になりますが、あまり難しくはないので気負うこと必要はありません！笑
④idのついたdivタグ+その中にclassのついたdivタグの生成
<div id="akito">
<div class="akito"></div>
</div>
> の使い方が肝です！
#akito>.akito
⑤idのついたdivタグ+その中にclassのついた複数のdivタグの生成
<div id="akito">
<div class="akito"></div>
<div class="akito"></div>
<div class="akito"></div>
</div>
ここでは3つのdivタグをネストしていますが、数は指定することができます！
#akito>.akito*3
⑥idのついたdivタグ+順番のついたclassのついた複数のdivタグの生成
<div id="akito">
<div class="akito-1"></div>
<div class="akito-2"></div>
<div class="akito-3"></div>
</div>
-$ 追加することで順番を付与できます！
チーム開発のときは他の人にもわかりやすく見せることができます！
#akito>.akito-$*3
⑦idのついたdivタグ+順番のついたclassのついた複数のdivタグの生成（変化球）
<div id="akito">
<div class="akito-01"></div>
<div class="akito-02"></div>
<div class="akito-03"></div>
</div>
$ を1個追加するだけで先頭に0を付与できます！（1桁の数に限る）
#akito>.akito-$$*3
以上7つになります！
最後に
Emmetを使えばコードを書く時間を短縮できます！
特にHTMLはJavaScriptやRubyなどと違って構文を書くこともなく簡単に実装することができるので、どんどんEmmetを用いて開発を効率よく進めていきましょう！！！🙌