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

配信動画はこちら
https://www.youtube.com/watch?v=2iVxqaK7lsk&feature=youtu.be

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

Transcript

1. YouTube Live (2020.08.20 Thur. 21:00~)
2. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！
3. Vim を使うために必要な2つのこと
4. タッチ・タイピング
5. 矢印キーを捨てる勇気
6. Vim 4つのモード
7. ノーマルモード モードを切り替えて使う ヴィジュアルモード 挿入モード コマンドモード i, a など ESC :, / など ESC ESC v, Ctrl-v など
8. ノーマルモード モードを切り替えて使う ヴィジュアルモード 挿入モード コマンドモード i, a など ESC :, / など ESC ESC v, Ctrl-v など 文字の入力 ができる デフォルト カーソル移 動など 文字を範囲 選択できる 検索や各種 機能を使う
9. モードが分かれているメリットは？ 文字入力が すぐできない なんて不便
10. 変更の範囲をコントロールできる I love i ESC I love i で挿入モードに入って、「I love」と入力して ESC でノーマルモードに戻る →
11. 変更の範囲をコントロールできる I love i ESC i code. ESC I love I love code. → →
12. 変更の範囲をコントロールできる I love i ESC i code. ESC I love I love code. u → → I love → 直前の変更を 取り消す事ができる モードの切り替えをする事で、変更の範囲をコントロールできる。 これは他のエディタにはない特徴。 Vim は繰り返しを自動化するのも得意で、自動化の範囲をコントロールする事 で効率的に編集ができる（繰り返しについては後で説明）
13. とりあえず Vim の終わらせ方
14. 意図せず Vim が起動しても 慌てず終了させるコマンド :q コマンドとして入力
15. 終わらせ方は複数ある 小ネタ :q :q! :wq :x ZZ 保存 内容を変更している しない 警告が出る しない 警告を無視して閉じる 保存 タイムスタンプの更新 内容を変更している 内容を変更してない する 更新する 更新する する 更新する 更新しない する 更新する 更新しない
16. 終わらせ方は複数ある 小ネタ :q :q! :wq :x ZZ 保存 内容を変更している しない 警告が出る しない 警告を無視して閉じる 保存 タイムスタンプの更新 内容を変更している 内容を変更してない する 更新する 更新する する 更新する 更新しない する 更新する 更新しない
17. 基本のカーソル移動
18. Vim はカーソルを hjkl で操作 ↑ ← → ↓ k j l h カーソルキーでも移動はできるが、ホームポジションの 位置にある hjkl を使った方が高速に操作ができる
19. キーボード設定を変えて高速化 例えば l で → に移動する際に、この設定をすれば高速にカーソルが移動できる 小ネタ 両方 Max まで上げる
20. 比較
21. I love code. 指定回数、繰り返せる l カーソル e までカーソルを移動させるには、 l を5回タイプする 5x そこで 5l と入力すると、l を5回入力したことになる 回数指定はいろんなコマンドで使える
22. 効率的なカーソル移動
23. I love code. ^ $ 行頭へ移動 行末へ移動 I love code. w b 次の単語へ移動 前の単語へ移動
24. 1行目 2行目 3行目 ︙ 10行目 ︙ 最後の行 g 1行目へ移動 g 10 10行目へ移動 Shift-g 最終行へ移動 Shift-g
25. n行移動する時は相対行表示 小ネタ :set relativenumber カーソル位置からの相 対的な行数を表示して くれるので、Shift + n の指定が直感的
26. テキストがエディタの幅 で折り返しされているテ キストですよ。。 ここは改行で次の行。 折り返しの中で上下移動 便利技 j g j g k j や k は改行単位での行移動だが g を前につけると見た目上の行移動が可能になる
27. 基本のページ移動
28. Ctrl-f 約1画面分 下に移動する Ctrl-b 約1画面分 上に移動する
29. 効率的なページ移動
30. Ctrl-d 約半画面分 下に移動する Ctrl-u 約半画面分 上に移動する
31. Shift-h 画面上の 1番上にカーソル移動 Shift-m Shift-l 画面上の 真ん中にカーソル移動 画面上の 1番下にカーソル移動
32. 4行目 5行目 6行目 7行目 8行目 6行目 7行目 8行目 9行目 10行目 z z カーソル位置を画面の 真ん中までスクロールする
33. 検索
34. / スラッシュで検索コマンド I love code. I love vim. I love emacs. /love / の後に指定した文字を検索 n 次の検索候補に移動
35. I love code. f e f の後に打った文字を 探して移動 ; 次にヒットする文字へ移動 , 前にヒットする文字へ移動 行の中で文字検索して移動 便利技
36. I love code. I love vim. I love emacs. カーソル位置の単語を検索 便利技 * カーソル位置の love を検索 n 次の検索候補に移動
37. 基本の編集
38. I love code. i カーソル位置の 前から入力 a カーソル位置の 後ろから入力 I 行頭から入力 A 行末から入力
39. I love code. x カーソル位置の 文字を削除 I lve code. u 取り消し I love code. ↓
40. I love code. I love vim. I love emacs. love を like に変更してください 問題 I like code. I like vim. I like emacs. ↓ 今まで紹介したコマンドを使って
41. 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
42. 面倒くさい
43. 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 削除と入力をもっと楽に
44. もっと便利な編集 オペレータとモーション
45. I love code. d カーソル位置の 単語 love を削除 w 例えば、単語を削除する x で1文字ずつ削除するのに比べて非常に楽 これはオペレータとモーションを組み合わせている
46. I love code. d オペレータ 削除 delete の d w オペレータはテキスト編集 モーションは範囲指定 モーション 単語指定 word の w
47. オペレータ + モーション例 d aw c iw y $ > j 削除 + 単語 = カーソル位置の 単語を削除 単語 変更 + = カーソル位置の 単語を削除して 挿入モードへ コピー + 行末 = 行末までをコピー インデント + 次の行 = 今と次の行を インデント ちなみにオペレータを2回繰り返すと、カーソル位置の行が対象範囲になる ・dd 現在の行を削除　・>> 現在の行をインデント （テキストオブジェクト、あとで解説）
48. 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 でカーソル位置の 単語を削除して挿入 モードになる
49. I love code. I love vim. I love emacs. love を like に変更してください 問題 w * n n 改善版1 cw like ESC cw like ESC cw like ESC
50. I love code. I love vim. I love emacs. love を like に変更してください 問題 w * n n 改善版1 繰り返しをもっと楽に cw like ESC cw like ESC cw like ESC
51. . で繰り返し
52. . は最後の変更を繰り返す この場合は、最後の変更はカーソル位置の単語 ( love ) を削除した。これを繰り返すと、次のカーソ ル位置の単語は code なので、これが消える d w I␣love␣code. I␣code. → . I␣code. I␣. →
53. 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 に変更するの を繰り返している
54. I love code. I love vim. I love emacs. love を like に変更してください 問題 w * n n 改善版2 cw like ESC . n .
55. スッキリした けど一斉置換 を使えば？
56. I love code. I love vim. I love emacs. love を like に変更してください 問題 :%s/love/like/g 改善版3 Vim にも一斉置換のコマンド :%s/対象/置換/ コマンドがある . とどちらを使うかはシーンによって使い分けるのが良い。 一斉に置換をしても絶対に問題がない時は一斉置換で、1つずつ 確認しながら進めたい時は . の繰り返しが便利
57. テキストオブジェクト
58. const user = 'zaru tofu'; if (user == 'zaru') { console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい 問題
59. 文字のかたまりが テキストオブジェクト hoge 'piyo fuga' v a' ' ' で囲まれた文字を選択する ( ' ' を含む ) c i' ' ' で囲まれた文字を消して挿入モード a( a{ a[ at a" aw 単語 " " ( ) { } [ ] タグ その他のテキストオブジェクト（ a か i が付く）
60. const user = 'zaru tofu'; if (user == 'zaru') { console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい 問題 c i' c i( c i{
61. i と a はノーマルモードと テキストオブジェクトでは 意味が違う ノーマルモードの i と、c オペレータが入力された後の i は違う。 モードによって同じキーでも役割が変わる。 c オペレータ入力後にモーション入力を待っている状態は、iw とすることで カーソル位置の単語を選択するテキスオブジェクトになる ノーマルモードの i は insert、テキストオブジェクトの i は inner 的な感じ c iw 小ネタ i
62. テキストオブジェクトの 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. → → → どれもカーソル位置の単語を削除するが、単語の選択範囲が違う
63. ビジュアルモード
64. const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 全部コメントアウトしたい 問題
65. const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 末尾にセミコロンを付けたい 問題
66. ヴィジュアルモードは範囲選択できる v ビジュアルモード（文字） V ビジュアルモード（行） Ctrl-v ビジュアルモード（矩形）
67. const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 全部コメントアウトしたい 問題 I Ctrl-v Shift-g // ESC
68. const user = 'zaru' const domain = 'tofu-kun' console.log(`${user}@${domain}`) 末尾にセミコロンを付けたい 問題 A Ctrl-v Shift-g ; ESC $
69. ESC と Ctrl-[ は同じ 小ネタ 物理 ESC キーがない Mac ユーザ、ESC が遠くて押しにくい人は Ctrl-[ が同じ効果を持っているので、こちらがオススメ。 ちなみに、Vim で Ctrl-[ が ESC にエイリアスされているわけでは なく、Ctrl キー自体が同時に入力したキーの ASCII が下位5ビット 以外をゼロにする機能で、結果として [ が ESC と同じ ASCII にな るため。 ESC 0x1b で 2進数 11011 [ は 0x5b で 2進数 1011011 → 0011011 Ctrl を押すと0になる
70. ありがとうございました！ 次回は... Webページを見る冒険 をやります！ 木曜21時から30分 質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタン お願いします！ ムーザルちゃんねる