みんなでVimやろう！

ノベルワークスのとっしー([@tossy](https://x.com/A1vbzr4SVP8))です

# はじめに
皆さんはVimを使ったことがありますでしょうか.
恐らく, 多くの人がgitでcommitをする際に触れたことがあるのではないでしょうか.
Vimは古くからあるコードエディタです. 
Vimの祖先であるviはマウスが普及していない時代に開発され, その最大の特徴はマウスを使わず, キーボードのホームポジションから手を離さずに操作できる点です. 後継であるVimもその特性を受け継ぎ, 今も尚, エンジニアたち愛され続けています.
Vimに慣れている人は一般的に 他のエディターを凌ぐスピードでコード編集が出来ます.
Vimを知らない人からすると, 魔法に見えるくらいかもしれません.
例えば, この動画を見てみてください. 

https://youtu.be/LCkF19gDfEA?feature=shared

どうでしょうか？なんとなく, Vimの潜在能力を分かっていただけたのではないでしょうか.
これはお遊びのコード編集ですが, Vimの達人の手にかかってしまうと, このようなとんでもないことまで出来てしまうんですね(もう半分プログラムを書いているんじゃないかというようなところもありますが笑)

現在はvscodeなどのGUI（グラフィカルユーザーインターフェース）中心のエディタが主流であり, Vimを使っている人は少ないイメージです.
GUIエディタは視覚的に分かりやすく直感的に操作出来ます. また, CUIのような複雑なコマンドも覚える必要が無く, 誰でも扱いやすいです. 

正直なところ, 現在の開発を純粋なVimを用いて行おうとすると, GUIエディタに比べて力不足感は否めません. (中にはvimをカスタマイズしてGUIに匹敵するエディタを作成している人もいますが)

vscodeの機能の豊富さとVimの魔法のようなコード編集の両方を使うことが出来ないだろうかと考えます.
実は, vscodeに簡単にVimを組み込むことが出来るのです！
これを機にvimを始めてみませんか？

# Vimをvscodeに入れてみる

早速ですが, vscodeにVimを入れてみましょう.
入れるのはとても簡単です. vscodeの拡張機能タブからVimと検索し, こちらの拡張機能をインストールして有効にするだけです.

:::note warn
Vimを有効にするとvscodeの操作感がかなり変わります.
元に戻す場合は, この拡張機能の設定からVimを無効に出来ます
:::

![スクリーンショット 2025-01-16 20.58.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838754/fcade060-04af-ad49-3656-6ad384bfa92e.png)

:::note info
ウワサによると, こちらの拡張機能は少し動作が重かったりするようです.
今回はお試しなので, こちらで十分だと思いますが, 実際にvscodeでVimを使っていきたい場合はnvim(Neovim)を使うといいかもしれません.
こちらは設定に少々手間がかかりますので, 今回は割愛します.
気になる方は, `vscode nvim` と検索すると良いかと思われます.
:::

# 早速Vimを使ってみる
何かファイルを開いてみてください.
いつもと雰囲気が違うはずです.
Vimを入れるとカーソルがブロックカーソル(写真のような四角いカーソル)に代わり, 点滅しているのが確認出来ます.

![スクリーンショット 2025-01-16 21.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838754/bfe4810c-4880-4178-6f91-4a845c5fb8d9.png)

これはVimがノーマルモードに入っているためです.
Vimには大きく分けて4つのモードがあるのですが, 今回は簡単に以下に2つのモードを紹介します.
(モードについて詳しく知りたい場合は, [こちらの方の記事](https://qiita.com/gorilla0513/items/e8ccb15bfc87e7ed8d5b)がとても参考になります)

## ノーマルモードと挿入モード

### 1. ノーマルモード

ノーマルモードはその名の通り通常のモードです. Vimを扱う際は基本的にこのモードを使います.
最初はカーソル移動用のモードと思っていても問題ないと思います.
このモード時は上の写真のようにブロックカーソルになっていて点滅しています.

### 2. 挿入モード

実際に値を入力するときのモードです.  ノーマルモード時に`iキー`や`aキー`を押すことでこのモードに移行します.

***

:::note warn
ここから実際にVimを試していきますが, ノーマルモードでは, 入力が「英数」になっていないとうまく動かないことに注意してください.　仮に「かな」で入力した場合, その場に文字が入力されてしまい, 画面がおかしくなってしまいます.
:::

２つのモードについて学んだので, 実際に各モードで遊んでみましょう.
ファイルを開いた直後は`ノーマルモード`になっているはずです. このモードでは通常のエディタように文字を入力することが出来ません. 代わりに各キーがVimにおけるショートカットキーのようになっています. (ノーマルモードでない場合は, escキーを押すことでノーマルモードに変わります)
それでは, 試しにノーマルモード時に`h,j,k,lキー`を押してみてください. ブロックカーソルが各キーに応じて4方向に移動するはずです.　最初はキーと移動の向きの感覚が合わず戸惑いますが, たくさん操作しているうちにだんだんと体に染み付いてくるはずです.
慣れるまで少し苦労しますが, この操作はVimの基本的な操作なので少しずつ慣れていってください.
英語ですが, Vimのゲームがあるので, こちらで移動操作に慣れるのも良いかもしれません.

https://Vim-adventures.com/

ある程度自由にカーソル移動が出来るようになったら, `iキー`を押して`挿入モード`に入ってみましょう.
挿入モードに入ると, ブロックカーソルからいつもの棒状のカーソルに戻るはずです.
挿入モードではいつものようにキーボードから入力が出来るようになります.
このモード時に`escキー`を押すことで, 再び`ノーマルモード`に帰れます.

:::note info
挿入モードの時は, いつものvscodeのようにショートカットによるコピーやペーストが行えます. vscodeのショートカットを使いたい時は挿入モードで試してみてください.
:::

このように移動はノーマルモード. 入力は挿入モードで行います.

これで, vscodeでVimを扱う上での最低限の操作説明は完了です

# ちょっとした小技を覚える

Vimを入れて少し遊んでみましたが, やはり, このままでは使いにくそうです.
「これでは, 前の方が使いやすかったのでは？」と感じるかもしれせん.
しかし, ここから色んな「小技」を覚えていくことで, 噛むほどに味が出るスルメのように, Vimの良さが少しずつしみていきます. 

いくつか簡単で便利なものをご紹介します.
先程, ノーマルモードにおいてhjklキーで移動しました. 実は, カーソル移動を行えるキーは他にもあって, 例えば`wキー`と`bキー`があります. 挿入モードでいくつか英単語を入力してみてください.

```
hello world! bra bra
```

続いて, ノーマルモードに戻って`wキー`や`bキー`を押してみてください.
`wキー`を押すと前に1単語分カーソルが移動し, `bキー`を押すと後ろに1単語分カーソルが移動するはずです.
由来は分からないのですが, 私はいつも`wキー`は(`word`) `bキー`は(`back`)だと思っています. (間違っていたらすみません...)
wキーやbキーを使うことで, hjklのような単純な移動でなく, コードの単語間を軽快に飛び回れるようになれます.
単語操作のお話しが出てきたので, ついでに単語削除についてもご紹介します.
方法は簡単で, ノーマルモード時に消したい単語にカーソルを合わせ, そのまま`daw`と入力するだけです. 先程のwキーやbキーのように, キーを押したらすぐに操作が反映されるわけではないことに注意してください.
これはVimにおける`コマンド`というものです. とても重要な概念ですが, 長くなってしまうので今回は割愛しますが, あのdaw(delete a word の略なのではないかと言われています)というのは, コマンドだったんだなということだけ覚えて頂ければと思います.

今回, 「単語間ジャンプ」と「単語削除」２つの小技をご紹介しました. いずれの操作も通常のエディタではあまり馴染みが無い操作なのではないでしょうか. これを機に「ひょっとすると, Vimって結構おもしろんじゃないか？」と可能性を感じて貰えると幸いです. 

今回紹介したのは, Vimの中の本当にほんの一部の機能です.
私もVimについては最近知ったばかりなのですが, 本を読むにつれてその潜在能力に驚かされます.

もし, 今回の記事でVimに興味をお持ちいただけましたら, 一つおすすめの本をご紹介します.

[実践Vim　思考のスピードで編集しよう！ (アスキー書籍)](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Vim-%E6%80%9D%E8%80%83%E3%81%AE%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%82%88%E3%81%86%EF%BC%81-%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E6%9B%B8%E7%B1%8D-%EF%BC%A4%EF%BD%92%EF%BD%85%EF%BD%97-%EF%BC%AE%EF%BD%85%EF%BD%89%EF%BD%8C-ebook/dp/B00HWLJI3U/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=)

こちらは有名なVimの本で, Vimの特性や使い方まで詳しく書かれています.
読み進めていく内にVimが好きになること請け合いです.
ただ, 紙の方は今は絶版になっているらしく少し高騰しているので, kindle版を見ることができる方はそちらがおすすめです.