VSCode 箱推しで Emmet 担

VSCode 箱推しで Emmet 担 - Web Night Miyazaki vol.17 -

高見和也（Takami Kazuya） https://twitter.com/miiitaka https://www.facebook.com/miiitaka { Company: “株式会社まなびと” }, {
Role: “Front-End Developer 兼代表取締役” } https://github.com/miiitaka

皆さんは推し活してますか？

「推し活」とは、自分が推しているアイドルや俳優、キャラクターなどを愛でたり応援したりする活動のこと。もともとは、アイドルグループのお気に入りメンバーを「推しメン」と呼ぶようになったことから「推し」という表現が広まり、そこから派生して「推し活」という言葉が生まれた。特定のメンバーを担当して応援する「〇〇担」、推す対象を変えることを「推し変（おしへん）」、グループのメンバー全員をまるごと推すことを「箱推し（はこおし）」と言う。推し活（おしかつ） ※出典：Takapedia

＼僕はVisual Studio Code を箱推ししています／

＼そして Emmet 担です／

Emmet（エメット）※旧芸名：Zen Coding デビュー２００８年所属グループ VSCode、PHPStorm、Dreamweaver etc… 出身地アメリカ合衆国事務所
オープンソース趣味入力補完特技略記展開カラオケの18番残響散歌 ※画像は公式プロフィールページ

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> </body> </html>

initial-scale=1.0"> <title></title> </head> <body> <nav> <ul> <li class="list1"><a href="">menu1</a></li> <li class="list2"><a href="">menu2</a></li> <li class="list3"><a href="">menu3</a></li> <li class="list4"><a href="">menu4</a></li> <li class="list5"><a href="">menu5</a></li> </ul> </nav> </body> </html>

initial-scale=1.0"> <title></title> </head> <body> nav>ul>(.list$>a{menu$})*5 </body> </html>

initial-scale=1.0"> <title></title> </head> <body> <nav> <ul> <li class="list1"><a href="">menu1</a></li> <li class="list2"><a href="">menu2</a></li> <li class="list3"><a href="">menu3</a></li> <li class="list4"><a href="">menu4</a></li> <li class="list5"><a href="">menu5</a></li> </ul> </nav> </body> </html>

① Visual Studio Code 初期加入メンバーなのでインストールなどが不要 ② 公式ファンブック（チートシート）がある ③ HTML だけでなくCSS
や xsl にも対応 ④ 自分で略記表記をカスタマイズできる ⑤ 爆速でコーディングができるようになるのでさらなる推し活ができる推しポイント

HTML 略記展開（例） nav>ul>(.list$>a{menu$})*5 nav要素親子関係暗黙の li 要素に class=“list”付与ナンバリング
a要素内に展開するテキスト ×5 （グルーピング）

CSS 略記展開（例） pos:a d:f m ff ta w50 → →
→ → → → position: absolute; display: flex; margin: ; font-family: serif; text-align: left; width: 50px;

略記展開カスタマイズ（例） { "variables": { "lang": "ja" }, "html": { "snippets":
{ "doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+t itle)+body", "img": "img[src alt width height loadng=lazy]/" } } }

問題！

<table> <tr class="row1"> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr class="row2"> <td><span></span></td>
<td><span></span></td> <td><span></span></td> </tr> <tr class="row3"> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> </table> 問題：以下の HTML を略記展開するにはどう Emmet すればよいか？

問題！全員オープン指名カンニングルーレット

問題！答え

table>(.row$>(td>span)*3)*3

もう Emmet なしじゃ生きていけない

ご清聴ありがとうございました。

VSCode 箱推しで Emmet 担

VSCode 箱推しで Emmet 担

Kazuya Takami

More Decks by Kazuya Takami

Other Decks in Business

Featured

Transcript