無題の備忘録

IT技術について調べたことや学んだこと、試したこと記録するブログです。Erlang、ネットワーク、 セキュリティ、Linux関係のものが多いです。

「実践Vim」を読んで学んだこと - 第4章 ビジュアルモード

ビジュアルモード

Vimのビジュアルモードとは、テキストを選択して、それに対して操作を行えるモードだ。

Vimにはビジュアルモードが３種類ある。文字を扱うモード、行を扱うモード、それからテキストの矩形領域を扱うモードだ。

Vimでは、テキストの選択の概念が他のテキストエディタとは違っている。

ノーマルモードで使っていたコマンドは、ビジュアルモードでも同じよう使える。例えば、ビジュアルモードで、h,j.k,lをカーソル移動に使えて、それに従って選択される領域も変化する。

ただし、違う点もある。ビジュアルモードでのコマンドが、ノーマルモードと違うのは、そのコマンドが適用されるテキストを指定する方法だ。

ノーマルモードでは、変更コマンドを最初に呼び出してから、モーションとしてその範囲を指定する。これに対して、ビジュアルモードでは、最初に範囲選択をしてから、変更コマンドを呼び出す。

選択モード

選択モードは、印字家の文字によって、選択範囲が削除され、そこに入力された文字が挿入できるモードだ。このような挙動は他のテキストエディタではよく見る挙動だ。

<C-g>を押すと、ビジュアルモードと選択モードをトグルできる。見た目の違いは、画面最下部に表示されるメッセージだけで、-- VISUAL --と-- SELECT --が切り替えて表示される。

挿入モードの置換モードと同じで、このモードもあまり使わないだろう。本でもVimの特性が好きならば、このモードに使いみちを発見することはないだろうと言っている。

ビジュアルな選択範囲の定義

Vimには3種類のビジュアルモードがある。

文字指向のビジュアルモードでは、任意の1文字を起点として、その行中の文字範囲あるいは複数行にまたがる文字範囲のなかから任意の部分を選択できる。

行全体を操作したいのなら、行指向のビジュアルモードを使う。

ブロック指向のビジュアルモードでは、ドキュメント中の矩形領域を扱う。

ビジュアルモードの切り替え

ノーマルモードでvを押すと、文字指向のビジュアルモードが有効となる。文字指向ビジュアルモードで、vを押すとノーマルモードへ戻る。

ノーマルモードでVを押すと、行指向のビジュアルモードが有効になる。行指向ビジュアルモードでVを押すとノーマルモードへ戻る。

ブロック指向モードのビジュアルモードは<C-v>を押すことで有効になる。ブロック指向モードで<C-v>を押すとノーマルモードへ戻る。

選択範囲の操作

ビジュアルモードでは選択されている範囲は始点と終点で表現される。始点は位置が固定され、終点はカーソルに合わせて自由に移動する。h,j.k,lをカーソル移動に従って選択される領域も変化するのだが、他のコマンドも使える。例えば、f{char}によってその行に存在する{char}（文字）を検索して移動してくれるが、これによって移動した先にカーソルが移動する。すると、視点からカーソル位置までが選択されるといった具合になる。

oキーを使うと、始点と終点を入れ替えられる。始点が終点になり、終点が始点になる。最初の始点の位置を間違えたときには、oキーを押して始点の位置を変更すると、いちいちビジュアルモードを抜ける必要はない。

ビジュアルモードでもドットコマンド

ビジュアルモードで選択したテキストに行った変更もドットコマンドで繰り返すことができる。

例えば、Vjとキーを叩くと、行指向ビジュアルモードになり、現在の行と次の行が選択される。その後、>でインデントを1つ深くすることができる。もう一段インデントを深くしたいときは.でインデントを深くする操作を繰り返すことができる。

しかし、たいていはノーマルモードで変更を行いドットコマンドで繰り返す方がうまくいく。理由は、選択範囲の指定が次の変更先にうまくマッチするとは限らないからだ。

上記の例は、同じ選択範囲に対してドットコマンドを繰り返したが、Vj>のあとカーソルを移動して、.でインデントを深くすることもできる。選択範囲は2行なので、1行だけインデントしたいというときには使い勝手が悪い。

表形式のデータ編集

行に関する操作はもちろんだが、なんとVimは列の編集もできてしまう。そして、このような編集に使えるモードが、ブロック指向ビジュアルモードだ。

下記のようなドキュメントがあるとしよう。パイプ記号を使ってもっと表らしくしたい。ついでに、NameとPriceとの距離を縮めることしよう。

Name         Price
Apple          160
Orange         120
Banana         140
  1. 1行目で、カーソル移動を使って、パイプ記号を入れたいNameとPriceの間へ移動する。
  2. <C-v>3j でブロック指向ビジュアルモードに入って、カーソルが元あった場所から縦方向に3行選択する
  3. x... 選択範囲を4回削除する（ドットコマンドの例、NameとPriceの間を詰める編集だ。2回でも3回でも良い）
  4. gv もう一度同じ範囲を選択する
  5. r| 置換モードのワンショットで|を入力する（縦方向の | を入れる）
  6. yyp 1行目をコピーして2行目にペースト
  7. Vr- 行指向ブロックモードに入って、置換モードのワンショットで-を選択範囲に入力する（横方向の - を入れる）
Name    |Price
--------------
Apple   |  160
Orange  |  120
Banana  |  140

この例は少し難しいが、ブロック指向モードの可能性を感じさせる例だ。

列の同時編集

ブロック指向のビジュアルモードを使うと、複数の行を一度に編集することができる。

次のようなHTMLがあるとする。

<link rel="icon" href="/assets/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/favicon-24x24.png" sizes="24x24" type="image/png">
<link rel="icon" href="/assets/favicon-16x16.png" sizes="16x16" type="image/png">

png画像をassetsディレクトリの下にimgディレクトリ作成して、移動したなんていったときに、ブロック指向のビジュアルモードを使うと、便利なときがある。

  1. ノーマルモードで、1行目の 「favicon」 の 「f」 まで移動する
  2. <C-v>jj ビジュアルブロックモードで、3行分を選択する
  3. Iで挿入モードに移行する。
  4. 「img/」 を入力する。1行目にのみ入力される
  5. でノーマルモードへ、すると3行すべてに 「img/」 が入力される
<link rel="icon" href="/assets/img/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/img/favicon-24x24.png" sizes="24x24" type="image/png">
<link rel="icon" href="/assets/img/favicon-16x16.png" sizes="16x16" type="image/png">

同時に編集できて、なんだかお得感がある。

続きは下記のリンクより

stacktrace.hatenablog.jp