デイトラ　Web制作コース　初級編　DAY11 - 12　【Emmet・スニペットでコーディングスピードを高める】

こんにちは！TAO（タオ）です。
ご覧いただきありがとうございます。

今回の学習は「Emmet機能」と「スニペット」についての内容でした。

本記事は、学習の中で得たことをアウトプットすることを目的としています。
サイト制作に挑戦する中で学んだ知識や経験を、初心者目線でまとめました。
読みづらい部分もあるかもしれませんが、最後までお付き合いいただけると嬉しいです！

Emmet

Emmetとは

HTMLやCSSを短く簡単に記述できる記法。
最少の記述でコードを生成でき、手作業で長いコードを書く手間を省くことができる便利なツールです。
VS Codeは標準で対応しているのでインストール不要です。

例えば、div.container　と入力すると、

<div class="container"></div>

上記の様に変換されます。
一瞬でコードが生成されるので魔法みたいですね。

基本

要素
タグ名を記述しEnter  or  tabキーを押すと展開されます。
例）
div + Enter　or　tabキー

<div></div>

属性
タグ名を記述し「#」または「. 」（ドット）で区切ります。
例）
p.text 

<p class="text"></p>

ドットの部分を「#」にするとid属性になります。

入れ子
タグ名　>　タグ名
例）
ul>li

 <ul>
    <li></li>
 </ul>

nav>ul>li>aのように深くすることもできます。

<nav>
   <ul>
     <li>
       <a href=""></a>
     </li>
   </ul>
</nav>

隣接
タグ名　＋　タグ名
例）
header+main+footer

<header></header>
<main></main>
<footer></footer>

繰り返し
タグ名　＊　回数
例）
div*3

 <div></div>
 <div></div>
 <div></div>

応用やCSSもありますが省略させていただきます。
以下の動画で詳しく解説されています。

チートシートはこちら↓↓

Cheat Sheet

以下の記事で簡単にですがEmmetについても触れています。

紹介したのは基本のみでしたが、私は基本を使用するだけでスピードが大幅に向上しました。
すぐに思いつかない場合は、無理して使わなくもいいと思います。
少しずつ引き出しを増やしてスピードの向上を目指していきましょう。

---

スニペット

おすすめしていた２つのスニペット集を紹介します。

ユーザースニペット

予めコードを登録しておいて、短いコードで呼び出すための機能です。
毎回1からコードを書くのは非効率です。使い回せるコードを登録しておくことでコーディングの効率化に繋がります。
普段からよく使うコードを登録しておくと便利です。

コードを登録する際は以下のようなフォーマットに記述しますが、初心者からすると「？？？」となると思います。

{
  //ここから
  "スニペット名": {
    "prefix": "呼び出すための短縮語",
    "body": [
      "展開されるコード",
      "展開されるコードの2行目",
      "..."
    ],
    "description": "スニペットの説明文" //任意
  }
  //ここまでが1つのスニペット
}

初心者にとっては、登録方法が少し複雑に感じると思うので下記のNotionで管理することをおすすめします。

↓登録方法の記事をのせておきます。

【コーディングが爆速に！】ユーザースニペットとは？【Visual Studio Code】

VSCodeにコードスニペットを登録して効率的にコーディング！ | HPcode（えいちぴーこーど）

Notionで管理する

Notionでスニペットを管理することにより、画像の挿入や参考記事、手順を書くことができます。
簡単にいうとWeb版のメモ帳と考えるとわかりやすいかもしれません。
ユーザースニペットとは違い、説明書きや参考記事を載せておくことができ、たまにしか使わないコードも使いやすくまとめることができます。
他にもタスク管理やプロジェクト管理など、カスタマイズができるので利用しやすいと思います。

↓は実際に私が使っているものです。
画像のようにまとめ、再利用できるようにしています。

詳しく知りたい方は↓の記事にて解説されているので参考にしてください。

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】｜しょーごログ

Notionでコードストックする方法

まとめ

・効率的にコードを書くためには、ツールの使い方を理解することが大事。
・活用次第では作業時間を大幅に短縮し、正確なコードを素早く生成できる。
・無理にEmmetに拘らなくてもいい。まずは簡単なものから
・初心者のスニペット集はNotionでの管理がおすすめ！

さいごに

私はEmmetやスニペット集に関して、できる範囲からコツコツ進めています。
時間はかかりますが、いつの間にか頭の中でEmmetのイメージができたり、すぐにユーザースニペットの呼び出しコードを打てるようになってきます。
小さいことを積み上げていくことが大事だなと感じました。
今後も少しずつでもいいので積み上げていきたいと思います。

最近noteの更新頻度が遅くなっていますが、今後も投稿を続けていきますのでよろしくお願いします。

最後まで読んでいただき、ありがとうございました。