VSCode 箱推しで Emmet 担

Webナイト宮崎 Vol.17 〜てげフリーテーマで話したい〜 登壇資料

Transcript

1. VSCode 箱推しで Emmet 担 - Web Night Miyazaki vol.17 -
2. 高見 和也（Takami Kazuya） https://twitter.com/miiitaka https://www.facebook.com/miiitaka { Company: “株式会社まなびと” }, { Role: “Front-End Developer 兼 代表取締役” } https://github.com/miiitaka
3. 皆さんは推し活してますか？
4. 「推し活」とは、自分が推しているアイドルや俳優、キャラクターなどを愛でた り応援したりする活動のこと。もともとは、アイドルグループのお気に入りメン バーを「推しメン」と呼ぶようになったことから「推し」という表現が広まり、 そこから派生して「推し活」という言葉が生まれた。 特定のメンバーを担当して応援する「〇〇担」、 推す対象を変えることを「推し変（おしへん）」、 グループのメンバー全員をまるごと推すことを「箱推し（はこおし）」 と言う。 推し活（おしかつ） ※出典：Takapedia
5. ＼僕はVisual Studio Code を箱推ししています／
6. ＼そして Emmet 担です／
7. Emmet（エメット）※旧芸名：Zen Coding デビュー ２００８年 所属グループ VSCode、PHPStorm、Dreamweaver etc… 出身地 アメリカ合衆国 事務所 オープンソース 趣味 入力補完 特技 略記展開 カラオケの18番 残響散歌 ※画像は公式プロフィールページ
8. <!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>
9. !
10. <!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>
11. <!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>
12. <!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> <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>
13. <!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> nav>ul>(.list$>a{menu$})*5 </body> </html>
14. <!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> <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>
15. <!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> <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>
16. ① Visual Studio Code 初期加入メンバーなのでインストールなどが不要 ② 公式ファンブック（チートシート）がある ③ HTML だけでなくCSS や xsl にも対応 ④ 自分で略記表記をカスタマイズできる ⑤ 爆速でコーディングができるようになるのでさらなる推し活ができる 推しポイント
17. HTML 略記展開（例） nav>ul>(.list$>a{menu$})*5 nav要素 親子関係 暗黙の li 要素に class=“list”付与 ナンバリング a要素内に展開する テキスト ×5 （グルーピング）
18. CSS 略記展開（例） pos:a d:f m ff ta w50 → → → → → → position: absolute; display: flex; margin: ; font-family: serif; text-align: left; width: 50px;
19. 略記展開カスタマイズ（例） { "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]/" } } }
20. 問題！
21. <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 すればよいか？
22. 問題！ 全員オープン 指名カンニング ルーレット
23. 問題！ 答え
24. table>(.row$>(td>span)*3)*3
25. もう Emmet なしじゃ生き ていけない
26. ご清聴ありがとうございました。