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
300
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
410
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
510
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
120
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
130
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
58
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
130
JavaScriptの新しい文法を学習しよう
echizenyayota
1
340
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
echizenyayota
0
360
Other Decks in Programming
See All in Programming
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
リッチエディターを安全に開発・運用するために
unachang113
1
270
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.7k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
JetBrainsのAI機能の紹介 #jjug
yusuke
0
110
QA x AIエコシステム段階構築作戦
osu
0
210
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Scaling GitHub
holman
461
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Language of Interfaces
destraynor
158
25k
Building Adaptive Systems
keathley
43
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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. 今日やりたいこと