Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

61e8d2d797a37913aafaeb8e8b38c373?s=47 echizenyayota
February 02, 2020
Programming
0
130

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

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

61e8d2d797a37913aafaeb8e8b38c373?s=128

echizenyayota

February 02, 2020
Tweet

More Decks by echizenyayota

See All by echizenyayota
日本語話者と英語話者のためのIT技術者交流コミュニティ_事始め_日本語_英語_.pdf
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
210
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
210
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
87
ドットインストールの質問回答サービスで身につくプログラミング学習法
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
70
「Webパフォーマンス改善セミナー」 概要説明
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
1
36
JavaScriptの正規表現で リファラースパムを退治した話
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
55
JavaScriptの新しい文法を学習しよう
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
1
270
さくらのVPSでプラグインを使わないWordPressのバックアップ
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
1k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
210

Other Decks in Programming

See All in Programming
近況PHP / PHP in now a days
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
4
1.7k
Modern Web Apps with Spring Boot, Angular & TypeScript
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
12
14k
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
470
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
130
Where and how to run UI tests (Droidcon London, 2021)
E20836b1ea89956e0b96362046e2b564?s=48 nonews
0
210
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
260
職場にPythonistaを増やす方法
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
300
機能横断型チームにおける技術改善
63b77df425b26126961817a39969a660?s=48 takeshiakutsu
3
450
dbtとBigQueryで始めるData Vault入門
F2bd408c57c20505bd4202c9e28ecd59?s=48 kazk1018
0
180
Kotlin KSP - Intro
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
1
480
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
1.6k
Learning DDD輪読会#4 / Learning DDD Book Club #4
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
1
130

Featured

See All Featured
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.3k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
121
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
Distributed Sagas: A Protocol for Coordinating Microservices
9128d500301ae51524e887bb680f471d?s=48 caitiem20
315
19k

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