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

by usuyuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Vimのキーバインドに関して移動 ←h l→ j ↓ K ↑ 2022/10/1 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

オペレータとモーションオペレータモーション (テキストオブジェクト) ＋ 2022/10/1 72

Slide 73

Slide 73 text

オペレータとモーションオペレータモーション (テキストオブジェクト) ＋ delete Inner word 2022/10/1 73

Slide 74

Slide 74 text

オペレータとモーション何をどこに＋ delete Inner word 2022/10/1 74

Slide 75

Slide 75 text

オペレータとモーション消す内側の単語＋ delete Inner word 2022/10/1 75

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

オペレータとモーション移動する真ん中に＋ gamp middle 2022/10/1 77

Slide 78

Slide 78 text

オペレータとモーション何をどこに＋ delete 2022/10/1 78 change yank gamp ※2回で行思考になる(yyで列コピーみたいな)

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

VSCodeVim 2022/10/1 94

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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