🤨

ゼロから学んだ私のVim開発体験記

2024/11/18に公開

こんにちは。株式会社バニッシュ・スタンダードの中村です!
普段はバックエンドの開発に従事しております。

みなさんはVimを使っていますか??
僕はずっとVSCodeで開発していたのですが、弊社に数名いるVimmerの方達とペアプロするうちに少しずつVimに興味を持つようになってきました。

元々Vimに全然興味なんてなかったのに周りのVimmerの方々と一緒にペアプロ・モブプロするとなると自然とVimを見る機会が増えてきます(もちろんVSCodeやGoLandユーザの方々もいっぱいいます)。これは一種の潜在意識への刷り込みのようなもので、ふとしたときにVimのことを思い出し、Vimのことを考えるようになりました。

でもVimってなんだかとっつきづらいし実際どうなんだろう...
そんな中、以下の記事に出会いました。
https://note.com/navitime_tech/n/nf6cae399ae75

.
.
.
なるほど、ちょっと挑戦してみるか。
Vimに憧れた私は思考のスピードで編集するべく、Vimの世界へ1歩足を踏み入れるのでした

VSCodeにVimのキーバインドを入れてみる

Vimmerの方に聞いてみました。

「僕もVimで開発してみたいんですけど」

IDEにもVimのプラグインがあるから、まずはそこから始めたらいいとアドバイスをもらいました。

自分はVSCodeを使っていたので

https://github.com/VSCodeVim/Vim
VSCodeVimってやつですね。

仕事を終えて、ちょうどこの時期はプライベートの時間を使って個人開発をしていたので
「Vimの練習だ!」と意気込みさっそくVSCodeVimを入れて個人開発を始めてみたものの

「何だか慣れないなあ」

もうなんか、10分で書き終わるはずのコード量でもVimのキーバインドに慣れてなさすぎて体感1時間くらいかかるのです。

で、次の日Vimmerの方に相談したところ、最初は主要な操作だけを覚えて少しずつ新しいコマンドを覚えればいいとのことでした。
以下の操作を覚えていけば最低限開発には困らないと思います

カーソル移動

h:左に移動
j:下に移動
k:上に移動
l:右に移動
gg:ドキュメントの先頭行に移動
G:ドキュメントの末尾行に移動

カットとペースト

yy:行をヤンク(コピー)
dd:行を消去(カット)
x:文字を1つ消去(カット)
p:カーソル位置の1つ後ろにペースト

INSERT(挿入)モード - テキストを挿入/追加

i:カーソル位置で挿入モード
a:カーソルの次の位置で挿入モード
Esc:挿入モードを終了

テキスト選択(ビジュアルモード)

v:ビジュアルモード開始。これで選択してからコマンド(Y - ヤンクなど)を実行
V:行単位のビジュアルモード

ビジュアルモードでのコマンド

y:選択範囲をヤンク(コピー)
d:選択範囲を消去
Esc:ビジュアルモード終了

終了

:w:終了せずにファイルに書き込み(保存)
:wq:書き込み(保存)して終了
:q:終了(未保存の変更があると失敗する)
:q!:未保存の変更を破棄して終了

ここまで覚えればプログラミングをする上では十分戦えると思います。

他に便利なコマンド

ctrl + a:数値のインクリメント
ctrl + x:数値のデクリメント
{num}yy:カーソル位置から数字分まとめてヤンク(コピー)
{num}dd:カーソル位置から数字分まとめて行を消去(カット)
~:カーソル位置の文字を大文字 or 小文字に変換

{num}はリピート回数なので数字を指定します。
コマンドの組み合わせ方次第なので、例えば{num}lなどでカーソル移動もできます。

ビジュアルモードでのコマンド

u:選択範囲を全て小文字に変換
U:選択範囲を全て大文字に変換

あとはVimにはチートシートというものがあって最初はこれを何回も何回も見ながらVimコマンドを学びました

https://vim.rtorr.com/lang/ja

yはyank、wはword、qはquitからきているので、英単語の頭文字であることを意識すると覚えやすいかもしれません。

流石にペアプロの時に慣れないVimのキーバインドで1から練習するのは気が引けたので、ちょうどこの時期に個人開発していたこともあり、個人開発はVimのキーバインド縛りで、って感じで制約をつけるともう頑張るしかないので割とすんなり手に馴染みました。で、さっそく翌日から仕事でもVimのキーバインドに切り替えました

キーボード上で完結させたい

IDEにVimのキーバインドを入れて操作に慣れてくるとキーボードとトラックパッドの切り替えが煩わしくなってきたのでVimの開発環境をちゃんと整えようと思いました。そして、これを機に今まではMacOS標準のターミナルを使っていたのですが見直すことにしました。

環境構築

ターミナル

https://github.com/alacritty/alacritty
ターミナルは alacritty にしました。
Rust製で速いっていうのを聞いていたのでなんとなく使ってみたかったからです。描画が高速でVimのカーソル移動もサクサクです。今の所も特に困りごとなく満足しています。

カラースキームは自分は catppuccin_mocha を使っています。
https://github.com/alacritty/alacritty-theme

シェル(zsh)

https://ohmyz.sh/
ターミナルの見た目をイケてる感じにしてくれます。多機能らしいのですが自分の場合はだいぶ持て余していると思います

https://github.com/zsh-users/zsh-autosuggestions
ターミナルのコマンド履歴に基づいて入力保管もしてくれるので便利です

https://starship.rs/ja-jp/
プロンプトをおしゃれにできます

Neovim

https://github.com/neovim/neovim
Neovimは、拡張性と使いやすさのために刷新したVim派生テキストエディタです。
プラグインもたくさんあります。以下に自分が入れているプラグインを載せてみたのでよかったらみてください

lazy

https://github.com/folke/lazy.nvim
NeovimのプラグインマネージャはLazyを使っています(自分の場合)

mason

https://github.com/williamboman/mason.nvim
LSPサーバやリンターやフォーマッタなど簡単にインストールできてリッチになります

lspsaga

https://github.com/nvimdev/lspsaga.nvim
LSPのUI面がリッチになります

nvim-treesitter

https://github.com/nvim-treesitter/nvim-treesitter
シンタックスハイライトがあたるようになります

nvim-cmp

https://github.com/hrsh7th/nvim-cmp
色々と自動で補完してくれます

nvim-autopairs

https://github.com/windwp/nvim-autopairs
括弧やクォーテーションを自動で補完してくれます

telescope

https://github.com/nvim-telescope/telescope.nvim
ファイル名やソースコードをあいまい検索できるようになり、対象の処理まですぐに辿り着くので便利です

nvim-tree

https://github.com/nvim-tree/nvim-tree.lua
ファイラの表示ができるようになるので、現状どこで作業しているかなど視認性が上がります

lualine

https://github.com/nvim-lualine/lualine.nvim
ステータスラインの表示ができるようになり視認性が上がります

trouble

https://github.com/folke/trouble.nvim
瞬時にエラーに飛べてコード修正が楽になります

nvim-lightbulb

https://github.com/kosayoda/nvim-lightbulb
CodeActionできるときは電球マークが表示されて分かりやすく伝えてくれます

neotest

https://github.com/nvim-neotest/neotest
Neovimの中でテストが実行しやすくなるフレームワークを提供してくれます

gitlinker

https://github.com/ruifm/gitlinker.nvim
ファイルのGitパーマリンクを簡単に取得できるようになります

blamer

https://github.com/APZelos/blamer.nvim
Gitのblameができるようになり、特定のコード行でいつ誰が変更を入れたのか確認できるようになります

こんな感じの見た目になります

最後に

Vimのキーバインドを覚えるのは大変でしたが、覚えてからコーディングが早くなったのでやってみてよかったなと思いました。IDEにVimのプラグインを入れて試してみると面白いかもしれません。
Neovimの環境構築は分からないことだらけで大変でしたが、社内のVimmerの方に助けてもらいながら、色々とプラグインも教えてもらいながら、今ではNeovimで開発できているのでとても感謝しています🙏

自分のdotfilesのリポジトリのリンクを貼っておくので、よければご参照ください。
(競プロ用テンプレートなどNeovimに関係ないものも一部含まれております)
自分好みにカスタマイズして使ってもらって大丈夫です。
https://github.com/NakamuraFumiya/dotfiles

みなさま良きVimライフを〜〜

Discussion