はじめに

開発者の皆さん、日々のコーディング、楽しんでいますか？

私がコードを書き始めた約11年前、国内の技術ブログなどではVimの設定や拡張機能に関する記事が毎日のように投稿され、大きな盛り上がりを見せていました。また、Emacsも根強い人気があり、「Vim」 vs 「Emacs」の宗教論争がネタになっているような時期でした。Sublime TextやAtomといった新しいエディタが登場し始め、現在の主流であるVisual Studio Codeも生まれたばかりでした。新しいソフトウェア開発者の皆様には信じられないかもしれませんが、Vim か Emacs の使い方を知っているのが開発者にとっては当たり前の時代でした。

最近では、生成AIによる強力なコード補完やAIエージェント機能が登場し、開発者自身が高速にコードを編集するスキルの重要性は相対的に低下してきていると感じます。しかし、長年にわたりソフトウェア開発の最も基本に位置しているのはエディタです。そして、より快適な開発環境を求めて試行錯誤し、手間を惜しまずカスタマイズするという精神性は、これからの開発者にとっても変わらず大切な姿勢ではないでしょうか。

私自身は、Emacs → Vim → Spacemacs → VSCode とエディタを渡り歩いてきました。現代の開発シーンにおいて、VSCodeの安定性と充実した拡張機能のエコシステムは非常に魅力的です。私たちの会社でもエディタの標準としてVSCodeが採用されています。今や、VSCodeはソフトウェア開発におけるエディタのデファクトスタンダードとなっています。

しかし、純粋なテキスト編集の効率性という観点では、VimやEmacsは未だに他のエディタに比べて卓越しています。これらのエディタの操作を一度習熟すれば、ホームポジションから手を大きく動かすことなく、驚くほど高速な編集が可能になります。

Vimキーバインドの紹介

例として、以下のJavaScriptコードにVimのキー操作でいくつかの編集を加えてみます。（ここでは、テキストの囲み編集を便利にする surround.vim というVim拡張機能が有効になっているものとします）。

// 編集前のコード

const name = "placeholder";

const age = 33;

const jsx = (

  <div>

    <h1>{name}</h1>

    <p>age</p>

    <div>

      <div>

        <span>

          <pre>unnecessary code</pre>

        </span>

      </div>

    </div>

  </div>

);

前提：Normalモードから操作を開始します。カーソルは h (←), j (↓), k (↑), l (→) で移動します。ctrl やescape は特殊キーです。

1. nameの上にカーソルを置き、ci" Shota Kudo escape と入力
　　→　"placeholder" が "Shota Kudo" に置き換わる
2. age の上にカーソルを置き、ctrl+a を押す
　　→　33 が 34 に置き換わる
3. jsx 内の age の上にカーソルを置き、ysit} と入力
　　→　age が {age} と囲まれる
4. <p>{age}</p> の次の <div> の上にカーソルを置き、dat と入力
　　→　<div> タグを含めてその子要素も削除される

// 編集後のコード

const name = "Shota Kudo";

const age = 34;

const jsx = (

  <div>

    <h1>{name}</h1>

    <p>{age}</p>

  </div>

);

このように、マウスや矢印キーを一切使わずに、かなりの編集作業を少ないキーストロークで実現できました。この記事でVimのキーバインドの全てを解説することはしませんが、興味を持たれた方は、以下のリソースがおすすめです。

・vimtutor：Vimをインストールすると、コマンドラインから vimtutor と入力することで、Vimの基本的な操作をターミナル上でインタラクティブに学ぶことができます。Vimの基本的な操作を学ぶには最適な教材です。
・実践Vim 思考のスピードで編集しよう!：非常におすすめの本です。これの半分くらいやっておけば編集速度は倍になります（誇張抜き）。

EmacsおよびSpacemacs

Emacsの強力な拡張性とVimの効率的なキー操作を融合させる試みを行ったのが、SpacemacsというEmacsの拡張ディストリビューションです。Spacemacsは、EmacsとVim両方のキーバインドをシームレスに統合し、さらに space キーを起点とした直感的なコマンド実行システムを導入しています。私自身、開発者として約5年間、このSpacemacsを愛用し、楽しく開発できたことに深く感謝しています。ただ、残念ながら最近は以前ほど活発な更新は行われていないようです。

Emacsの魅力の一つに、M-x（Windowsでは Alt + x）キーで全ての操作をコマンドとして呼び出せる点がありますが、この機能はVSCodeのコマンドパレット（Ctrl + Shift + p ）で代替できます。そのため、VimのInsertモード中でも利用できるカーソル移動（例：Ctrl + f で進む、Ctrl + b で戻る）や編集コマンド（例：Ctrl + d で次の1文字削除、Ctrl + h でBackspace）をEmacsキーバインドから拝借し、ホームポジションから離れたカーソルキーやBackspaceキーの使用頻度を減らすことを目指します。

また、Spacemacsの象徴的な機能である、spaceキー押下時に利用可能なコマンドを一覧表示する機能は、VSCode上では which-key 拡張機能によって実現できます。（下の画像は、Spacemacsでの which-key の表示例です。）

NeoVim

NeoVimは、Vimの強力な機能を継承しつつ、より高速な動作と高い拡張性を実現したモダンなエディタです。多くのVimユーザーが、従来のVimからNeoVimへと移行しているという印象を受けます。

今回の設定では、VSCodeの拡張機能であるVSCode NeovimがバックグラウンドでNeoVimを利用します。そのため、あらかじめお使いのOS環境に合わせてNeoVimをインストールし、実行ファイルへのパスを通しておいてください。

類似の拡張機能として、VSCodeVimがありますが、近年はメンテナンスがやや低調で、いくつかの不具合も報告されているため、VSCode NeoVimを採用しました。

VSCode上でVim + Emacs + which-keyキーバインドを実現する【本編】

さて、ここまでは背景となる情報やツールの紹介でした。いよいよ本題である、VSCode上でVim、Emacs、そしてwhich-keyの利点を組み合わせたキーバインドを実現する方法を解説します。

I. 前提条件

・MacOSには未対応（私がWindows/Linuxキーバインドに慣れているため）
・最新のVSCodeがインストール済み
・NeoVimがインストール済みで実行ファイルへのパスが通っている

II. NeoVim側の設定： init.lua

まず、NeoVimの設定ファイルを作成します。

Windowsの場合：%homepath%\AppData\Local\nvim\init.lua
Linuxの場合：~/.config/nvim/init.lua

上記のパスに init.lua というファイルを作成し、以下の内容を記述してください。（該当するディレクトリが存在しない場合は、新規に作成してください）。

設定ファイル保存後、PowerShellやターミナルから nvim コマンドでNeoVimを起動してください。プラグインマネージャー lazy.nvim が、初回起動時に設定ファイルに記述されたプラグイン nvim-surroundをインストールします。1度起動した後は、VSCode NeoVimが自動でバックグラウンドで呼び出すので毎回起動する必要はありません。

III. VSCode側の拡張機能のインストール

【必須】以下の拡張機能をVSCodeの拡張機能一覧から探してインストール。

・VSCode NeoVim　（識別子：asvetliakov.vscode-neovim）
・which-key　（識別子：VSpaceCode.whichkey）

【オプション・私のおすすめ】

・GitHub Theme：GitHubでコードレビューすることが多いので、GitHubと同じカラースキームを入れています
・vscode-icons：多くのファイルタイプに対応したアイコンセットで、サイドバーのエクスプローラーの視認性が向上します

IV. VSCode側の設定： settings.json

VSCodeの設定ファイル settings.json を編集します。VSCodeで Ctrl + ,キーを押して設定画面を開き、右上のアイコン（Open Settings (JSON)）をクリックして settings.json ファイルを開きます。

【必須】以下のコードブロックの {} 内に示されている内容を、ご自身の settings.json に追記またはマージしてください。

【オプション・私のおすすめ】 Vim + Emacs + which-key の設定とは関係ありませんが、私は以下の設定もしています。見た目や操作性はコーディングのモチベーションを上げるので、大切にしています。コメントをつけていますので、参考にしてください。

V. VSCode側のキーバインド設定： keybindings.json

最後に、VSCodeのキーバインド設定ファイル keybindings.json を編集します。VSCodeで Ctrl + k Ctrl + s キーを押してキーボードショートカット設定画面を開き、右上のアイコン（Open Keyboard Shortcuts (JSON)）をクリックして keybindings.json ファイルを開きます。

【必須】以下のコードブロックの [] 内に示されている内容を、ご自身の keybindings.json に追記またはマージしてください。

できるようになることの紹介

これらの設定を行うことで、以下のような操作が可能になります。

・VSCodeの編集画面でVimキーバインドやVimのコマンド等の機能がほぼフルに使える
・Insertモード時に、Emacsの基本的な移動・編集キーバインドが使える
・ターミナルでもEmacsキーバインドを引き続き使える（Linuxに接続時のみ）
・NormalまたはVisualモード時に space キーを押すと、which-key が起動し、自分で設定したコマンド群をキーのシーケンスで実行できる (例：space w o で他のタブを全て閉じる）
・エクスプローラーなどのサイドパネルでも、Vimライクなキー操作ができる（j k での上下移動、a で新規ファイル追加など）

今後、Vimの操作やコマンドの習熟、which-keyの自分なりのカスタマイズをしていくほどにコーディングの便利さを増していくことでしょう。VSCode NeoVimの公式リポジトリ の内容を読んでいけばさらに広く便利な機能を発見することができます。

おわりに

Vim、Emacs、VSCodeのキーバインドを組み合わせて使っている方はとても少ないと思いますが、一度この環境に慣れてしまうと、指への負担が軽減されるだけでなく、日々の編集作業そのものがより一層楽しく、効率的になることを実感できるはずです。

また、これらのエディタの使い方や設定を調べているうちに、自然とオープンソースソフトウェア（OSS）の世界に触れることになり、結果として開発者としての視野が広がるはずです。私たちが日常的に利用しているエディタや開発ツールは、数多くの開発者たちの情熱と努力の結晶であることを忘れてはいけません。

この記事が、皆さんの開発環境をより快適にするための手助けとなれば幸いです。そして、皆さんが工夫されている「自分流」の環境設定なども、ぜひ発信してみてください。楽しみにしています！

おまけ

コード編集中には様々な ctrl キーを使ったショートカット（コマンド）を用いると思いますが、多くのキーボードは ctrl キーの位置が左下にあり、押しづらさを感じます。今後も数限りなく ctrl キーを押すことになるため、こういったフラストレーションは除いておいた方が良いでしょう。幸い、WindowsやLinuxでは、もっとも理想的な位置にある Caps Lock キーを ctrl キーに置き換える方法がいくつも用意されています（「Ctrl2Cap」「PowerToys」「GNOME Tweaks」で調べてみてください）。

ちなみに私は最初から左手小指の位置（写真中のピンクの位置）に ctrl キーが割り当てられている HHKB (Happy Hacking Keyboard) を使っています。右の白い板はMagic TrackPadです。ズームやスワイプ操作を多用するFigmaを見る際に重宝しています。

以下の記事では、当社のメンバ―のこだわりのデスク環境を紹介しています！