Visual Studio CodeでJavaScriptプログラミング

さくらクラブ 2020年2月号第7回 JavaScriptプログラミングもくもく勉強会の日

Transcript

1. Visual Studio Codeで JavaScriptプログラミング 2020年2月2日（日） 2020年2月号第7回JavaScriptもくもく勉強会 @さくらインターネット本社
2. About me 福井 洋（ふくい ひろし）（@echizenya_yota） （WordPress関連の個人事業主） http://e-yota.com/about_me/ https://speakerdeck.com/echizenyayota https://twitter.com/echizenya_yota コミュニティ活動 さくらクラブJavaScriptプログラミングもくもく勉強会 管理人 https://saku-love.doorkeeper.jp/events/94737 WordCamp Osaka 2019 実行委員会(スポンサーチーム担当) https://2019.osaka.wordcamp.org/organizers/
3. Visual Studio Codeとは MicroSoftが開発している 無料エディタ
4. Visual Studio Code ダウンロード画面 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
5. Visual Studio Codeの特徴 - Emmetが標準搭載されている
6. Emmetとは - HTML / CSS を効率的に書く記法
7. Visual Studio Codeを使うメリット - HTML / CSS を「爆速」でコーディング - JS / CSSファイルをワンクリックで作成
8. 「爆速」コーディングの紹介 1. HTMLのコーディング 2. scriptタグの記述とJSファイルの作成 3. CSS用のlinkタグの記述とファイルの作成
9. 1. HTMLのコーディング
10. “!” + tabキー
11. “!” + tabキー
12. “div#container” + tabキー
13. “div#container” + tabキー
14. “div.contents” + tabキー
15. “div.contents” + tabキー
16. “ul.colors>li*3” + tabキー
17. “ul.colors>li*3” + tabキー
18. 2. scriptタグの記述とJSファイルの作成
19. “script:src” + tabキー
20. “script:src” + tabキー
21. フォルダ名とファイル名を記述
22. Follow link
23. 3. CSS用リンクタグの記述とファイルの作成
24. “link:css” + tabキー
25. “link:css” + tabキー
26. Follow Link
27. Emmet Cheat Sheet https://docs.emmet.io/cheat-sheet/
28. ハッシュタグ #さくらクラブ
29. ご清聴ありがとうございました！
30. 自己紹介タイム 1. 名前 2. 興味のある技術 3. 今日やりたいこと