Upgrade to Pro — share decks privately, control downloads, hide ads and more …

U-lab定期LT10月 古代技術と現代技術の融合VSCodeVimのススメ

usuyuki
October 01, 2022

U-lab定期LT10月 古代技術と現代技術の融合VSCodeVimのススメ

第4回U-lab定期LT会でお話しました。
vim使えないのでこの機会に使いたいなって思いまして……

PDFにしているので動作解説のGIFが動かなくなっています……

usuyuki

October 01, 2022
Tweet

More Decks by usuyuki

Other Decks in Education

Transcript

  1. 古代技術と現代技術の融合
    VSCodeVimのススメ
    第4回U-lab定期LT会
    うすゆき
    今回のカラーパレットは「遣らずの雨」
    2022/10/1 1

    View full-size slide

  2. AboutMe
    基本
    最近のときめき
    宇都宮大学 工学部 3年
    「新世界より」おもしろかった
    2022/10/1 2

    View full-size slide

  3. 前章
    Vimの思想を取り入れよ!
    ゴール
    2022/10/1 3

    View full-size slide

  4. 前章
    知らない概念知れた!
    ができれば幸せ
    ゴール
    2022/10/1 4

    View full-size slide

  5. 前章
    このLTの対象は非エンジニア
    ゴール
    2022/10/1 5

    View full-size slide

  6. 前章
    Vim初心者がvimを布教するスライドです。
    2022/10/1 6

    View full-size slide

  7. 前章
    みなさん
    2022/10/1 7

    View full-size slide

  8. 前章
    無駄な時間
    2022/10/1 8

    View full-size slide

  9. 前章
    省きたくないですか?
    2022/10/1 9

    View full-size slide

  10. 前章
    キーボードで文字を打った後、
    マウスへ手を移動する時間、
    無駄じゃないですか?
    2022/10/1 10

    View full-size slide

  11. 前章
    2022/10/1 11
    その時間あったらVTuber見ようよ?
    しぐれうい先生,名取さなさんあたりをぜひ……

    View full-size slide

  12. 前章
    マウスも十字キーも使わない
    魔法のツールのご紹介です。
    2022/10/1 12

    View full-size slide

  13. 前章
    いきなりですが、デモ
    2022/10/1 13
    PDFだとgifが死んでる可能性あり

    View full-size slide

  14. 前章
    ???「Hello Worldの出力じゃ配慮が足りん。
    Hello Universeも追加しろ」
    2022/10/1 14

    View full-size slide

  15. 前章
    2022/10/1 15
    実際に作業している様子(等速)
    起動→j→yyp→ci”→Hello Universe→Esc→:wq→終了

    View full-size slide

  16. 前章
    2022/10/1 16
    マウスどころか十字キーも使っていません。

    View full-size slide

  17. 前章
    3分のLTで話せる内容じゃないです.
    数百ページの本が出ているツールです.
    2022/10/1 17

    View full-size slide

  18. 前章
    そもそもエディターってなんなのよ
    2022/10/1 18

    View full-size slide

  19. 前章
    エディター IDE
    デバッグ, 実行…
    文字列の書き込み
    2022/10/1 19

    View full-size slide

  20. 前章
    エディター IDE
    デバッグ, 実行…
    文字列の書き込み
    2022/10/1 20

    View full-size slide

  21. 前章
    GUIエディター CUIエディター
    CUIで使う
    GUIで使う
    2022/10/1 21

    View full-size slide

  22. 前章
    GUIエディター
    2022/10/1 22

    View full-size slide

  23. 前章
    CUIエディター
    2022/10/1 23

    View full-size slide

  24. Vscodeってなんぞや
    超多機能なメモ帳
    2022/10/1 24

    View full-size slide

  25. 前章
    GUIエディター
    2022/10/1 25

    View full-size slide

  26. Vimってなんぞや
    CUIのメモ帳?
    2022/10/1 26

    View full-size slide

  27. 前章
    CUIエディター
    2022/10/1 27

    View full-size slide

  28. 前章
    CUIエディター
    マウスを使わない!!!
    2022/10/1 28

    View full-size slide

  29. 前章
    CUIエディター
    どうやって終了するの……?
    2022/10/1 29

    View full-size slide

  30. 前章
    CUIエディター
    Esc→:→wq
    2022/10/1 30

    View full-size slide

  31. Vimってなんぞや
    初日は終了の仕方が分からないことで有名.
    2022/10/1 31

    View full-size slide

  32. Vimってなんぞや
    そして爆速
    (でかいファイルでも一瞬で開く)
    2022/10/1 32

    View full-size slide

  33. Vimってなんぞや
    どこにでもいる(特にvi)
    古代遺跡でサーバーを見つけても作業できる安心感!!
    2022/10/1 33

    View full-size slide

  34. Vimの設計思想
    とにかく手の動きを減らす!
    無駄をなくす!
    2022/10/1 34

    View full-size slide

  35. Vimのポイント
    mode
    キーバインド
    オペレータとモーション
    マクロ、プラグインやカスタマイズなどもっとポイントはあるが3分じゃ無理……
    2022/10/1 35

    View full-size slide

  36. Vimのmodeに関して
    4種類をEscキーで移動する
    ノーマル
    モード
    起点
    :
    インサート
    モード 書き込み
    コマンドライン
    モード
    コマンド
    ビジュアル
    モード 範囲選択
    Esc
    v
    Esc
    Esc
    i,aなど
    起動
    終了
    2022/10/1 36
    EscのかわりにCtrl + [でもOK (jjとかにする人も多め)

    View full-size slide

  37. オペレータとモーション
    挿入コマンド
    2022/10/1 37
    大文字は行思考
    ポイント
    i : カーソルの前でインサートモード
    I : 行の先頭でインサートモード
    inner
    after
    a : カーソルの後ろでインサートモード
    A : 行の末端でインサートモード
    open line
    o : 下に空行追加でインサートモード
    O : 上に空行追加でインサートモード

    View full-size slide

  38. Vimのキーバインドに関して
    なるほど……😗
    2022/10/1 38

    View full-size slide

  39. Vimのキーバインドに関して
    保存
    :wq 保存して終了
    :q 終了
    :q! 強制終了
    2022/10/1 39

    View full-size slide

  40. Vimのキーバインドに関して
    なるほど……😇
    2022/10/1 40

    View full-size slide

  41. Vimのキーバインドに関して
    最低限ここまで知っていれば操作はできる。
    2022/10/1 41

    View full-size slide

  42. Vimのキーバインドに関して
    でも、
    2022/10/1 42

    View full-size slide

  43. Vimのキーバインドに関して
    思考のスピードで操作したくないですか?
    2022/10/1 43

    View full-size slide

  44. Vimのキーバインドに関して
    移動
    ←h l→
    j

    K

    2022/10/1 44

    View full-size slide

  45. Vimのキーバインドに関して
    w(ord) →次の単語の先端
    2022/10/1 45
    移動コマンド
    e(nd of word) →次の単語の末尾
    b(ack word) →前の単語の末尾
    ge →次の単語の末尾

    View full-size slide

  46. Vimのキーバインドに関して
    2022/10/1 46
    前後の単語に移動(w)

    View full-size slide

  47. Vimのキーバインドに関して
    W(ord) →次の単語の先端
    2022/10/1 47
    移動コマンド(複合語も1単語と見る)
    E(nd of word) →次の単語の末尾
    E(ack word) →前の単語の末尾
    gE →次の単語の末尾

    View full-size slide

  48. Vimのキーバインドに関して
    G →ファイルの最終行
    2022/10/1 48
    移動コマンド
    $ →行の末尾
    0 →行の先端
    % →囲み記号
    gg →ファイルの先頭行

    View full-size slide

  49. Vimのキーバインドに関して
    2022/10/1 49
    {}の}へ移動(%)

    View full-size slide

  50. Vimのキーバインドに関して
    数字+j/k →数字行分移動
    2022/10/1 50
    移動コマンド
    :行数 →行数に移動
    行数G →行数に移動
    →こういう感じで同じ意味のものもある
    ;で繰り返し

    View full-size slide

  51. Vimのキーバインドに関して
    2022/10/1 51
    移動コマンド
    f(ind)+文字 →右側で一番近い文字
    ; →右方向に繰り返し
    fe;; で右側にある文字列の中で2つめのeに移動
    F(ind)+文字 →左側で一番近い文字
    , →左方向に繰り返し

    View full-size slide

  52. Vimのキーバインドに関して
    2022/10/1 52
    10行下へ移動(10j)

    View full-size slide

  53. Vimのキーバインドに関して
    2022/10/1 53
    マウスでスクロール?
    そんなものない。

    View full-size slide

  54. Vimのキーバインドに関して
    H →画面上行に移動
    2022/10/1 54
    移動コマンド
    M →画面中央行に移動
    L →画面下行に移動

    View full-size slide

  55. Vimのキーバインドに関して
    Ctrl + b →1画面上に行く
    2022/10/1 55
    移動コマンド
    Ctrl + f →1画面下に行く
    Ctrl + y →1行画面を上にする
    Ctrl + e →1行画面を下にする
    Ctrl + u →半画面上に行く
    Ctrl + d →半画面下に行く

    View full-size slide

  56. Vimのキーバインドに関して
    ctrl + o →移動版ctrl+z
    2022/10/1 56
    移動コマンド版元に戻す
    ctrl + I →移動版ctrl+shift+z

    View full-size slide

  57. Vimのキーバインドに関して
    なるほど……😪
    2022/10/1 57

    View full-size slide

  58. Vimのキーバインドに関して
    dip→内側の段落を消す
    as→文選択
    dl→一文字削除
    Cat→カーソル上にあるタグを削除
    してインサートモード
    yyp→行の複製
    2022/10/1 58

    View full-size slide

  59. Vimのキーバインドに関して
    なるほど……🙃
    2022/10/1 59

    View full-size slide

  60. Vimのキーバインドに関して
    ???「分かりにくいからhelpコマンド使え」
    2022/10/1 60

    View full-size slide

  61. Vimのキーバインドに関して
    2022/10/1 61
    :help objects

    View full-size slide

  62. Vimのキーバインドに関して
    2022/10/1 62
    え? これ
    覚えるの
    ……?

    View full-size slide

  63. Vimのキーバインドに関して
    2022/10/1 63
    1700行あるんだが……
    しかもこれはobjectsに関してだけ

    View full-size slide

  64. Vimのキーバインドに関して
    …………
    2022/10/1 64

    View full-size slide

  65. Vimのキーバインドに関して
    学習のS字カーブが地獄
    2022/10/1 65

    View full-size slide

  66. Vimのキーバインドに関して
    そう思っていた時期が私にもありました。
    インサートモードだけ知ってればとりあえず使えるし、まぁいっか……
    2022/10/1 66

    View full-size slide

  67. オペレータとモーション
    Vimにおけるオペレータとモーション
    2022/10/1 67

    View full-size slide

  68. オペレータとモーション
    コマンドは2つの組み合わせ!
    2022/10/1 68

    View full-size slide

  69. オペレータとモーション
    diw
    2022/10/1 69

    View full-size slide

  70. オペレータとモーション
    diw
    2022/10/1 70

    View full-size slide

  71. オペレータとモーション
    diw
    2022/10/1 71

    View full-size slide

  72. オペレータとモーション
    オペレータ モーション
    (テキストオブジェクト)

    2022/10/1 72

    View full-size slide

  73. オペレータとモーション
    オペレータ モーション
    (テキストオブジェクト)

    delete Inner word
    2022/10/1 73

    View full-size slide

  74. オペレータとモーション
    何を どこに

    delete Inner word
    2022/10/1 74

    View full-size slide

  75. オペレータとモーション
    消す 内側の単語

    delete Inner word
    2022/10/1 75

    View full-size slide

  76. オペレータとモーション
    gm
    2022/10/1 76

    View full-size slide

  77. オペレータとモーション
    移動する 真ん中に

    gamp middle
    2022/10/1 77

    View full-size slide

  78. オペレータとモーション
    何を どこに

    delete
    2022/10/1 78
    change
    yank
    gamp
    ※2回で行思考になる(yyで列コピーみたいな)

    View full-size slide

  79. オペレータとモーション
    dd で行削除
    2022/10/1 79

    View full-size slide

  80. オペレータとモーション
    呪文の部分もあるけど……
    2022/10/1 80

    View full-size slide

  81. オペレータとモーション
    魔法 > vimのコマンド > SAOのコマンド
    2022/10/1 81
    System call generate luminous elementとか

    View full-size slide

  82. オペレータとモーション
    Vim便利やな……
    2022/10/1 82

    View full-size slide

  83. オペレータとモーション
    ???「といいつつも、やっぱりVSCode使いたいよね。」
    2022/10/1 83

    View full-size slide

  84. オペレータとモーション
    ???「いきなりVimを使うのはハードル高い」
    2022/10/1 84

    View full-size slide

  85. オペレータとモーション
    VSCodeの拡張機能も手放せない……
    2022/10/1 85

    View full-size slide

  86. オペレータとモーション
    コンテナ関連の作業とか……
    2022/10/1 86

    View full-size slide

  87. オペレータとモーション
    キーバインドはVim使いたいけど、
    環境はVSCode使いたい
    2022/10/1 87

    View full-size slide

  88. オペレータとモーション
    2022/10/1 88

    View full-size slide

  89. オペレータとモーション
    2022/10/1 89

    View full-size slide

  90. VSCodeVim
    そんなあなたにVSCodeVim
    2022/10/1 90

    View full-size slide

  91. VSCodeVim
    そんなあなたにVSCodeVim
    2022/10/1 91

    View full-size slide

  92. VSCodeVim
    VSCodeVimはVimのキーバインドを
    VSCodeでも使えるようにしたもの
    (Vimのエミュレータではない)
    2022/10/1 92

    View full-size slide

  93. VSCodeVim
    Vimのconfigとプラグインをそのまま読める
    拡張機能もある
    2022/10/1 93

    View full-size slide

  94. VSCodeVim
    2022/10/1 94

    View full-size slide

  95. VSCodeVim
    VSCodeでVimのキーバインドが使える!
    2022/10/1 95

    View full-size slide

  96. VSCodeVim
    VSCodeで
    Vimのキーバインドが
    使える!
    vi”する様子
    2022/10/1 96

    View full-size slide

  97. VSCodeVim
    めでたしめでたし
    2022/10/1 97

    View full-size slide

  98. おわり
    VimのキーバインドはVimiumなどでも使える
    2022/10/1 98

    View full-size slide

  99. おわり
    慣れると思考のスピードで編集できる(らしい)
    2022/10/1 99
    今回の紹介はVimの片鱗の紹介です, 私は素人です…

    View full-size slide

  100. おわり
    //快適なエディターライフを
    2022/10/1 100
    ドットコマンドやマクロなど、他にもDRYを減らす工夫がたくさんあるんですよ

    View full-size slide

  101. おわり
    ちなみに私はVimを使いこなせていません
    2022/10/1 101
    ドットコマンドやマクロなど、他にもDRYを減らす工夫がたくさんあるんですよ…

    View full-size slide

  102. おわり
    30分ルールを導入して頑張っていきます.
    2022/10/1 102
    「VSCodeしか使ったことない新卒2年目がPhpStormくんと友達になるためにやったこと」PHPカンファレンス2022より

    View full-size slide

  103. おわり
    空いた時間を使ってVTuberを見ましょう。
    Vimやるより人生変わるかも(個人の感想)。
    2022/10/1 103

    View full-size slide