Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual Studio CodeでJavaScriptプログラミング
Search
echizenyayota
February 02, 2020
Programming
0
220
Visual Studio CodeでJavaScriptプログラミング
さくらクラブ 2020年2月号第7回 JavaScriptプログラミングもくもく勉強会の日
echizenyayota
February 02, 2020
Tweet
Share
More Decks by echizenyayota
See All by echizenyayota
日本語話者と英語話者のためのIT技術者交流コミュニティ_事始め_日本語_英語_.pdf
echizenyayota
0
320
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
330
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
110
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
100
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
49
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
94
JavaScriptの新しい文法を学習しよう
echizenyayota
1
310
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.2k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
echizenyayota
0
290
Other Decks in Programming
See All in Programming
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Ruby Function Composition
bkuhlmann
1
330
Goのエラースタックトレースの歴史と今後
sonatard
7
1.1k
Fragment Composition of GraphQL
quramy
3
480
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
710
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
740
ゆるい個人開発のススメ
kuroppe1819
10
980
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
Git Rebase
bkuhlmann
11
1.6k
新宿ダンジョンを可視化してみた
satoshi7190
2
240
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Fireside Chat
paigeccino
21
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
A Tale of Four Properties
chriscoyier
151
22k
Thoughts on Productivity
jonyablonski
58
3.8k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Ruby is Unlike a Banana
tanoku
96
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Transcript
Visual Studio Codeで JavaScriptプログラミング 2020年2月2日(日) 2020年2月号第7回JavaScriptもくもく勉強会 @さくらインターネット本社
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/
Visual Studio Codeとは MicroSoftが開発している 無料エディタ
Visual Studio Code ダウンロード画面 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Visual Studio Codeの特徴 - Emmetが標準搭載されている
Emmetとは - HTML / CSS を効率的に書く記法
Visual Studio Codeを使うメリット - HTML / CSS を「爆速」でコーディング - JS
/ CSSファイルをワンクリックで作成
「爆速」コーディングの紹介 1. HTMLのコーディング 2. scriptタグの記述とJSファイルの作成 3. CSS用のlinkタグの記述とファイルの作成
1. HTMLのコーディング
“!” + tabキー
“!” + tabキー
“div#container” + tabキー
“div#container” + tabキー
“div.contents” + tabキー
“div.contents” + tabキー
“ul.colors>li*3” + tabキー
“ul.colors>li*3” + tabキー
2. scriptタグの記述とJSファイルの作成
“script:src” + tabキー
“script:src” + tabキー
フォルダ名とファイル名を記述
Follow link
3. CSS用リンクタグの記述とファイルの作成
“link:css” + tabキー
“link:css” + tabキー
Follow Link
Emmet Cheat Sheet https://docs.emmet.io/cheat-sheet/
ハッシュタグ #さくらクラブ
ご清聴ありがとうございました!
自己紹介タイム 1. 名前 2. 興味のある技術 3. 今日やりたいこと