Slide 1
Slide 1 text
Visual Studio Codeで
JavaScriptプログラミング
2020年2月2日（日）
2020年2月号第7回JavaScriptもくもく勉強会
@さくらインターネット本社
Slide 2
Slide 2 text
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/
Slide 3
Slide 3 text
Visual Studio Codeとは
MicroSoftが開発している
無料エディタ
Slide 4
Slide 4 text
Visual Studio Code ダウンロード画面
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Slide 5
Slide 5 text
Visual Studio Codeの特徴
- Emmetが標準搭載されている
Slide 6
Slide 6 text
Emmetとは
- HTML / CSS を効率的に書く記法
Slide 7
Slide 7 text
Visual Studio Codeを使うメリット
- HTML / CSS を「爆速」でコーディング
- JS / CSSファイルをワンクリックで作成
Slide 8
Slide 8 text
「爆速」コーディングの紹介
1. HTMLのコーディング
2. scriptタグの記述とJSファイルの作成
3. CSS用のlinkタグの記述とファイルの作成
Slide 9
Slide 9 text
1. HTMLのコーディング
Slide 10
Slide 10 text
“!” + tabキー
Slide 11
Slide 11 text
“!” + tabキー
Slide 12
Slide 12 text
“div#container” + tabキー
Slide 13
Slide 13 text
“div#container” + tabキー
Slide 14
Slide 14 text
“div.contents” + tabキー
Slide 15
Slide 15 text
“div.contents” + tabキー
Slide 16
Slide 16 text
“ul.colors>li*3” + tabキー
Slide 17
Slide 17 text
“ul.colors>li*3” + tabキー
Slide 18
Slide 18 text
2. scriptタグの記述とJSファイルの作成
Slide 19
Slide 19 text
“script:src” + tabキー
Slide 20
Slide 20 text
“script:src” + tabキー
Slide 21
Slide 21 text
フォルダ名とファイル名を記述
Slide 22
Slide 22 text
Follow link
Slide 23
Slide 23 text
3. CSS用リンクタグの記述とファイルの作成
Slide 24
Slide 24 text
“link:css” + tabキー
Slide 25
Slide 25 text
“link:css” + tabキー
Slide 26
Slide 26 text
Follow Link
Slide 27
Slide 27 text
Emmet Cheat Sheet
https://docs.emmet.io/cheat-sheet/
Slide 28
Slide 28 text
ハッシュタグ
#さくらクラブ
Slide 29
Slide 29 text
ご清聴ありがとうございました！
Slide 30
Slide 30 text
自己紹介タイム
1. 名前
2. 興味のある技術
3. 今日やりたいこと