$30 off During Our Annual Pro Sale. View Details »

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

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

mu_zaru

August 20, 2020
Tweet

More Decks by mu_zaru

Other Decks in Programming

Transcript

  1. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で

    macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  2. ノーマルモード モードを切り替えて使う ヴィジュアルモード 挿入モード コマンドモード i, a など ESC :,

    / など ESC ESC v, Ctrl-v など 文字の入力 ができる デフォルト カーソル移 動など 文字を範囲 選択できる 検索や各種 機能を使う
  3. 変更の範囲をコントロールできる I love i ESC i code. ESC I love

    I love code. u → → I love → 直前の変更を 取り消す事ができる モードの切り替えをする事で、変更の範囲をコントロールできる。 これは他のエディタにはない特徴。 Vim は繰り返しを自動化するのも得意で、自動化の範囲をコントロールする事 で効率的に編集ができる(繰り返しについては後で説明)
  4. 終わらせ方は複数ある 小ネタ :q :q! :wq :x ZZ 保存 内容を変更している しない

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

    警告が出る しない 警告を無視して閉じる 保存 タイムスタンプの更新 内容を変更している 内容を変更してない する 更新する 更新する する 更新する 更新しない する 更新する 更新しない
  6. Vim はカーソルを hjkl で操作 ↑ ← → ↓ k j

    l h カーソルキーでも移動はできるが、ホームポジションの 位置にある hjkl を使った方が高速に操作ができる
  7. I love code. 指定回数、繰り返せる l カーソル e までカーソルを移動させるには、 l を5回タイプする

    5x そこで 5l と入力すると、l を5回入力したことになる 回数指定はいろんなコマンドで使える
  8. I love code. ^ $ 行頭へ移動 行末へ移動 I love code.

    w b 次の単語へ移動 前の単語へ移動
  9. 1行目 2行目 3行目 ︙ 10行目 ︙ 最後の行 g 1行目へ移動 g

    10 10行目へ移動 Shift-g 最終行へ移動 Shift-g
  10. 4行目 5行目 6行目 7行目 8行目 6行目 7行目 8行目 9行目 10行目

    z z カーソル位置を画面の 真ん中までスクロールする
  11. / スラッシュで検索コマンド I love code. I love vim. I love

    emacs. /love / の後に指定した文字を検索 n 次の検索候補に移動
  12. I love code. f e f の後に打った文字を 探して移動 ; 次にヒットする文字へ移動

    , 前にヒットする文字へ移動 行の中で文字検索して移動 便利技
  13. I love code. I love vim. I love emacs. カーソル位置の単語を検索

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

    を like に変更してください 問題 I like code. I like vim. I like emacs. ↓ 今まで紹介したコマンドを使って
  15. 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
  16. 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 削除と入力をもっと楽に
  17. I love code. d カーソル位置の 単語 love を削除 w 例えば、単語を削除する

    x で1文字ずつ削除するのに比べて非常に楽 これはオペレータとモーションを組み合わせている
  18. I love code. d オペレータ 削除 delete の d w

    オペレータはテキスト編集 モーションは範囲指定 モーション 単語指定 word の w
  19. オペレータ + モーション例 d aw c iw y $ >

    j 削除 + 単語 = カーソル位置の 単語を削除 単語 変更 + = カーソル位置の 単語を削除して 挿入モードへ コピー + 行末 = 行末までをコピー インデント + 次の行 = 今と次の行を インデント ちなみにオペレータを2回繰り返すと、カーソル位置の行が対象範囲になる ・dd 現在の行を削除 ・>> 現在の行をインデント (テキストオブジェクト、あとで解説)
  20. 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 でカーソル位置の 単語を削除して挿入 モードになる
  21. I love code. I love vim. I love emacs. love

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

    を like に変更してください 問題 w * n n 改善版1 繰り返しをもっと楽に cw like ESC cw like ESC cw like ESC
  23. 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 に変更するの を繰り返している
  24. I love code. I love vim. I love emacs. love

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

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

    console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい 問題
  27. 文字のかたまりが テキストオブジェクト hoge 'piyo fuga' v a' ' ' で囲まれた文字を選択する

    ( ' ' を含む ) c i' ' ' で囲まれた文字を消して挿入モード a( a{ a[ at a" aw 単語 " " ( ) { } [ ] タグ その他のテキストオブジェクト( a か i が付く)
  28. const user = 'zaru tofu'; if (user == 'zaru') {

    console.log('user name:' + user); } '' や () {} で囲まれた文字を編集したい 問題 c i' c i( c i{
  29. i と a はノーマルモードと テキストオブジェクトでは 意味が違う ノーマルモードの i と、c オペレータが入力された後の

    i は違う。 モードによって同じキーでも役割が変わる。 c オペレータ入力後にモーション入力を待っている状態は、iw とすることで カーソル位置の単語を選択するテキスオブジェクトになる ノーマルモードの i は insert、テキストオブジェクトの i は inner 的な感じ c iw 小ネタ i
  30. テキストオブジェクトの 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. → → → どれもカーソル位置の単語を削除するが、単語の選択範囲が違う
  31. ESC と Ctrl-[ は同じ 小ネタ 物理 ESC キーがない Mac ユーザ、ESC

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