開発部のTAです。
ほとんどの人が「使いにくいエディタ」として名前を挙げるVimですが、私はVSCodeにVim拡張機能を入れて、あえて編集画面をVim化しています。
ちょっとしたテクニックを身につけるだけで、驚くほど快適にコーディングできるようになりますので是非覚えて使ってみてはいかがでしょうか。
基本の移動とモード
| コマンド | 説明 | 
|---|---|
| h / j / k / l | カーソル移動 ← ↓ ↑ → | 
| i | 挿入モードに入る(Insert) | 
| Esc | ノーマルモードに戻る | 
| gg | ファイル先頭に移動 | 
| G | ファイル末尾に移動 | 
| 0 | 行の先頭に移動 | 
| $ | 行の末尾に移動 | 
| w | ワードの先頭に移動 | 
編集・コピー・ペースト
| コマンド | 説明 | 
|---|---|
| x | カーソル上の文字を削除 | 
| dd | 現在行を削除(2dd で2行削除なども可能) | 
| yy | 行をコピー(ヤンク) | 
| p | カーソル行の下に貼り付け(ペースト) | 
| P | カーソル行の上に貼り付け | 
範囲選択と操作の取り消し
| コマンド | 説明 | 
|---|---|
| v | 範囲選択を開始 | 
| [Ctrl] + v | 矩形範囲選択を開始 SHIFT + iで挿入 | 
| y | 選択範囲をヤンク(コピー) | 
| p | ペースト(貼り付け) | 
| u | 直前の操作を取り消す(Undo) | 
| [Ctrl] + r | やり直す(Redo) | 
このあたりは最初に覚える部分ですが、次の章で紹介する“テキストオブジェクト”を理解すると、Vimが本当に強力になる瞬間を体感できます。
テキストオブジェクトで範囲選択を自在に
Vim の真髄とも言えるのが「テキストオブジェクト」操作です。
例えば次のようなコードがあるとします:
$message = “Hello, world!”;
通常のエディターで”内の文字列部分だけを編集したいとき
カーソルを移動して最初の[“]の後ろに移動
続けて[DEL]キーを13回押してHello world!を削除
Vimでは:
ci”
を入力すると、「”」で囲まれた中身を削除して挿入モードに入る、という魔法のような操作ができます。
| 文字 | 意味 | 
|---|---|
| c | change(変更)d:delete(削除) | 
| i | inside(内側)a:括弧含めて変更 | 
| “ | ダブルクォートを対象にする w:はword | 
同様に:
| コマンド | 動作 | 
|---|---|
| ci’ | シングルクォート内を変更 | 
| ci( | 括弧()の内側を変更 | 
| ci{ | 括弧{}の内側を変更 | 
| ci[ | 角括弧 [] の中を変更 | 
| ci< | HTMLタグなど < > の中を変更 | 
| ciw | カーソル位置にあるwordを変更 | 
このように c(change)や d(delete)と組み合わせて、対象範囲を瞬時に指定できるのが Vim の強みです。
「.」で繰り返す
Vim の「.(ドット)」コマンドは直前の編集操作を繰り返す機能です。
例えば次のようなリストを編集しているとき:
const user1 = “Alice”;
const user2 = “Bob”;
const user3 = “Charlie”;
1行目で ci” → Tom と入力します。
次の行に移動し . を押すだけで、同じ編集操作が繰り返されます。
慣れると「置換」よりも早く、直感的に複数行を編集できます。
単語の途中でも単語全体を削除:「daw」+「.」
daw
意味:
- d → delete(削除)
 - a → around(〜の周囲を含めて)
 - w → word(単語)
 
これで「カーソルが単語のどこにあっても、その単語全体+後ろの空白」を削除します。
次の単語にカーソルを移動して、
.
を押すだけで同様の作業が繰り返し実行できます。
.(ドット)は「直前の編集操作を繰り返す」コマンドです。
Vimは覚えることが多く習得までに時間がかかる反面、一度手に馴染めば他のエディターが使いにくく感じるほど便利です。最初こそ独特の操作体系に戸惑いますが、基本操作を理解することでその真価が見えてきます。
さらにカスタマイズで自分好みにしたり、プラグイン導入でVSCodeに負けないくらいたくさんの機能が利用できるようになります。ぜひ使ってみてはいかがでしょうか。
文:開発部TA