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
420
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
530
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
130
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
140
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
67
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
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
4.9k
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
13
44k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
520
理論と実務のギャップを超える
eycjur
0
180
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Catch Up: Go Style Guide Update
andpad
0
250
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
What's new in Spring Modulith?
olivergierke
1
170
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Making Projects Easy
brettharned
120
6.4k
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. 今日やりたいこと