【初心者向け】コーディング効率化（Emmet, ショートカットキー）

チーム内勉強会で使用した資料です。

Transcript

1. コーディング効率化について マークアップエンジニアチーム勉強会 ※HTML,
   CSS限定＆ちょっとできる初⼼者向け 2022/01/25
2. もくじ
3. もくじ おわりに ・VSCode
   ・Windows（エクスプローラー）
   ・Chrome
   ・XD ショートカットキー Emmet なんでこれをテーマにしたの？ 1 ここが本題 2 3 4
4. もう知ってる ※間違いなどがあれば教えてください すみません 先回りの謝罪
5. なんでこれをテーマにしたの？ 1
6. コーディングを速くする⽅法 経験、知識 絶対配置なら
   position:
   absolute; 共通パーツや
   変数を使う ここはsection?
   ただのdiv? リストの先頭は
   擬似要素 このレイアウトは
   gridじゃないと無理 別案件の似た実装を
   参考に改造 中央寄せは
   margin:
   auto; 「よくある質問」は
   dt,
   ddで組む
7. コーディングを速くする⽅法 だけとも限らない
8. コーディングを速くする⽅法 もっと基礎的なことも⼤切 ・タイピングの速度
   ・PC操作の速度
   ・デザインツールの操作の理解
   ・効率化のための機能を使いこなす …などなど
9. 毎回マウスで
   保存ボタンを押す⼈ Ctrl
   +
   S
   で
   保存できる⼈ 右の⼈のほうが仕事が速い↑ 極端な例
10. （⾃戒も込めて） コーディングを素早く済ませれば、
    チェックやリファクタリングに時間を使える (コード整理） チリも積もれば⼭となる
11. Emmet 2 ＼
    ここから本題
    ／
12. Emmetとは？ ショートカットキーでタグを展開できるので、
    コーディングがものすごく効率的になる HTML、CSSなどの⼊⼒を補助する拡張機能 エメット
13. Emmet:Trigger
    Expansion
    On
    Tab VSCode
    >
    設定
    > HTMLならEnterでも展開できるが、CSSで展開するときはチェックが必須
14. Emmet HTMLでの使い⽅
15. 普通に使う かんたん① p ↓ <p></p>
16. class,
    idをつけてみる かんたん② .container ↓ <div class="container"></div> #js-test ↓ <div id="js-test"></div>
17. 属性をつけてみる かんたん③ a:blank ↓ <a href="http://" target="_blank" rel="noopener noreferrer"> </a>
18. ⼊れ⼦にしてみる ふつう① div>p ↓ <div> <p></p> </div>
19. 複数⼊れてみる ふつう② h2+p+a ↓ <h2></h2> <p></p> <a href=""></a>
20. 同じものをたくさん⼊れてみる ふつう③ p*3 ↓ <p></p> <p></p> <p></p>
21. グループをたくさん
    ⼊れてみる ややこしい div>h2+p^div>span ↓ <div> <h2></h2> <p></p> </div> <div> <span></span> </div> ^
    でひとつ上の階層に戻る ⼩刻みに展開していくほうが
    わかりやすい気もする
22. 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> よく使う例
23. Emmet 便利な操作 タグ展開とあわせて使える から呼び出します P + Ctrl + Shift
24. タグ展開じゃない操作① Wrap変換 Emmet
    :
    Wrap
    with
    Abbreviation ＼
    便利
    ／ 元のテキスト 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>
25. タグ展開じゃない操作② バランス選択（内側
    /
    外側） Emmet
    :
    Balance
    (inward)
    /
    (outward) <div class="container"> <p> この⽂章はダミーです。 この⽂章はダミーテキストです。 </p> </div> <div class="container"> <p> この⽂章はダミーです。 この⽂章はダミーテキストです。 </p> </div> 外側 内側
26. 若⼲変になるけど
    整形すればどうにかなる ときどき使う例 バランス選択からの
    Wrap変換 <div class="container"> この⽂章はダミーです。 </div> ↓ <div class="container"> この⽂章はダミーです。 </div> ↓ <div class="container"><p> この⽂章はダミーです。 </p> </div> ときどき変換失敗する
27. このブロックどこから始まってる？
    （どこで終わってる？） タグ展開じゃない操作③ ⼀致するペアに移動 <table> <tbody> <tr> <th>⾒出し1</th> <td>この⽂章はダミーです。</td> </tr> <tr> <th>⾒出し2</th> <td>この⽂章はダミーです。</td> </tr> </tbody> </table> Emmet
    :
    Go
    to
    Maching
    Pair ってときに便利
28. Emmet CSSでの使い⽅
29. よく使う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; }
30. Emmet https://docs.emmet.io/cheat-sheet/ ↓ もっと知りたくなった⼈は
    チートシートを⾒てください 個⼈的によく使うものだけ抜粋しています
31. ショートカットキー 3
32. ショートカットキー VSCodeの
    ショートカットキー （あくまでも最低限のもの）
33. とりあえず基礎的なところから プロジェクト内検索 F + Ctrl + Shift ファイルを開く P + Ctrl ← + Ctrl 単語の区切りで
    カーソルを移動 → ここだけだとファイル内検索 R + Ctrl ようこそ画⾯なら VSCode
34. ⾏を上下にコピー ↑ + Alt + Shift ↓ ⾏を上下に移動 ↑ + Alt ↓ D + Ctrl 選択中の⽂字列と
    同じ⽂字列を選択 ⽂字列とか⾏とかの操作 L + Ctrl + Shift 全選択は VSCode
35. 設定が必須 フォーマッタ ※ エディタ本体の操作 タブ切り替え Tab + Ctrl コード整形 F + Alt + Shift , + Ctrl 設定を開く PageUp PageDown でも可能 VSCode
36. https://code.visualstudio.com/shortcuts/
    keyboard-shortcuts-windows.pdf ↓ 他にもいろいろあるので
    チートシートを⾒てください ※WinとMacで結構キーが違うので注意 VSCode
37. ショートカットキー Windows10の
    ショートカットキー &
    便利な機能
38. Windows10 画⾯キャプチャ S + Shift + Win アプリ切り替え Tab + Alt アプリ起動 Win
39. Windows10 クリップボード履歴 V + Win ＼
    便利
    ／ 詳細はアシュリーさんのごった煮ブログでどうぞ
40. エクスプローラー 名前変更 F2 新規フォルダ N + Ctrl + Shift E + Win アプリ起動
41. などが使えるようになる エクスプローラー PowerRename ・テキスト置換
    ・連番の付与 （ないよりマシ） ※「PowerToys」のインストールが必要
42. エクスプローラー PowerToysのうれしいところ ・MarkDownのプレビュー ・カラーピッカー ・svgのサムネイル表⽰ ＼
    優勝
    ／ 他にも機能はいろいろある
43. ショートカットキー Google
    Chromeの
    ショートカットキー
44. Google
    Chrome アドレスバーに
    カーソルを移動 新規タブ シークレット
    ウィンドウを開く T + Ctrl L + Ctrl N + Ctrl + Shift
45. ショートカットキー Adobe
    XDの
    ショートカットキー
46. Adobe
    XD Esc ひとつずつ階層を上がる クリック + Ctrl ダイレクト選択
47. Adobe
    XD L + Ctrl 8 + Ctrl E + Ctrl G + Ctrl Shift + ロック、解除 アウトライン化 書き出し グループ化、解除 （テキスト） いらない Shift 解除も
48. Adobe
    XD テキストを直接コピー可能にするプラグイン https://coffee-break-designs.com/production/text-to-clipbord
49. おわりに 4
50. 無関係なキーは気合で慣れる 英単語の意味から拾うと少しはわかりやすい ←
    ExportのE E + Ctrl XDの書き出し ←
    ScreenのS？ S + Ctrl + Shift 画⾯キャプチャ ←
    FormatのF F + Alt + Shift コード整形 ←
    FindのF F + Ctrl 検索 覚えられなくない？
51. 各々に合った効率化の⽅法を
    ⾒つけてください 絶対覚えろ！使え！
    ってことではないです ※チームで揃えるところは揃えましょう
52. 操作ミスで事故ったら⼤惨事なので
    わたしはあまり使いません 事故ったときに⾃分で修正できる⼈は使ってOK (のショートカット） Sourcetreeは？
53. （⾃戒も込めて） コーディングを素早く済ませれば、
    チェックやリファクタリングに時間を使える (コード整理） チリも積もれば⼭となる まとめ