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

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

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

61e8d2d797a37913aafaeb8e8b38c373?s=128

echizenyayota

February 02, 2020
Tweet

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