こんにちは。まつもと（Twitter:@matsumoto_54111）です(^^)/
先日のブログでデイトラのWeb制作コースを始めたと書きましたが、現在は少し進んでDAY6まで終了したところです！
今日はデイトラで知ったことの中で特に感動した、Emmetについて書いていこうと思います。
- Emmetとは？
- Emmetの使用例（チートシートあり）
- Emmetを使うメリット
Emmetとは？
Emmetは、テキストエディタで使用できるプラグインです。
HTMLやCSSのコードの記述を補助してくれるもので、これを使うとコードを書くのがかなり楽になります。
テキストエディタは様々な種類があります（VS code, Sublime Text, Atom, Bracketsなど）。
この中でも、VS codeなら初めからEmmetが使えるようになっているので便利です。私も最近はVS codeを使っています。
Emmetの具体的な使用例ですが、「!」と「Tab」ボタンを押せば、勝手に以下の内容が記述されます。
（VS codeの初期設定では<html lang=”en”>ですが、「設定」から<html lang=”ja”>へ変更可能です）
これは毎回書く必要があるものですから、いちいちコードを書かなくていいというのはとても助かりますよね。
後述しますが、他にも省略できるものが本当にたくさんあります。
テキストエディタについては、私はこれまでBracketsやSublime Textを使っていたのですが、デイトラでオススメされているVS codeを数日前に初めて使いました。
そしてこの便利なEmmetに感動！コードをさくさく書けるというのが快感です(*^^*)
Emmetの使用例（チートシートあり）
さて、「!」+「Tab」でHTMLの書き出しに必要なコードが出てくると前述しましたが、Emmetでできることは他にもたくさんあります。
例えば、
・「#id名」+ Tab→ <div id=”id名”></div>と記述される
・「.class名」+ Tab→ <div class=”class名”></div>と記述される
などです。
つまり、「id=”〇〇”」や「class=”〇〇”」と書く必要がないんですね。
因みに
・「タグ名」+「#id名」+ Tab→<タグ名 id=”id名”></タグ名>とすることもできます。
（例）
「section#id名」+ Tab → <section id=”id名”></section>と記述される
（タグ名を指定しない場合は自動的に divタグ が書かれます。）
他にも例を挙げればきりがないほど様々なパターンがあるのですが、チートシートにまとめられています。
チートシートはこちら→https://docs.emmet.io/cheat-sheet/
チートシートに記載のある通り、CSSにも適用されます。
（例）
・「m」+ Tab → margin: ; と記述される
・「p」+ Tab → padding: ; と記述される
・「bgc」+ Tab → background-color: ; と記述される
Emmetを使うメリット
このプラグインを使うメリットは、
- 時間短縮になる
- スペルミスがなくなる
- サクサクコードを書けるので楽しい！
だと思います。
時間短縮については言うまでもありませんよね。
また、プログラミングの躓くポイントでよくあるのがスペルミスだと思います。
私もCSSに記述したことが効かなくてじっくりとコードを読み返し、「あーここのスペルが違ったのか！」と気づくまでに時間がかかったということが何度もあります。
どんどん勉強を進めたいのにもったいないですよね。
ですが、Emmetを使えばそもそもスペルを書く必要がない場合が多いんです。
これではスペルミスのしようがありません。
そしてプログラミング学習の中で最も大事なことは、「プログラミングが楽しい」と思うことではないでしょうか。そうでないと学習を継続できないですよね。
Emmetを使ってストレスフリーでコードをどんどん書けるというのが、楽しさに繋がると私は思いました。
おわりに
さて、今回は私がデイトラで知ったことの中で感動したものの1つ、Emmetについて書きました。
このプラグインは有名だと思うので既に使っている方がかなり多いと思いますが、私のように勉強中の方のお役に立てると嬉しいです。
さぁ2020年もあと21日。「今年は頑張った！」と思えるよう、これからも勉強を続けていきます。
最後までお読みいただき、ありがとうございました！(*^^*)
