Vim 入門ガイド

モーダルエディタの概念から実践的なテクニックまで
ゼロからVimを学ぶ

🚨 まずはこれだけ覚えよう
保存して終了: Esc → :wq → Enter
保存せずに終了: Esc → :q! → Enter
基本概念を学ぶ チートシートへ
Introduction

Vim とは？

キーボードだけで高速編集 - 生産性を向上させるモーダルエディタ

🤔 なぜキーボードだけ？なぜモードがある？

Vimは「モーダルエディタ」と呼ばれ、普通のエディタと違い、モードを切り替えて使います。これには重要な理由があります：

📊
コードは書くより読む時間が長い プログラミングで実際にキーを打っている時間は、読んだり考えたり移動したりする時間に比べて圧倒的に短いです。
🎯
移動専用モードをデフォルトに だからVimは「移動専用モード（ノーマルモード）」をデフォルトにしました。手をキーボードから離さずに高速で移動できます。
⌨️
キーを使い回す 同じキー（例：w）を「移動コマンド」としても「削除対象指定」としても使えます。覚えるキーが減ります。
⚠️ VSCodeユーザーへ: VSCodeでVimを使うには「Vim拡張機能」のインストールが必要です。標準では入っていません。
🎮

モーダル操作

移動・入力・選択をモードで切り替え。hjklのようなキーを複数の目的で使い回し、ショートカットを減らします。

🧩

オペレータ + モーション

「何をするか（オペレータ）」と「どこまで（モーション）」を組み合わせることで、無限の編集パターンを作れます。

d（削除）+ w（単語）= dw（単語を削除）
🌐

どこでも使える

SSH接続先のサーバー、Dockerコンテナ、ターミナルなど、GUIが使えない環境でも必ず利用できます。

Core Concepts

4つのモード

Vimを理解する上で欠かせない4つのモード

N

ノーマルモード

デフォルト

最も重要なモード

コードを書くより読んだり移動したりする時間の方が長いため、このモードがデフォルトです。

主な操作
hjkl - カーソル移動
dd - 行削除
u - 取り消し
カーソルの前に挿入 i
カーソルの後に挿入 a
下に新しい行を作って挿入 o
I

挿入モード

-- INSERT --

文字入力モード

通常のテキストエディタのように文字を入力できます。Ctrl+nで補完も使えます。

入力例
|
ノーマルモードへ戻る
Esc
V

ビジュアルモード

-- VISUAL --

テキスト選択

選択してからコピー・削除・置換などを行います。

選択例
選択されたテキスト
選択開始
v V Ctrl+v
:

コマンドラインモード

-- COMMAND --

特殊操作

保存・終了・検索・置換などの特殊なコマンドを実行します。

よく使うコマンド
:w - 保存
:q - 終了
:wq - 保存して終了
コマンドモードへ
:

モード切り替えの流れ

ノーマルモード
（デフォルト）
↑
i a o
挿入モード
Esc
↓
↑
v V Ctrl+v
ビジュアルモード
Esc
↓
↑
:
コマンドモード
Enter / Esc
↓
💡 重要: 編集後は必ずEscでノーマルモードに戻りましょう。コマンド実行後は自動で戻ります。

🧩 Vimの核心: オペレータ + モーション

Vimの強力さは「何をするか（オペレータ）」と「どこまで（モーション）」を組み合わせることにあります。

オペレータ（操作）

d 削除（delete）
c 変更（change）
y コピー（yank）
v 選択（visual）
> インデント
+

モーション（移動/範囲）

w 次の単語
e 単語の末尾
b 前の単語
$ 行末まで
iw 単語全体（inner word）
=

組み合わせ例

dw → カーソルから次の単語まで削除
diw → カーソル下の単語を丸ごと削除
y$ → カーソルから行末までコピー
ci" → ""内を削除して挿入モード

📌 テキストオブジェクト（i / a）

i = inner（内側）/ a = around（周り含む）

iw = 単語
i" = ""内
i( = ()内
i{ = {}内
it = HTMLタグ内
Interactive Demo

カーソル移動を体験

基本のhjklから効率的な移動まで実際に試そう

キーボードのキーを押して、テキストエリア内のカーソルを動かしてみてください

💡 ggで文書先頭、Gで文書末尾にジャンプできます

h←
j↓
k↑
l→
w次の単語
b前の単語
0行頭
$行末
gg文書先頭
G文書末尾
sample.js NORMAL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// ====================================
// Vim Demo File - Move cursor with hjkl
// Try: gg (top), G (bottom), /function (search)
// ====================================
function calculateSum(a, b) {
const result = a + b;
return result;
}
function greetUser(name) {
console.log("Hello, " + name);
return "Welcome to Vim!";
}
// End of demo file
"sample.js" 15L, 380B 1,1 All
Cheat Sheet

インタラクティブ チートシート

よく使うコマンドをカテゴリ別に表示。コピーしてすぐ使えます。

🎯 繰り返し回数を指定する

Vimではコマンドの前に数字を付けると、その回数分繰り返します。

5j → 5行下へ
3dd → 3行削除
10G → 10行目へ

🎯 カーソル移動

h j k l
左・下・上・右に移動
w
次の単語の先頭へ
b
前の単語の先頭へ
e
次の単語の末尾へ
0
行頭へ
$
行末へ
gg
文書の先頭へ
G
文書の末尾へ
5G
5行目へ移動（数字+G）
%
対応する括弧へ
*
カーソル下の単語を検索（次へ: n）
fx
行内で文字xを検索（次: ; 前: ,）

✏️ 挿入モードへ

i
カーソル位置で挿入
a
カーソルの次から挿入
I
行頭で挿入
A
行末で挿入
o
下に新しい行を挿入
O
上に新しい行を挿入
Esc
挿入モードを終了

✂️ 編集・削除

x
1文字削除
dd
行を削除
dw
カーソルから次の単語まで削除
※単語の途中ではその部分だけ
diw
カーソル下の単語を丸ごと削除
d$
カーソル位置から行末まで削除
yy
行をコピー（ヤンク）
p
ペースト（後ろ）
P
ペースト（前）
u
取り消し（Undo）
Ctrl+r
やり直し（Redo）
⚠️ ブラウザと競合する場合あり
r
1文字置き換え
.
最後の操作を繰り返し

📋 ビジュアルモード

v
文字単位で選択開始
V
行単位で選択開始
Ctrl+v
矩形選択（ブロック）
>
選択範囲をインデント
<
選択範囲を逆インデント
y
選択範囲をコピー
d
選択範囲を削除

💾 ファイル操作

:w
保存（write）
:q
終了（quit）
:wq
保存して終了
:q!
保存せずに強制終了
:e filename
ファイルを開く（edit）
:sav filename
名前を付けて保存（saveas）
Practice

実践的な使い方

実際のコードを例に、Vimでの操作を紹介

01

関数を移動する

Before
// ファイルの上部
function helper() {
  return "help";
}

function main() {
  console.log("start");
}

// この下に移動したい
After
// ファイルの上部
function main() {
  console.log("start");
}

// この下に移動したい
function helper() {
  return "help";
}
} 関数定義の先頭へ移動
da{ {}内を含めて削除（around {）
3j 3行下へ移動
p ペースト
02

一括置換

Before
let userName = "John";
let userAge = 30;
let userEmail = "john@example.com";
After
let customerName = "John";
let customerAge = 30;
let customerEmail = "john@example.com";
:%s/user/customer/g %=全行、s=置換、g=行内全て
:%s/user/customer/gc c=確認しながら（y/n/a/q/l）
構文の意味:
  • % = ファイル全体
  • s = substitute（置換）
  • /old/new/ = 古い文字列→新しい文字列
  • g = global（行内の全て）
03

矩形編集で一括コメントアウト

Before
console.log("line 1");
console.log("line 2");
console.log("line 3");
console.log("line 4");
After
// console.log("line 1");
// console.log("line 2");
// console.log("line 3");
// console.log("line 4");
Ctrl+v 矩形選択モード
3j 3行下まで選択
I 行頭に挿入（大文字I）
// コメント記号を入力
Esc 全行に反映！（矩形編集の特徴）
💡 なぜEscで全行に反映される？
矩形選択モードでI（挿入）やA（追加）を使うと、入力した内容が選択した全行に一度に適用されます。
Advanced Tips

より深く知る

Vimをマスターするための重要な概念

📋 レジスタ（クリップボード）

Vimは削除やコピーした内容をレジスタに保存します。

"ayy → レジスタaに行をコピー
"ap → レジスタaからペースト
:reg → レジスタ一覧表示

通常のddやyyは無名レジスタ（"）に保存されます。

🔁 ドットコマンド（.）

最後に行った操作を繰り返します。これはVimの強力な機能の一つです。

1. ciw → 単語を変更
2. Esc → ノーマルモードへ
3. w → 次の単語へ
4. . → 同じ変更を適用！

📹 マクロ（q）

一連の操作を記録して再生できます。

qa → マクロaの記録開始
（操作を実行）
q → 記録終了
@a → マクロaを実行
@@ → 最後のマクロを再実行
5@a → 5回実行

❓ ヘルプの使い方

Vimには充実した組み込みヘルプがあります。

:help → ヘルプ全体
:help dd → ddコマンドのヘルプ
:help i_<Esc> → 挿入モードでのEscのヘルプ
Ctrl+] → リンクを開く
Ctrl+o → 戻る
Configuration

.vimrc 設定例

使いやすくするための基本設定

~/.vimrc（Linux/Mac）または ~/_vimrc（Windows）に設定を書きます。

基本設定

" 行番号表示
set number

" シンタックスハイライト（色付け）
syntax on

" タブをスペースに変換
set expandtab
set tabstop=2
set shiftwidth=2

" 検索時にハイライト
set hlsearch

" 検索時の大文字小文字
set ignorecase    " 小文字だけなら大文字小文字無視
set smartcase     " 大文字を含めたら区別する

ignorecase + smartcase: 小文字だけで検索すると「test」が「Test」「TEST」にもマッチ。大文字を含めると「Test」は「test」にマッチしません。

見た目の改善

" カラースキーム（環境によって異なる場合あり）
set background=dark
try
  colorscheme desert
catch
  " デフォルトを使用
endtry

" カーソル行をハイライト
set cursorline

" 対応する括弧を表示
set showmatch

" ステータスラインを常に表示
set laststatus=2

注意: Neovimや特定の環境ではdesertがない場合があります。try-catchで囲むと安全です。

便利な機能

" バックスペースで削除可能に
set backspace=indent,eol,start

" マウス操作（賛否両論あり）
" 有効にすると端末でのコピペ方法が変わります
" set mouse=a

" 自動インデント
set autoindent
set smartindent

" 自動コメントアウトを無効化
" 新しい行を作った時に自動でコメント記号を入れない
autocmd FileType * setlocal formatoptions-=r
autocmd FileType * setlocal formatoptions-=o

マウス設定: 有効にするとVim内でマウスが使えますが、端末本来のコピペ（選択してCtrl+C）が使えなくなります。Vim方式のコピペ（yank/paste）を使う必要があります。

🚀 クイックスタート

1 ~/.vimrc を作成
2 上の設定をコピペ
3 Vimを再起動
✓ コピーしました！