ほんとうに怖くない Vim 入門

Slide 1

Slide 1 text

YouTube Live (2020.08.20 Thur. 21:00~)

Slide 2

Slide 2 text

話す人現役のエンジニア二人赤貝が好きな CTO とデザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で macOS アプリづくりが趣味ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォローお願いします！

Slide 3

Slide 3 text

Vim を使うために必要な2つのこと

Slide 4

Slide 4 text

タッチ・タイピング

Slide 5

Slide 5 text

矢印キーを捨てる勇気

Slide 6

Slide 6 text

Vim 4つのモード

Slide 7

Slide 7 text

ノーマルモードモードを切り替えて使うヴィジュアルモード挿入モードコマンドモード i, a など ESC :, / など ESC ESC v, Ctrl-v など

Slide 8

Slide 8 text

ノーマルモードモードを切り替えて使うヴィジュアルモード挿入モードコマンドモード i, a など ESC :, / など ESC ESC v, Ctrl-v など文字の入力ができるデフォルトカーソル移動など文字を範囲選択できる検索や各種機能を使う

Slide 9

Slide 9 text

モードが分かれているメリットは？文字入力がすぐできないなんて不便

Slide 10

Slide 10 text

変更の範囲をコントロールできる I love i ESC I love i で挿入モードに入って、「I love」と入力して ESC でノーマルモードに戻る →

Slide 11

Slide 11 text

変更の範囲をコントロールできる I love i ESC i code. ESC I love I love code. → →

Slide 12

Slide 12 text

変更の範囲をコントロールできる I love i ESC i code. ESC I love I love code. u → → I love → 直前の変更を取り消す事ができるモードの切り替えをする事で、変更の範囲をコントロールできる。これは他のエディタにはない特徴。 Vim は繰り返しを自動化するのも得意で、自動化の範囲をコントロールする事で効率的に編集ができる（繰り返しについては後で説明）

Slide 13

Slide 13 text

とりあえず Vim の終わらせ方

Slide 14

Slide 14 text

意図せず Vim が起動しても慌てず終了させるコマンド :q コマンドとして入力

Slide 15

Slide 15 text

終わらせ方は複数ある小ネタ :q :q! :wq :x ZZ 保存内容を変更しているしない警告が出るしない警告を無視して閉じる保存タイムスタンプの更新内容を変更している内容を変更してないする更新する更新するする更新する更新しないする更新する更新しない

Slide 16

Slide 16 text

Slide 17

Slide 17 text

基本のカーソル移動

Slide 18

Slide 18 text

Vim はカーソルを hjkl で操作 ↑ ← → ↓ k j l h カーソルキーでも移動はできるが、ホームポジションの位置にある hjkl を使った方が高速に操作ができる

Slide 19

Slide 19 text

キーボード設定を変えて高速化例えば l で → に移動する際に、この設定をすれば高速にカーソルが移動できる小ネタ両方 Max まで上げる

Slide 20

Slide 20 text

比較

Slide 21

Slide 21 text

I love code. 指定回数、繰り返せる l カーソル e までカーソルを移動させるには、 l を5回タイプする 5x そこで 5l と入力すると、l を5回入力したことになる回数指定はいろんなコマンドで使える

Slide 22

Slide 22 text

効率的なカーソル移動

Slide 23

Slide 23 text

I love code. ^ $ 行頭へ移動行末へ移動 I love code. w b 次の単語へ移動前の単語へ移動

Slide 24

Slide 24 text

1行目 2行目 3行目 ︙ 10行目 ︙ 最後の行 g 1行目へ移動 g 10 10行目へ移動 Shift-g 最終行へ移動 Shift-g

Slide 25

Slide 25 text

n行移動する時は相対行表示小ネタ :set relativenumber カーソル位置からの相対的な行数を表示してくれるので、Shift + n の指定が直感的

Slide 26

Slide 26 text

テキストがエディタの幅で折り返しされているテキストですよ。。ここは改行で次の行。折り返しの中で上下移動便利技 j g j g k j や k は改行単位での行移動だが g を前につけると見た目上の行移動が可能になる

Slide 27

Slide 27 text

基本のページ移動

Slide 28

Slide 28 text

Ctrl-f 約1画面分下に移動する Ctrl-b 約1画面分上に移動する

Slide 29

Slide 29 text

効率的なページ移動

Slide 30

Slide 30 text

Ctrl-d 約半画面分下に移動する Ctrl-u 約半画面分上に移動する

Slide 31

Slide 31 text

Shift-h 画面上の 1番上にカーソル移動 Shift-m Shift-l 画面上の真ん中にカーソル移動画面上の 1番下にカーソル移動

Slide 32

Slide 32 text

4行目 5行目 6行目 7行目 8行目 6行目 7行目 8行目 9行目 10行目 z z カーソル位置を画面の真ん中までスクロールする

Slide 33

Slide 33 text

検索

Slide 34

Slide 34 text

/ スラッシュで検索コマンド I love code. I love vim. I love emacs. /love / の後に指定した文字を検索 n 次の検索候補に移動

Slide 35

Slide 35 text

I love code. f e f の後に打った文字を探して移動 ; 次にヒットする文字へ移動 , 前にヒットする文字へ移動行の中で文字検索して移動便利技

Slide 36

Slide 36 text

I love code. I love vim. I love emacs. カーソル位置の単語を検索便利技 * カーソル位置の love を検索 n 次の検索候補に移動

Slide 37

Slide 37 text

基本の編集

Slide 38

Slide 38 text

I love code. i カーソル位置の前から入力 a カーソル位置の後ろから入力 I 行頭から入力 A 行末から入力

Slide 39

Slide 39 text

I love code. x カーソル位置の文字を削除 I lve code. u 取り消し I love code. ↓

Slide 40

Slide 40 text

I love code. I love vim. I love emacs. love を like に変更してください問題 I like code. I like vim. I like emacs. ↓ 今まで紹介したコマンドを使って

Slide 41

Slide 41 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w 4x i like ESC * n 4x i like ESC n 4x i like ESC

Slide 42

Slide 42 text

面倒くさい

Slide 43

Slide 43 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w 4x i like ESC * n 4x i like ESC n 4x i like ESC 削除と入力をもっと楽に

Slide 44

Slide 44 text

もっと便利な編集オペレータとモーション

Slide 45

Slide 45 text

I love code. d カーソル位置の単語 love を削除 w 例えば、単語を削除する x で1文字ずつ削除するのに比べて非常に楽これはオペレータとモーションを組み合わせている

Slide 46

Slide 46 text

I love code. d オペレータ削除 delete の d w オペレータはテキスト編集モーションは範囲指定モーション単語指定 word の w

Slide 47

Slide 47 text

オペレータ + モーション例 d aw c iw y $ > j 削除 + 単語 = カーソル位置の単語を削除単語変更 + = カーソル位置の単語を削除して挿入モードへコピー + 行末 = 行末までをコピーインデント + 次の行 = 今と次の行をインデントちなみにオペレータを2回繰り返すと、カーソル位置の行が対象範囲になる・dd 現在の行を削除　・>> 現在の行をインデント（テキストオブジェクト、あとで解説）

Slide 48

Slide 48 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w 4x i like ESC * n 4x i like ESC n 4x i like ESC 改善版1 cw like ESC オペレータ変更 change の c モーション単語指定 word の w cw でカーソル位置の単語を削除して挿入モードになる

Slide 49

Slide 49 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w * n n 改善版1 cw like ESC cw like ESC cw like ESC

Slide 50

Slide 50 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w * n n 改善版1 繰り返しをもっと楽に cw like ESC cw like ESC cw like ESC

Slide 51

Slide 51 text

. で繰り返し

Slide 52

Slide 52 text

. は最後の変更を繰り返すこの場合は、最後の変更はカーソル位置の単語 ( love ) を削除した。これを繰り返すと、次のカーソル位置の単語は code なので、これが消える d w I␣love␣code. I␣code. → . I␣code. I␣. →

Slide 53

Slide 53 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w * n n 改善版2 cw like ESC cw like ESC cw like ESC . . でカーソル位置の単語を like に変更するのを繰り返している

Slide 54

Slide 54 text

I love code. I love vim. I love emacs. love を like に変更してください問題 w * n n 改善版2 cw like ESC . n .

Slide 55

Slide 55 text

スッキリしたけど一斉置換を使えば？

Slide 56

Slide 56 text

I love code. I love vim. I love emacs. love を like に変更してください問題 :%s/love/like/g 改善版3 Vim にも一斉置換のコマンド :%s/対象/置換/ コマンドがある . とどちらを使うかはシーンによって使い分けるのが良い。一斉に置換をしても絶対に問題がない時は一斉置換で、1つずつ確認しながら進めたい時は . の繰り返しが便利

Slide 57

Slide 57 text

テキストオブジェクト

Slide 58

Slide 58 text

const user = 'zaru tofu'; if (user == 'zaru') { console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい問題

Slide 59

Slide 59 text

文字のかたまりがテキストオブジェクト hoge 'piyo fuga' v a' ' ' で囲まれた文字を選択する ( ' ' を含む ) c i' ' ' で囲まれた文字を消して挿入モード a( a{ a[ at a" aw 単語 " " ( ) { } [ ] タグその他のテキストオブジェクト（ a か i が付く）

Slide 60

Slide 60 text

const user = 'zaru tofu'; if (user == 'zaru') { console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい問題 c i' c i( c i{

Slide 61

Slide 61 text

i と a はノーマルモードとテキストオブジェクトでは意味が違うノーマルモードの i と、c オペレータが入力された後の i は違う。モードによって同じキーでも役割が変わる。 c オペレータ入力後にモーション入力を待っている状態は、iw とすることでカーソル位置の単語を選択するテキスオブジェクトになるノーマルモードの i は insert、テキストオブジェクトの i は inner 的な感じ c iw 小ネタ i

Slide 62

Slide 62 text

テキストオブジェクトの i と a の違い d w 小ネタ d iw d aw w はカーソル位置以降のみ（空白を含むかどうかはオペレータによって違う） iw はカーソル前も含んだ単語で、空白を含まない aw はカーソル前も含んだ単語で、空白を含む iw は c などの編集に向き、aw は d の削除に向いている I␣love␣code. I␣lcode. I␣love␣code. I␣␣code. I␣love␣code. I␣code. → → → どれもカーソル位置の単語を削除するが、単語の選択範囲が違う

Slide 63

Slide 63 text

ビジュアルモード

Slide 64

Slide 64 text

const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 全部コメントアウトしたい問題

Slide 65

Slide 65 text

const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 末尾にセミコロンを付けたい問題

Slide 66

Slide 66 text

ヴィジュアルモードは範囲選択できる v ビジュアルモード（文字） V ビジュアルモード（行） Ctrl-v ビジュアルモード（矩形）

Slide 67

Slide 67 text

const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 全部コメントアウトしたい問題 I Ctrl-v Shift-g // ESC

Slide 68

Slide 68 text

const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 末尾にセミコロンを付けたい問題 A Ctrl-v Shift-g ; ESC $

Slide 69

Slide 69 text

ESC と Ctrl-[ は同じ小ネタ物理 ESC キーがない Mac ユーザ、ESC が遠くて押しにくい人は Ctrl-[ が同じ効果を持っているので、こちらがオススメ。ちなみに、Vim で Ctrl-[ が ESC にエイリアスされているわけではなく、Ctrl キー自体が同時に入力したキーの ASCII が下位5ビット以外をゼロにする機能で、結果として [ が ESC と同じ ASCII になるため。 ESC 0x1b で 2進数 11011 [ は 0x5b で 2進数 1011011 → 0011011 Ctrl を押すと0になる

Slide 70

Slide 70 text

ありがとうございました！次回は... Webページを見る冒険をやります！木曜21時から30分質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタンお願いします！ムーザルちゃんねる