Vim × HHKB Trainer
実際のコーディングシナリオを Vim キーバインドで操作しながら、 HHKB の配列にも同時に慣れていく練習アプリです。 下のキーボード図に押したキーがハイライト表示されます。
キーを押してみてください
Vim レッスン
実際の編集操作を通して Vim を体得- 01. hjkl で移動movement
h(←) j(↓) k(↑) l(→) でカーソルを動かせます。2 行目の行末までカーソルを移動し、a で挿入モードに入って「ok」と入力、Esc で抜けてください。
- 02. 単語単位の移動 (w/b/e)movement
w で次の単語、b で前の単語、e で単語末へ移動。w を 2 回押して 3 単語目「fox」の先頭にカーソルを乗せてください。
- 03. dd で行削除edit
真ん中の不要な行を dd で削除してください。
- 04. yy と p で行コピーyank
1 行目をコピー (yy) して、2 行目の下に貼り付け (p) てください。
- 05. ci" で引用符の中身を変更edit
引用符の中の文字列を ci" で削除し、挿入モードで「vim」と打って Esc を押してください。
- 06. dw で単語削除edit
「bad 」を dw で削除して「good idea」だけにしてください。
- 07. o で下に新規行edit
o で 1 行目の下に新しい行を作り、「hello」と入力して Esc してください。
- 08. A で行末に追記edit
A で行末に挿入モードに入り「!」を追加して Esc してください。
- 09. x で 1 文字削除edit
余計な「!」を x で削除して「hello」にしてください。
- 10. 実践: 関数名のリファクタcombo
ciw を使って関数名 "oldName" を "newName" に書き換えてください。
- 11. 数値プレフィックス (3w)advanced
モーションの前に数値を付けると繰り返せます。3w で 3 単語進み、「gamma」の先頭にカーソルを置いてください。
- 12. 5j で 5 行下へadvanced
5j とタイプすると 5 行下に一気に移動します。6 行目までジャンプしてください。
- 13. fX で文字検索advanced
f は行内の指定文字へジャンプします。fX で「X」の位置までカーソルを移動してください。
- 14. r で 1 文字置換advanced
r の後ろに 1 文字を入力すると、カーソル位置の文字をその 1 文字に置き換えます。「kello」を「hello」にしてください。
- 15. J で行連結advanced
J は次の行を空白を 1 つ挟んで連結します。2 行を 1 行に繋げてください。
- 16. ~ で大小文字切替advanced
~ はカーソル位置の文字の大小を反転します。5~ で「hello」を「HELLO」にしてください。
- 17. % で対応する括弧へジャンプadvanced
( 上で % を押すと対応する ) へ飛びます。閉じ括弧 ) までカーソルを移動してください。
- 18. 3dd で 3 行削除advanced
数値+ddで複数行を一度に削除できます。中央の不要な 3 行を削除してください。
- 19. v で範囲選択して dvisual
v で文字単位の Visual モードに入り、選択範囲を d で削除できます。「BAD 」を選択して削除し、「good」だけ残してください。
- 20. >> で行インデントadvanced
>> で行頭にスペース 2 つを追加します。3>> で 3 行まとめてインデントしてください。
- 21. G と gg でファイル端へadvanced
G でファイル末尾、gg でファイル先頭へ移動します。ファイル末尾までジャンプしてください。
- 22. dG でカーソル位置から末尾まで削除advanced
dG はカーソル行から最終行までをすべて削除します。2 行目以降を削除してヘッダーだけ残してください。
- 23. . で直前の変更を繰り返すadvanced
Vim の . (ドット) は「直前の変更」を再生します。x で 1 文字消したあと . を 4 回押すだけで 5 文字削除できます。「XXXXXhello」の X を全部消して「hello」にしてください。
- 24. ciw + . で複数単語を置換advanced
ciw でカーソル位置の単語を新しい単語に置き換えたあと、次の置き換えたい単語の上で . を押すと同じ変更を繰り返せます。「foo」を「bar」に 2 か所書き換えてください。
- 25. df) で対応括弧まで削除advanced
df は「指定文字を含めて削除」。カーソル位置から括弧 ) までを df) で一気に削除し、「const x = ;」にしてください。
- 26. dt; で「;」の手前まで削除advanced
dt は「指定文字の手前まで」削除します (指定文字自体は残る)。dt; で末尾の「;」を残しつつ右側を削除してください。
- 27. D で行末まで削除advanced
D は d$ と同じく「カーソルから行末まで」削除します。コメントだけ残して右側を削除してください。
- 28. C で行末まで変更advanced
C は c$ と同じで「カーソルから行末まで」を削除しつつ挿入モードに入ります。「TODO: 」を残して「done」と書き換えてください。
- 29. u で取り消し / Ctrl-r でやり直しadvanced
間違って dd で行を消してしまった想定です。u で元に戻し、Ctrl-r で再度消し、もう一度 u で復元してください。
- 30. gUw で単語を大文字化advanced
gU は「指定範囲を大文字化」するオペレータです。gUw で 1 単語を大文字に変えてください。「hello」を「HELLO」にしてください。
- 31. gUU で行ごと大文字化advanced
gUU は現在行をまるごと大文字化します。1 行目を大文字に変えてください。
- 32. Ctrl-a で数値を加算advanced
Ctrl-a はカーソル上 (またはその右の最も近い) 数値を 1 増やします。3 Ctrl-a で 3 増やすことも可能。「version 1」を「version 4」にしてください。
- 33. / で検索advanced
/ を押すと検索モードに入ります。/needle Enter でカーソルが needle にジャンプします。文中の「needle」までカーソルを動かしてください。
- 34. n で次の一致, N で前の一致advanced
/foo で検索したあと n で次の一致、N で前の一致に飛びます。/foo してから n を 2 回押し、3 番目の foo に到達してください。
- 35. cgn と . でリファクタadvanced
/old で検索したあと cgn で「次の一致を変更」できます。新しい単語を入力して Esc、続けて . を押すと同じ変更を次の一致にも繰り返せます。3 か所の「old」を「new」に書き換えてください。
- 36. qa で マクロ記録 / @a で再生advanced
qa を押してマクロ記録開始、適当な編集 (例: 行頭に // をつける) をして q で記録終了。@a でそのマクロを再生できます。1 行目で qa I // Esc j q を実行 → @a を 2 回押して残り 2 行にも // を付けてください。
- 37. Ctrl-d で半画面下へadvanced
Ctrl-d はビューポートの半分 (5 行) だけ下にスクロールしつつカーソルを動かします。1 度押して 6 行目までジャンプしてください。
- 38. Ctrl-f で一画面下へadvanced
Ctrl-f は一画面ぶんジャンプ。Ctrl-f を 2 回押して 17 行目までジャンプしてください (1 画面 = 8 行)。
- 39. H / M / L で画面の端へadvanced
H は画面上端、M は画面中央、L は画面下端へカーソルをジャンプさせます。Ctrl-f で画面を一つ下に送ったあと、L で画面の一番下までジャンプしてください。
- 40. zz でカーソルを画面中央へadvanced
zz は「カーソル位置を変えず」画面 (ビューポート) を再配置してカーソルを中央に持ってきます。10G でジャンプしてから zz で中央に揃えてみてください。
HHKB レイヤー 練習
Fn + キーの組み合わせを体に染み込ませる- 01. F1〜F4 を順番にfkey
Fn を押しながら 1, 2, 3, 4 と順に押してください。HHKB には独立した F キーがないので、Fn レイヤーで打つ感覚を身に付けます。
- 02. F6〜F10 (F5 はブラウザがリロードに使うため除外)fkey
Fn + 6, 7, 8, 9, 0 の順に押してください。
- 03. 矢印キー: ↑ → ↓ ←arrow
Fn + [ で ↑、Fn + ; で →、Fn + / で ↓、Fn + , で ← です。順に押してください。
- 04. コナミコマンド ↑↑↓↓←→←→arrow
懐かしのコナミコマンドを Fn レイヤーで打ってみよう。
- 05. モディファイア: Tab, Backspace, Entermod
HHKB は最上段がない分、よく使う Tab / Delete(Backspace) / Return が手の近くにあります。Tab → Backspace → Return の順に押してください。