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
290
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
400
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
500
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
120
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
130
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
58
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
120
JavaScriptの新しい文法を学習しよう
echizenyayota
1
330
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
echizenyayota
0
350
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
PipeCDのプラグイン化で目指すところ
warashi
1
230
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
エラーって何種類あるの?
kajitack
5
330
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How to Ace a Technical Interview
jacobian
277
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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. 今日やりたいこと