Visual Studio Codeで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. 今日やりたいこと