HHKB-US配列ならVimを使え
2023-12-15
azblob://2023/12/15/eyecatch/2023-12-15-visual-sutdio-code-with-vim-000_2.png

HHKB-USキーボードを使う

 HHKBは最高のキーボードだと思う。いきなり思想が強い(そもそもタイトルの思想が強い)が、実際そう考えている人は結構いると思う。筆者はデスクを広く使いたい派で、何ならポインティングディバイスすら煩わしいと感じてしまう。結果コンパクトかつ機能的なHHKB-USの境地にたどり着いた。

Vimを使うモチベーション

 HHKBキーボードはコンパクトで素晴らしいキーボードだが、往々にしてカーソル移動と画面移動の面倒が増える。これは矢印キーやHome、Endといったキーが他のキーボードに比べて押しづらいためである。こういった面倒はポインティングディバイスをなるべく使いたくない人にとって排除すべきものなので、別の手段でカーソル移動、画面移動をしたい。
 

 というわけでVimを使う。


 このVimというテキストエディタは60%USキーボードで使用した時の生産性の上がり方が尋常ではなく、もはや60%USキーボードはVimのために存在しているといっても過言ではない。(過言)

 だが、わざわざテキストエディタをインストールして設定をいじいじするのも面倒なので、今回はVisual Studio Code(以下VSCode)を利用してサクッとVimに触ってみる。

VSCodeでVimを使う

 VSCodeでVimを使う方法は超簡単、VSCodeのExtentionsで「Vim」というextensionをインストールするだけでVimの環境が整う。

 早速使っていきたいが、その前にいくつかの設定を行う。といってもVSCodeのSettings.jsonに以下の設定を追加するだけ

    "vim.useSystemClipboard": true,
    "vim.easymotion": true,
    "vim.easymotionMarkerForegroundColorTwoCharSecond": "#00BFFF",
    "vim.easymotionMarkerForegroundColorOneChar": "#ffb400",
    "vim.easymotionKeys": "hklyuiopnmqwertzxcvbasdgjf",
    "vim.normalModeKeyBindings": [
    ],
    "vim.normalModeKeyBindingsNonRecursive": [
        { "before": ["f"], "after": ["leader", "leader", "leader", "b", "d", "w"] },
        { "before": ["x"], "after": ["\"", "_", "x"] },
        { "before": ["X"], "after": ["\"", "_", "X"] },
        { "before": ["D"], "after": ["\"", "_", "D"] },

        { "before": ["c"], "after": ["\"", "_", "c"] },
        { "before": ["C"], "after": ["\"", "_", "C"] },
    ],

 Vimは無限のカスタム性を持っているので今回使うものだけ持ってきた。カラーコードは筆者の環境に合わせているだけである。

 このあたりの設定はもっと詳しく解説されている方がいるのでそちらを参照してほしい。また、ここで記述している設定は使用するときに改めて解説する。

ざっくりチュートリアル

 まず、Vimには大まかに分けて4つのモードが存在する。

  1. ノーマルモード

     テキストの編集やカーソル移動、画面移動を行う

  2. インサートモード

     テキストの入力を行う

  3. ビジュアルモード

     いわゆる範囲選択を行う

  4. コマンドモード

     コマンドを使う

 

 とりあえず、この4モードがあることを覚えておけばOK。

 ここからコードを書いていく、のだがVimは原則としてインサートモードでなければ入力を行うことができない。そして、基本的に最初はノーマルモードに設定されている。つまり、最初の課題は「ノーマルモードからインサートモードに切り替えること」である。

インサートモード

 で、どう切り替えるかというとノーマルモード時に a  i  o  のいずれかのキーを入力をするだけでいい。なぜインサートモードに入るためのキーが4つもあるのかという話だが、これらは使用するキーによってインサートモードに入るときの挙動を変えることができる。(下記の表はノーマルモード時に "う" にカーソルが合っている場合の挙動)

aカーソル位置の右側から開始あいう|えお
iカーソル位置の左側から開始あい|うえお
oカーソル位置の行から次段を改行しそこから開始あいうえお
|

 このように、自分のカーソルの位置からどのようにインサートモードに入るかを決定することができる。

 また A  I  O (Shift+a i o s)でも違った挙動をする。

Aカーソル位置の行の末尾から開始あいうえお|
Iカーソル位置の行の先頭から開始|あいうえお
Oカーソル位置の行から前段を改行してそこから開始|
あいうえお

 というわけで無事インサートモードに入ることができたと思う。

 そしてインサートモードからノーマルモードに切り替える方法は簡単で Esc キーを入力するだけで良い。

 ※ s と S でもインサートモードに切り替えることができるが、筆者は使わないので気になる方は調べてほしい。

ノーマルモード

 非常にできることが多いモードである。多すぎるしカスタム性が無限なので、すべてを語ることなど到底できるわけもない。なのでここではチュートリアルとして、一般的なキーバインドを紹介する。

h j k l

 まず、Vimといえばこれ h  j  k  l である。これは非常にシンプルなカーソル移動で、それぞれが

h
j
k
l

 に対応しており、これが矢印キーの代わりとなる。良い点として、ホームポジションから離れることなくカーソル移動することができる。

 また N(数字入力) + h  j  k  l で指定した数字分だけ行(文字) を移動することができる。(カーソル移動系は大体が、先に数字入力でその分移動できる)

w b e

 続いて w  b  e である。これらは単語単位でのカーソル移動で、一度入力するたびに特定の位置にカーソルをワープさせることができる。(下記の表の "A" はキー入力時のワープ位置を示している)

w次の単語の先頭にワープHello World!!
b前の単語の先頭にワープHello World!!
e次の単語の末尾にワープHello World!!

 となっている。ちなみにこいつも大文字 W  B  E(Shift + w  b  e)に対応している。

W次の単語の先頭にワープHello World!!
B前の単語の先頭にワープHello World!!
E次の単語の末尾にワープHello World!!

 一見すると違いがないように思えるが、小文字(w  b  e)は「単語や記号区切り」、大文字(W  B  E)は「スペース区切り」となっている。

 クラス変数や辞書型のValueなどで単語がくっついているときは結構役に立つ。

 ちなみに  word  begin  end  の頭文字らしい()

x X

 カーソル移動とインサートモードを覚えたので、単語の削除も紹介する。(VSCodeのVimはデフォルトでBackSpaceが使えるが...)

 ただ紹介といってもさほど言うことがない。以下のような対応になっていると思えばいい。

xdeleteキー
XBackSpaceキー

 ※後に delete の頭文字をとったキーバインドが現れるので混同しないように

y p

 続いてコピー&ペーストである。こいつは比較的覚えやすくて yank  paste の頭文字となっている。

 ただし y は後述するビジュアルモードと併用して使うもので、実際にノーマルモードで使用するのは yy である。

yyカーソル位置の行をヤンク(コピー)
p貼り付け(行コピー時にカーソル位置の行から次段を改行してペースト)
P貼り付け(行コピー時にカーソル位置の行から前段を改行してペースト)

 yy の非常に良いところは1行コピーをキー連打でできる点と、ペーストした時に「カーソル位置の行から次段を改行してペースト」できる点である。

 また、N + yy や N + p に対応しており、複数行ヤンクと複数回ペーストを一瞬でできる。

 なので同じ行を10個増やしたいときは yy -> 9p で終わる。

 y は他にもカーソル行以下全コピーなど色々なキーバインドがあるので気になったら調べてみるといいかもしれない。

d

 こいつが本当の delete である。

ddカーソル位置の行を削除
Dカーソル位置から末尾までを削除

 まあ本来の機能は上記であっているのだが、筆者は dd を削除として使用していない。

 なぜかというと、Vimを少し使っていると分かるのだが、デフォルトの設定では yy 、 x 、 c 、 dd などの、コピーや削除した文字がなぜか同じレジスタに入れられる。

 なので yy した後に邪魔な文字を x で消して p でペーストすると、 x で消した一文字がペーストされるのである(意味不明)

 ちなみにこれを防ぐために以下の設定を入れている。

    "vim.normalModeKeyBindingsNonRecursive": [
        ...
        { "before": ["x"], "after": ["\"", "_", "x"] },
        { "before": ["X"], "after": ["\"", "_", "X"] },
        { "before": ["D"], "after": ["\"", "_", "D"] },

        { "before": ["c"], "after": ["\"", "_", "c"] },
        { "before": ["C"], "after": ["\"", "_", "C"] }
    ],

 この設定はノーマルモードのキーバインドを設定しており、 x などを "_x に置き換えている。 "_x はブラックホールレジスタ("_)と呼ばれる削除用のレジスタを指定して x を使用するものである。(最初からこれにしておいてほしいものだが...)

 で、本題に戻ると筆者は dd の設定を変更していないので、 dd の挙動は削除ではなく1行切り取りになっている。結構便利。

 ※ dd をブラックホールレジスタにしたい場合は

{ "before": ["d"], "after": ["\"", "_", "d"] },

 をノーマルモードのキーバインド設定に追記すればよい。

ビジュアルモード

 本当はもっとノーマルモードについて紹介したかったがチュートリアルにしてはテンポが悪いので次に進む。

 ビジュアルモードはノーマルモードで v を入力すると入ることができる。

 ビジュアルモードのキーバインドは基本的にノーマルモードと変わらないが、「範囲選択を行い、選択された範囲すべてに対してノーマルモードの機能を使える」と考えれば理解しやすいかもしれない。

 また、ビジュアルモード中に I A を入力すると複数行に対してインサートすることができるため便利である。

 ii などのインデント揃い全選択などの便利機能も多々あるので調べてみるといいかもしれない。

 そして、ビジュアルモードは V と Ctrl + v に対応している

v文字通常のビジュアルモード、開始地点から1文字単位で範囲設定できる
V行選択のビジュアルモード、開始地点から行単位で範囲選択できる
Ctrl + vブロックブロック選択のビジュアルモード、開始地点から現在のカーソル位置をブロックとして範囲選択できる

 ※ビジュアルモードからノーマルモードも Esc で切り替え

EasyMotion

 Vimのプラグイン「EasyMotion」の説明をする。

 EasyMotionの機能についてだが、実際に見てもらえばわかると思う。

 自分の設定だと f に設定されているので入力してみると...

 左が f を入力する前、右が入力後となっている。

 で、これがどういう機能かというと「光っている文字を入力するとそこにカーソル移動できる」という機能である。

 例えば11行目のConsole部分にワープしたい場合は d を入力すればいい。

 3行目のClass部分にワープしたい場合は fx を入力すればいい。

 とまあこんな感じでめちゃくちゃ便利なカーソルワープができる。

 ちなみにChromeの拡張機能にVimiumというのがある。是非調べてみてほしい。

おわりに

 今回はカーソル移動と一般的な使い方にとどまってしまったが、本来はウィンドウやタブ移動、文字検索などもホームポジションを維持しながらできる、便利だが少し押しにくいコマンドなどはキーバインドをカスタムするといいだろう。気になった方は是非調べて使ってみてほしい。( u, di , c系, ctrl-a などなど )

 本記事を通して少しでもVimに興味を持って貰えたらと思う。