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

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

Transcript

1. Visual Studio Codeで
   JavaScriptプログラミング
   2020年2月2日（日）
   2020年2月号第7回JavaScriptもくもく勉強会
   @さくらインターネット本社
   

   View Slide

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/
   

   View Slide

3. Visual Studio Codeとは
   MicroSoftが開発している
   無料エディタ
   

   View Slide

4. Visual Studio Code ダウンロード画面
   https://azure.microsoft.com/ja-jp/products/visual-studio-code/
   

   View Slide

5. Visual Studio Codeの特徴
   - Emmetが標準搭載されている
   

   View Slide

6. Emmetとは
   - HTML / CSS を効率的に書く記法
   

   View Slide

7. Visual Studio Codeを使うメリット
   - HTML / CSS を「爆速」でコーディング
   - JS / CSSファイルをワンクリックで作成
   

   View Slide

8. 「爆速」コーディングの紹介
   1. HTMLのコーディング
   2. scriptタグの記述とJSファイルの作成
   3. CSS用のlinkタグの記述とファイルの作成
   

   View Slide

9. 1. HTMLのコーディング
   

   View Slide

10. “!” + tabキー
    

    View Slide

11. “!” + tabキー
    

    View Slide

12. “div#container” + tabキー
    

    View Slide

13. “div#container” + tabキー
    

    View Slide

14. “div.contents” + tabキー
    

    View Slide

15. “div.contents” + tabキー
    

    View Slide

16. “ul.colors>li*3” + tabキー
    

    View Slide

17. “ul.colors>li*3” + tabキー
    

    View Slide

18. 2. scriptタグの記述とJSファイルの作成
    

    View Slide

19. “script:src” + tabキー
    

    View Slide

20. “script:src” + tabキー
    

    View Slide

21. フォルダ名とファイル名を記述
    

    View Slide

22. Follow link
    

    View Slide

23. 3. CSS用リンクタグの記述とファイルの作成
    

    View Slide

24. “link:css” + tabキー
    

    View Slide

25. “link:css” + tabキー
    

    View Slide

26. Follow Link
    

    View Slide

27. Emmet Cheat Sheet
    https://docs.emmet.io/cheat-sheet/
    

    View Slide

28. ハッシュタグ
    #さくらクラブ
    

    View Slide

29. ご清聴ありがとうございました！
    

    View Slide

30. 自己紹介タイム
    1. 名前
    2. 興味のある技術
    3. 今日やりたいこと
    

    View Slide