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
280
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
390
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
480
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
120
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
130
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
55
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
120
JavaScriptの新しい文法を学習しよう
echizenyayota
1
330
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.3k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
echizenyayota
0
340
Other Decks in Programming
See All in Programming
実践Webフロントパフォーマンスチューニング
cp20
45
10k
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
250
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
190
Vibe Coding の話をしよう
schroneko
14
3.9k
파급효과: From AI to Android Development
l2hyunwoo
0
170
2025年のz-index設計を考える
tak_dcxi
13
4.9k
ビカム・ア・コパイロット
ymd65536
1
150
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
1.3k
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Statistics for Hackers
jakevdp
799
220k
A Tale of Four Properties
chriscoyier
159
23k
We Have a Design System, Now What?
morganepeng
52
7.6k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
The Language of Interfaces
destraynor
158
25k
Code Review Best Practice
trishagee
68
18k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A designer walks into a library…
pauljervisheath
205
24k
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. 今日やりたいこと