大きなディアルディスプレイに黒い部屋で、黒いフード被って、黒い画面にコードを高速で打ち込んでいる…

そんなエンジニア像に憧れて転職してはや2年。現実は、AIにプロンプトを投げるか、ぐぐって出てきた記事のコードをコピペするばかり。

「自分の手でコードを理解し、操作できているか？」という漠然とした不安を抱き始めてました。

エンジニアとしての根源的な感覚。

「自分の手でコードを操る」

という感覚…

それを磨きたい。

そんな中、Qiitaの記事を書く機会がやってきました。ので、Vimを触ることにしました。

なぜvim

CLIでコマンド操っているのがかっこいいからです。

VSCodeでVimに触れてみよう

わたしは普段VSCodeを使っていますが、同僚から拡張機能でvimを触れるということを教えてもらいました。

1. VSCodeVim

VSCodeVimは、Vimのキーバインドをエミュレートする拡張機能です。

本物のVimとは一部挙動が異なりますが、Vimの基本的な操作がそのまま使えるので手軽にVimのキーバインドに触れてみたかったらこれがいいかも。

2. VSCode Neovim

VSCodeのバックエンドで本物のNeovimインスタンスを動作させる拡張機能です。

使うようにするにはあらかじめNeovimをインストールしておく必要があります。

Neovimとはなんぞや

Neovimは、Vimから派生したモダンなテキストエディタです。Vimの強力な機能やキーバインドを受け継ぎつつ、拡張性や使いやすさが向上しています。より柔軟なカスタマイズが可能で、Luaという言語で設定を記述できる点が特徴です。
出典：chatgpt

VSCodeVimとVSCode Neovim、違い

比較項目	VSCodeVim	VSCode Neovim
動作方式	VSCodeのキーバインドを模倣	本物のNeovimをバックエンドで実行
カスタマイズ	VSCodeの設定（`settings.json`）で完結	`init.lua`でNeovimの全機能が利用可能
難易度	低（初心者向け、Vimの雰囲気を試すのに最適）	中〜上級者向け（慣れれば高い拡張性と自由度）

実際に触る

今回はVSCode Neovimを導入してみることにします。

1. インストール

まず、Neovim本体をインストールします。macOSであればHomebrewが便利です。

brew install neovim
neovim -v # インストールできたか確認

Neovimの動作を確認したい場合は、ターミナルで以下のコマンドを実行してください。

nvim

2. `init.lua`ファイルの作成と基本設定

Neovimはinit.luaという設定ファイルで、いろいろな挙動を制御します。

Vimの~/.vimrcとは異なり、~/.config/nvim/init.luaというパスに配置するのが一般的なようです。

設定ファイルについて

以下のコマンドを実行して、設定ファイルを置くディレクトリを作成しましょう。

mkdir -p ~/.config/nvim

次に、作成したディレクトリの中にinit.luaファイルを作成し、基本的な設定を記述します。

touch ~/.config/nvim/init.lua

ファイルを作成したら、せっかくなんでvimコマンドで~/.config/nvim/init.luaを開きましょう。

vim ~/.config/nvim/init.lua

開いたら、以下の内容をコピー＆ペーストしてください。
ペーストしたらEscキーでINSERTモードを解除し、:wqと入力してEnterでファイルを保存して終了します。

-- =======================================================
-- Neovim 初期設定 (init.lua)
-- =======================================================

-- 1. 基本的なオプション設定
local options = {
  fileencoding = "utf-8",       -- ファイルエンコーディングをUTF-8に設定
  swapfile = false,             -- スワップファイルを作成しない（バックアップファイルは無効に）
  helplang = "ja",              -- ヘルプファイルの言語は日本語（日本語ヘルプをインストールしていれば）
  hidden = true,                -- バッファを切り替えるときに、ファイルを保存しなくても良いように
  number = true,                -- 行番号を表示
  relativenumber = true,        -- 相対行番号を表示（カーソルからの距離でジャンプしやすく）
  wrap = false,                 -- 画面の右端で自動改行しない
  ambiwidth = 'double',         -- 絵文字などの記号が半角文字と重なる問題を解消。記号を全角文字の幅で表示する
  autoindent = true,            -- 新しい行を開業したとき、1つ上の行のインデントを引き継ぐ
  smartindent = true,           -- スマートな自動インデント（C/C++などのコード向け）
  cursorline = true,            -- カーソルが存在する行にハイライトを当てる
  tabstop = 2,                  -- TABキーを押したとき、2文字分の幅をとる（表示上のタブ幅）
  softtabstop = 2,              -- タブキーやバックスペースキーを押したときの移動幅を2に
  shiftwidth = 2,               -- 自動インデントやシフトコマンド（>>や<<）の幅を2に
  expandtab = true,             -- TABキー入力時にtabstopで指定した数の半角スペースに変換
  autoread = true,              -- Vim以外でファイル変更したときに自動再読み込みする
  showmatch = true,             -- 括弧を入力したときに、対応する括弧を短時間ハイライト
  matchtime = 1,                -- showmatchのハイライト表示時間（秒）
  ignorecase = true,            -- 検索時に大文字/小文字を区別しない
  smartcase = true,             -- 検索文字列に大文字が含まれる場合は、大文字/小文字を区別する
  wrapscan = true,              -- 検索がファイルの末尾までいったら先頭から検索を続ける
  clipboard = "unnamedplus",    -- システムクリップボードと連携（+レジスタを使用）
}

-- 上記のオプションをNeovimに適用
for k, v in pairs(options) do
  vim.opt[k] = v
end

-- 2. キーマップの設定
-- ノーマルモード (n) でLeaderキー+wで保存、Leaderキー+qで終了
vim.keymap.set("n", "<leader>w", ":w<CR>", { silent = true, desc = "Save file" })
vim.keymap.set("n", "<leader>q", ":q<CR>", { silent = true, desc = "Quit Neovim" })
vim.keymap.set("n", "<leader>e", ":NvimTreeToggle<CR>", { silent = true, desc = "Toggle NvimTree" }) -- NvimTreeプラグイン用

3. VSCode Neovim拡張機能でのinit.luaの指定

VSCode側で設定します。

VSCodeを開く
歯車アイコンから設定に飛び、設定（JSON）を開くをクリック

settings.jsonが開くので、下記を追加します。

{
  // 既存のコード
  
  // Neovimの実行ファイルのパス
  "vscode-neovim.neovimExecutablePaths.darwin": "/opt/homebrew/bin/nvim",

  // 作成したinit.luaファイルのパスを指定
  "vscode-neovim.neovimInitVimPaths.darwin": "/Users/ユーザー名/.config/nvim/init.lua"

  // 注意：ESCの代わりにjkでノーマルモードに移行する設定
  "vscode-neovim.compositeKeys": {
    "jk": {
      "command": "vscode-neovim.escape"
    }
  },
}

4. 設定完了！

VSCode Neovimを起動してみます。

設定がVSCode Neovimに反映されているか確認する

VSCodeを再起動する: 設定変更後、VSCodeを完全に終了し、再度開きます。
ファイルを開く: 適当なテキストファイルやコードファイルを開きます。
簡単なキー操作を試す:
- h, j, k, lキーでカーソルが移動するか
- jkとすばやく入力して、NORMALモードに戻るか
  - このjkでINSERTモードを終了する設定は、init.luaでなくVSCode側の設定でしか完全に機能しない場合があるため、特に重要な確認項目

ウィンドウ下のステータスバーに「NORMAL」などと表示されていれば、Vimモードが有効になっています。VimモードをやめたくなったらここをクリックでON/OFF切り替えられます。

これらの確認で問題なければ、VSCode Neovimの導入と基本設定は成功です！

設定ファイルについて

Vimの基本的な設定は.vimrcファイルに記述しますが、Neovim (VSCode Neovimを含む) はinit.luaを読み込むように設計されています。

init.luaと~/.vimrcの両方に設定があると予期せぬ競合や動作になるかもしれないので、Neovimを使うのであれば、設定はすべて~/.config/nvim/init.luaに集約するのがベストプラクティスです。

触ってみた所感

Vimの操作は、GUIエディタでは意識しないような「操作の意味」を一つひとつ手で触れることを促します。

「モード」の概念とか

モード名	操作内容	代表キー
NORMAL	コマンド入力、カーソル移動、テキスト操作	`Esc`
INSERT	通常の文字入力モード	`i`, `a`, `o`
VISUAL	テキストの範囲選択	`v`, `V`, `Ctrl+v`

コマンドとか

コマンド	意味
`dd`	delete line（行を削除）
`yy`	yank line（行をコピー）
`p`	put（貼り付け）
`/word`	`word`を検索
`%`	対応する括弧にジャンプ
`ci"`	change inside double quotes（ダブルクォート内のテキストを変更）

GUIの「切り取り」や「貼り付け」といった漠然とした操作とは違って、「行を削除する」「引用符の中を変更する」といった具体的な意図を持って操作するので、より意識的にコードと向き合えるような気がします。

AIがコードの大部分を生成・補完する時代だからこそ、意図を持って操作するクセをつけていきたいですネ。

以上！

なぜvim

VSCodeでVimに触れてみよう

1. VSCodeVim

2. VSCode Neovim

Neovimとはなんぞや

VSCodeVimとVSCode Neovim、違い

実際に触る

1. インストール

2. init.luaファイルの作成と基本設定

3. VSCode Neovim拡張機能でのinit.luaの指定

4. 設定完了！

設定がVSCode Neovimに反映されているか確認する

設定ファイルについて

触ってみた所感

「モード」の概念とか

コマンドとか

2. `init.lua`ファイルの作成と基本設定