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
230
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
330
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
360
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
110
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
110
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
49
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
100
JavaScriptの新しい文法を学習しよう
echizenyayota
1
320
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.2k
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
echizenyayota
0
300
Other Decks in Programming
See All in Programming
Rust.Nagoya #1
codemountains
0
170
Namespace on read
tagomoris
2
370
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
CSC307 Lecture 06
javiergs
PRO
0
360
Jetpack for KMP
fornewid
1
290
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
4 Signs Your Business is Dying
shpigford
178
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Fireside Chat
paigeccino
25
2.8k
BBQ
matthewcrist
82
9k
How STYLIGHT went responsive
nonsquared
93
5k
What the flash - Photography Introduction
edds
65
11k
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. 今日やりたいこと