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
【初心者向け】コーディング効率化(Emmet, ショートカットキー)
Search
kaedefuseya
July 17, 2022
Education
0
140
【初心者向け】コーディング効率化(Emmet, ショートカットキー)
チーム内勉強会で使用した資料です。
kaedefuseya
July 17, 2022
Tweet
Share
Other Decks in Education
See All in Education
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
2023年度秋学期 統計学 第14回 分布についての仮説を検証する― 仮説検定(1) (2024. 1. 9)
akiraasano
PRO
0
120
財務分析 - 入門編
lsuzuki
0
320
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1k
第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会
nagisa53
2
340
Tips for the Presentation - Lecture 2 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
0
130
Data Management and Analytics Specialisation
signer
PRO
0
970
MySmartSTEAM2324
cbtlibrary
0
110
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
LightSail2324
cbtlibrary
0
110
Earthquake and Disaster Prevention Information for UTokyo International Students
utokyoissr2360
0
520
生成AIを活用できる大学教職員になる-基本と実践-
gmoriki
0
170
Featured
See All Featured
Designing for Performance
lara
601
67k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Designing the Hi-DPI Web
ddemaree
275
33k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Building an army of robots
kneath
300
41k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
How GitHub (no longer) Works
holman
301
140k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Practical Orchestrator
shlominoach
180
9.7k
Transcript
コーディング効率化について マークアップエンジニアチーム勉強会 ※HTML,CSS限定&ちょっとできる初⼼者向け 2022/01/25
もくじ
もくじ おわりに ・VSCode ・Windows(エクスプローラー) ・Chrome ・XD ショートカットキー Emmet なんでこれをテーマにしたの? 1
ここが本題 2 3 4
もう知ってる ※間違いなどがあれば教えてください すみません 先回りの謝罪
なんでこれをテーマにしたの? 1
コーディングを速くする⽅法 経験、知識 絶対配置なら position:absolute; 共通パーツや 変数を使う ここはsection? ただのdiv? リストの先頭は 擬似要素
このレイアウトは gridじゃないと無理 別案件の似た実装を 参考に改造 中央寄せは margin:auto; 「よくある質問」は dt,ddで組む
コーディングを速くする⽅法 だけとも限らない
コーディングを速くする⽅法 もっと基礎的なことも⼤切 ・タイピングの速度 ・PC操作の速度 ・デザインツールの操作の理解 ・効率化のための機能を使いこなす …などなど
毎回マウスで 保存ボタンを押す⼈ Ctrl+Sで 保存できる⼈ 右の⼈のほうが仕事が速い↑ 極端な例
(⾃戒も込めて) コーディングを素早く済ませれば、 チェックやリファクタリングに時間を使える (コード整理) チリも積もれば⼭となる
Emmet 2 \ここから本題/
Emmetとは? ショートカットキーでタグを展開できるので、 コーディングがものすごく効率的になる HTML、CSSなどの⼊⼒を補助する拡張機能 エメット
Emmet:TriggerExpansionOnTab VSCode>設定> HTMLならEnterでも展開できるが、CSSで展開するときはチェックが必須
Emmet HTMLでの使い⽅
普通に使う かんたん① p ↓ <p></p>
class,idをつけてみる かんたん② .container ↓ <div class="container"></div> #js-test ↓ <div id="js-test"></div>
属性をつけてみる かんたん③ a:blank ↓ <a href="http://" target="_blank" rel="noopener noreferrer"> </a>
⼊れ⼦にしてみる ふつう① div>p ↓ <div> <p></p> </div>
複数⼊れてみる ふつう② h2+p+a ↓ <h2></h2> <p></p> <a href=""></a>
同じものをたくさん⼊れてみる ふつう③ p*3 ↓ <p></p> <p></p> <p></p>
グループをたくさん ⼊れてみる ややこしい div>h2+p^div>span ↓ <div> <h2></h2> <p></p> </div> <div>
<span></span> </div> ^でひとつ上の階層に戻る ⼩刻みに展開していくほうが わかりやすい気もする
class名をコピペすると 結構うれしい マルチカーソル機能と組み合わせて、 rootsのclass名をまとめてペーストする class名の誤字を減らせる .test>h2.--ttl+p.--txt +img.--img ↓ <div class="test">
<h2 class="--ttl"></h2> <p class="--txt"></p> <img src="" alt="" class="--img"> </div> よく使う例
Emmet 便利な操作 タグ展開とあわせて使える から呼び出します P + Ctrl + Shift
タグ展開じゃない操作① Wrap変換 Emmet:WrapwithAbbreviation \便利/ 元のテキスト ul>li ul>li* リスト1 リスト2 リスト3
<ul> <li> リスト1 リスト2 リスト3 </li> </ul> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
タグ展開じゃない操作② バランス選択(内側/外側) Emmet:Balance(inward)/(outward) <div class="container"> <p> この⽂章はダミーです。 この⽂章はダミーテキストです。 </p> </div>
<div class="container"> <p> この⽂章はダミーです。 この⽂章はダミーテキストです。 </p> </div> 外側 内側
若⼲変になるけど 整形すればどうにかなる ときどき使う例 バランス選択からの Wrap変換 <div class="container"> この⽂章はダミーです。 </div> ↓
<div class="container"> この⽂章はダミーです。 </div> ↓ <div class="container"><p> この⽂章はダミーです。 </p> </div> ときどき変換失敗する
このブロックどこから始まってる? (どこで終わってる?) タグ展開じゃない操作③ ⼀致するペアに移動 <table> <tbody> <tr> <th>⾒出し1</th> <td>この⽂章はダミーです。</td> </tr>
<tr> <th>⾒出し2</th> <td>この⽂章はダミーです。</td> </tr> </tbody> </table> Emmet:GotoMachingPair ってときに便利
Emmet CSSでの使い⽅
よく使うCSS .test { w300 df fz2r c#0 mb20 m10-a bdb
} .test { width: 300px; display: flex; font-size: 2rem; color: #000; margin-bottom: 20px; margin: 10px auto; border-bottom: 1px solid #000; }
Emmet https://docs.emmet.io/cheat-sheet/ ↓ もっと知りたくなった⼈は チートシートを⾒てください 個⼈的によく使うものだけ抜粋しています
ショートカットキー 3
ショートカットキー VSCodeの ショートカットキー (あくまでも最低限のもの)
とりあえず基礎的なところから プロジェクト内検索 F + Ctrl + Shift ファイルを開く P +
Ctrl ← + Ctrl 単語の区切りで カーソルを移動 → ここだけだとファイル内検索 R + Ctrl ようこそ画⾯なら VSCode
⾏を上下にコピー ↑ + Alt + Shift ↓ ⾏を上下に移動 ↑ +
Alt ↓ D + Ctrl 選択中の⽂字列と 同じ⽂字列を選択 ⽂字列とか⾏とかの操作 L + Ctrl + Shift 全選択は VSCode
設定が必須 フォーマッタ ※ エディタ本体の操作 タブ切り替え Tab + Ctrl コード整形 F
+ Alt + Shift , + Ctrl 設定を開く PageUp PageDown でも可能 VSCode
https://code.visualstudio.com/shortcuts/ keyboard-shortcuts-windows.pdf ↓ 他にもいろいろあるので チートシートを⾒てください ※WinとMacで結構キーが違うので注意 VSCode
ショートカットキー Windows10の ショートカットキー &便利な機能
Windows10 画⾯キャプチャ S + Shift + Win アプリ切り替え Tab +
Alt アプリ起動 Win
Windows10 クリップボード履歴 V + Win \便利/ 詳細はアシュリーさんのごった煮ブログでどうぞ
エクスプローラー 名前変更 F2 新規フォルダ N + Ctrl + Shift E
+ Win アプリ起動
などが使えるようになる エクスプローラー PowerRename ・テキスト置換 ・連番の付与 (ないよりマシ) ※「PowerToys」のインストールが必要
エクスプローラー PowerToysのうれしいところ ・MarkDownのプレビュー ・カラーピッカー ・svgのサムネイル表⽰ \優勝/ 他にも機能はいろいろある
ショートカットキー GoogleChromeの ショートカットキー
GoogleChrome アドレスバーに カーソルを移動 新規タブ シークレット ウィンドウを開く T + Ctrl L
+ Ctrl N + Ctrl + Shift
ショートカットキー AdobeXDの ショートカットキー
AdobeXD Esc ひとつずつ階層を上がる クリック + Ctrl ダイレクト選択
AdobeXD L + Ctrl 8 + Ctrl E + Ctrl
G + Ctrl Shift + ロック、解除 アウトライン化 書き出し グループ化、解除 (テキスト) いらない Shift 解除も
AdobeXD テキストを直接コピー可能にするプラグイン https://coffee-break-designs.com/production/text-to-clipbord
おわりに 4
無関係なキーは気合で慣れる 英単語の意味から拾うと少しはわかりやすい ←ExportのE E + Ctrl XDの書き出し ←ScreenのS? S +
Ctrl + Shift 画⾯キャプチャ ←FormatのF F + Alt + Shift コード整形 ←FindのF F + Ctrl 検索 覚えられなくない?
各々に合った効率化の⽅法を ⾒つけてください 絶対覚えろ!使え! ってことではないです ※チームで揃えるところは揃えましょう
操作ミスで事故ったら⼤惨事なので わたしはあまり使いません 事故ったときに⾃分で修正できる⼈は使ってOK (のショートカット) Sourcetreeは?
(⾃戒も込めて) コーディングを素早く済ませれば、 チェックやリファクタリングに時間を使える (コード整理) チリも積もれば⼭となる まとめ