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

C302e84057a922dce0ecbe80207e3fcc?s=47 mu_zaru
August 20, 2020

ほんとうに怖くない 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

C302e84057a922dce0ecbe80207e3fcc?s=128

mu_zaru

August 20, 2020
Tweet

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 ボタン お願いします! ムーザルちゃんねる