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
310
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
530
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
130
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
140
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
66
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
CSC509 Lecture 01
javiergs
PRO
1
440
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
理論と実務のギャップを超える
eycjur
0
100
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
CSC509 Lecture 06
javiergs
PRO
0
260
Model Pollution
hschwentner
1
190
株式会社 Sun terras カンパニーデック
sunterras
0
260
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.8k
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Large-scale JavaScript Application Architecture
addyosmani
514
110k
It's Worth the Effort
3n
187
28k
How to Ace a Technical Interview
jacobian
280
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
180
9.9k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Faster Mobile Websites
deanohume
310
31k
Designing for Performance
lara
610
69k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
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. 今日やりたいこと