Vim をブラウザで練習する：vimtutor 形式のチュートリアル（インストール不要）
キーボードで操作するので、パソコンで開いてください。手順の内容は、このページの下で読めます。
このチュートリアルについて
Vim の基本操作を、ブラウザの中で動く Vim で練習するチュートリアルです。インストールも登録も要りません。全 9 課の手順を 1 つずつ進め、できたらその場で次へ進みます。
vimtutor は Vim に付いてくる練習用の教材です。Vim が入っていれば、ターミナルで vimtutor と打つと練習用のファイルの写しが開き、 ファイルに書かれた指示どおりに直しながら覚えていきます（日本語版は vimtutor ja、Neovim では :Tutor）。
このチュートリアルは、vimtutor と同じ範囲（移動・削除・挿入・取り消し・貼り付け・検索と置換・保存と終了）を、1 手順 1 操作に分けたものです。文章はこのページのために書き、練習のファイルは、開発でよく直すコード（余計な文字・抜けたセミコロン・消し忘れたデバッグ出力など）にしています。 エディタは本物の Vim の動きに合わせてあり、保存（:w）や終了（:q!）も本物と同じように効きます。
チュートリアルの課と手順
1. カーソルを動かす
Vim では矢印キーの代わりに h j k l で動きます。h は左、j は下、k は上、l は右です。
- j を 2 回押して、3 行目（console.log の行）へ下ります。
- l を押して、console の c にカーソルを合わせます。
- k を押して、1 行上（const の行）へ上がります。
- h を押して、その行の先頭まで戻ります。
2. 1 文字消す（x）
x は、カーソルの上の 1 文字を消します。greeting の t が 1 つ多いので直しましょう。
- 1 行目の余分な t の上へ動き、x を押して greeting にします。
- 2 行目も同じように直します。
3. 文字を入れる（i と A）
i を押すと「挿入モード」になり、打った文字がカーソルの前に入ります。Esc で、キーが命令として効く「ノーマルモード」に戻ります。
- 1 行目の a のうしろの空白にカーソルを置き、i を押して , を打ちます。
- Esc を押して、ノーマルモードに戻ります。
- 2 行目で A を押して行の終わりへ行き、; を打って Esc を押します。
4. 消す（dw・dd・d$）
d は「消す」命令です。うしろに、どこまで消すかを付けます。dw は単語、dd は行、d$ は行の終わりまで。前に数を付けると繰り返します。
- 1 行目の 2 つ目の const の先頭で dw を押し、重なった const を消します。
- 2 行目へ下りて 2dd を押し、console.log の 2 行をまとめて消します。
- return の行で ; のうしろの空白にカーソルを置き、d$ でコメントを消します。
5. 取り消す（u と Ctrl+r）
u は直前の変更を取り消します。取り消しすぎたら Ctrl+r でやり直せます。
- 2 行目で dd を押して消します。
- u を押して、消した行を戻します。
- Ctrl+r を押して、取り消しを取り消します（もう一度消えます）。
6. 貼り付ける・置き換える・変える（p・r・cw）
dd で消した行は、p でカーソルの下に貼り付けられます。r は 1 文字の置き換え、cw は単語の書き換えです。
- 1 行目（3. deploy）で dd を押して消します。
- 2. build の行へ下りて p を押し、1・2・3 の順に並べます。
- if の行で、数字の 0 のつもりで打たれた O の上へ動き、r0 で直します。
- 次の行の usr の先頭で cw を押し、user と打って Esc を押します。
7. 探す・置き換える（/・n・:s）
/ のあとに言葉を打って Enter で、その言葉へ飛びます。n で次へ。:s/前/後/ で、その行の言葉を置き換えます。
- /TODO と打って Enter を押し、TODO を探します。
- n を押して、次の TODO へ移ります。
- fetch の行へ下りて、:s/http/https/ と打って Enter を押します。
8. 行を足す・写す（o と yy）
o はカーソルの下に新しい行を作って挿入モードになります（上に作るのは O）。yy は行を写し取り、p で貼り付けます。
- 1 行目で o を押し、空白を 2 つ打ってから start(); と打って、Esc を押します。
- "apple" の行で yy を押し、続けて p で貼り付けます。
9. 保存して終える（:w と :q!）
: を押すと、画面の一番下に命令を打つ欄が出ます。:w で保存、:q! で保存せずに終える、:wq で保存して終えるです。
- :w と打って Enter を押し、保存します。
- :q! と打って Enter を押し、Vim を終えます。
このチュートリアルで覚えるキー
| キー | すること |
|---|---|
| h j k l | 左・下・上・右へ動く |
| x | カーソルの上の 1 文字を消す |
| i / A | カーソルの前に入れる / 行の終わりに足す |
| Esc | ノーマルモードに戻る |
| dw / d$ / dd | 単語・行の終わりまで・行を消す（2dd のように数を付けると繰り返す） |
| u / Ctrl+r | 取り消す / やり直す |
| p | 消した・写した行をカーソルの下に貼り付ける |
| r | カーソルの上の 1 文字を置き換える |
| cw | 単語を書き換える |
| / n N | 探す・次へ・前へ |
| :s/前/後/ | その行で置き換える（:%s/前/後/g でファイル全体） |
| o / O | 下 / 上に行を足して入力を始める |
| yy | 行を写し取る |
| :w / :wq / :q! | 保存する / 保存して終える / 保存せずに終える |
よくある質問
Vim を終えるにはどうしますか？
Esc を押してノーマルモードに戻ってから、保存せずに終えるなら :q! と打って Enter、保存して終えるなら :wq と打って Enter です。変更していなければ :q だけで終えられます。
手元で vimtutor を始めるにはどうしますか？
Vim が入っていれば、ターミナルで vimtutor と打つと始まります。日本語版は vimtutor ja です。Neovim では、Neovim を開いて :Tutor と打ちます。
矢印キーではだめですか？
矢印キーでも動けます。ただ、h j k l は手を指の定位置から動かさずに押せるので、慣れると速くなります。このチュートリアルでも h j k l で練習します。
途中でページを閉じたら、続きから始められますか？
どの課まで進んだかは、このブラウザに覚えておきます。次に開くと、その課の最初から始まります。
続きを練習する
WebTerm Learn の Vim 入門編では、ビジュアルモード・テキストオブジェクト・. での繰り返し・マクロまでを、スライドと演習でゲームのように 1 つずつ進めます。 演習はこのページと同じブラウザの中の Vim で、操作が合っているかをその場で確かめます。ターミナルの基本から始めたい人は ターミナル入門編 もあります。