Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 9コーディングのスピードを上げるための便利なEmmet機能を覚えよう
今回はコーディングのスピードを上げるための便利なEmmet機能を紹介していきます。
実はこれまでのデイトラのライブコーディング動画では、Emmetやショートカットキーの使用は必要最低限で解説してきました。
コーディングが早い人は少しでも業務を効率化するため、ありとあらゆるEmmetやショートカットキーを駆使して作業しています。どれもほんの数秒程度の効果しかありませんが、その積み重ねで最終的には多くの時間を削減できるようになります。
ぜひ挑戦して爆速でコーディングしましょう！
01.【Emmet略語の展開】HTML基本編
- 0:00 〜 はじめに
- 1:00 〜 要素
- 1:52 〜 idおよびclass属性
- 4:03 〜 入れ子
- 5:47 〜 隣接
- 7:48 〜 繰り返し
- 10:23 〜 要素の省略
この先の動画でテキストをコメントアウトするショートカットを使用していますが、Macの方は「cmd + /」Windowsの方は「Ctrl + /」でコメントアウトの操作ができます。
まずはHTMLの基本のEmmetを見ていきましょう。
HTMLのEmmetでは「要素」「idおよびclass属性」「入れ子」「隣接」「繰り返し」の組み合わせを使いこなせれば、まずは問題ありません！
要素
div → <div></div>
h2 → <h2></h2>
id属性およびclass属性
div#idName → <div id="idName">
div.className → <div class="className">
入れ子
ul>li
↓
<ul>
<li></li>
</ul>
隣接
header+main+footer
↓
<header></header>
<main></main>
<footer></footer>
繰り返し
ul>li*3
↓
<ul>
<li></li>
<li></li>
<li></li>
</ul>
02.【Emmet略語の展開】HTML応用編
- 0:00 〜 上の階層に戻る
- 2:40 〜 グルーピング
- 5:50 〜 属性
- 9:10 〜 テキスト
- 9:53 〜 連番
- 12:35 〜 閉じタグにコメントアウトの自動挿入
- 14:28 〜 HTMLの型を展開
次にHTMLの応用編のEmmetを見ていきましょう。
「上階層に戻る 」「グルーピング」「属性」「テキスト」「連番」「閉じタグにコメントアウトの自動挿入」「HTMLの型を展開」を使って、より効率的にEmmetを使ってみましょう！
上階層に戻る
ul>li^p
↓
<ul>
<li></li>
</ul>
<p></p>
繰り返し
dl>(dt+dd)*3
↓
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
属性
img[alt="altName"]
↓
<img src="" alt="altName">
input:email
↓
<input type="email" name="" id="">
テキスト
p{テキスト}
↓
<p>テキスト</p>
連番
section.section$*3
↓
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
コメントアウトの自動挿入
div.className|c
↓
<div class="className"></div>
<!-- /.className -->HTMLの型を展開
!
↓
<!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が思い浮かばない場合は、複雑にならない程度で展開し、行の複製などを使うのがおすすめです。
Emmetにこだわりすぎずに使いましょう！
03.【Emmet略語の展開】CSS基本編
CSSのEmmetの基本の書き方は、「プロパティ名(省略形):値(省略形)」となります。
また「 : 」は省略して書くことができるプロパティが多いです。
プロパティと値を1文字2文字ずつ入力することで、ある程度は使いこなすことができます。
うまく展開できないプロパティについては、チートシートを見ながら覚えていきましょう！
- p10 → padding: 10px;
- fz16 → font-size: 16px;
- m:a → margin: auto;
- df → display: flex;
04.【Emmet略語の展開】CSS応用編
値の複数指定
p10-20-30-20
↓
padding: 10px 20px 30px 20px;プロパティの複数指定
w10+h20
↓
width: 10px;
height: 20px;05.Emmetアクション① バランス内側・外側
- 0:00 〜 バランス外側
- 7:30 〜 バランス内側
バランス外側（おすすめ : ★★★★★）
現在のカーソルや選択位置の外側のタグをまとめて選択できます。
バランス内側（おすすめ : ★★）
現在のカーソルや選択位置の内側のタグをまとめて選択できます。
バランス外側の方が使いやすい場面が多いです...
06.Emmetアクション② 値の増加・減少
1ずつ減少・増加（おすすめ : ★★★★★）
数字の値を1刻みに増加・減少できます。
CSSの値の調整におすすめです！もちろんHTMLで使用することもできます。
10ずつ減少・増加（おすすめ : ★★★）
数字の値を10刻みに増加・減少できます。
CSSの値の調整におすすめです！もちろんHTMLで使用することもできます。
0.1ずつ減少・増加（おすすめ : ★★★）
数字の値を0.1刻みに増加・減少できます。
CSSの値の調整におすすめです！もちろんHTMLで使用することもできます。
07.Emmetアクション③ ラップ変換・タグの更新・数式の評価
- 0:00 〜 ラップ変換
- 3:35 〜 タグの更新
- 5:22 〜 数式の評価
ラップ変換（おすすめ : ★★★★★）
選択部分を特定のタグで包むことができます。
VS Code拡張機能の「htmltagwrap」でも同じことができるので、使いやすい方でOKです。
タグの更新（おすすめ : ★★★）
divタグをsectionタグに変更したい場合などに要素を更新することができます。
VS Code拡張機能の「Auto Rename Tag」でも同じことができるので、使いやすい方でOKです。
VS Codeに拡張機能をあまり入れたくない人にはEmmetアクションがおすすめです！
数式の評価（おすすめ : ★★）
単純な数式を計算してくれます。
使う場面は限られますが、慣れてる人にとっては便利な機能です！
08.Emmetアクション④ イメージサイズの更新・行のマージ
- 0:00 〜 イメージサイズの更新
- 2:37 〜 行のマージ
イメージサイズの更新（おすすめ : ★★★★★）
imgタグにwidht属性とheight属性を付与してくれます。
レイアウトシフト対策のため、imgタグにはwidht属性とheight属性を指定することが推奨されています。
行のマージ（おすすめ : ★★）
HTMLの複数行を一行に結合するEmmetアクションです。
使用頻度はあまり多くないため、ショートカットキーを割り当てなくても問題ありません。
09.【おまけ！】おすすめのVS Codeキーバインディング設定
Emmetから少し話が逸れますが、コーディングが早くなるためのVS Codeのおすすめ設定を紹介します！
キーバインディング設定とは、特定のキーボードキーの組み合わせに、特定のアクション（コマンド）を割り当てる設定のことを指します。Macの場合Cmd + Cを押すと「コピー」コマンドが実行されるようなイメージです。
VS CodeにはEmmetアクションの他にも様々なコマンドが用意されていて、そのコマンドの中にはキーバインドが標準で割り当てられていないコマンドも多くあります。
便利なコマンドにキーバインディングを追加して、ショートカットキーから使えるようにしていきましょう！
10.【おまけ！】その他おすすめのVS Code設定
header-logoのようなハイフンで繋がれた単語をダブルクリックで選択した場合、「 - 」で単語が区切られて選択されます。
単語の区切りから「 - 」を抜くことで、header-logoをダブルクリックで一括選択できます。