久々にVimを触れてみた：キーボード操作の楽しさを再発見

# 1. はじめに
あなたは、日頃「**Vim(ヴィム)**」というエディタを使っていますか？
私は使っていません。（過去は使っていました）

久々に使ってみようと思ったので、どういったものかをご紹介します。

## こういう人向け
- 聞いたこともないぜ
- 名前だけは知っているけど使ったことないなぁ
- 最近はもう使わないね
という方に、今後の選択肢の１つになれば幸いです。

## 背景
初めてのプロジェクトはUnix環境で、Vimでコーディングするしか選択肢がありませんでした。
ただその後のプロジェクトはIDEなどで開発していたため、Vimに触れる機会は次第に減り、たまにサーバーのファイルを触る際に使う程度でした。

そして最近VSCodeを使っている際に、拡張機能でVimがあるのに気づき、久々に使ってみました。

# 2. Vimとは?
Vimは主にUnix系OSに搭載されている、CLI(キーボードのみ)で操作する高機能なテキストエディタです。
名前の由来は 「Vi iMproved」の略で、元々は「vi」エディタというものが存在し、
2000年にviの拡張版として開発されました。

:::note warn
では説明するなら「vi」からでは? ということにもなりますが、
筆者が触れていたのは恐らくvimだったので、本稿では割愛し「Vim」で説明していきます。
:::

## 特徴
Vimにはモードという概念があり、切り替えながら編集作業を行います。
- ノーマルモード(NORMAL)  :コマンド入力や移動
- インサートモード(INSERT):テキスト入力
- ビジュアルモード(VISUAL):テキスト選択  
- コマンドモード(COMMAND) :保存やテキストエディタ終了などの操作

## メリット
- キーボード(矢印キー不要)で全てが操作可能なため、ホームポジションが崩れない
- 慣れると編集速度が早い
- 設定が豊富で、好きにカスタマイズ出来る
- **キーボードだけで操作するのが楽しい**（超重要）

## デメリット
- コマンド、ショートカットなど覚えることが多い
- モード切替、操作感に慣れるまでが大変

# 3. vimに触れてみようのコーナー
簡単な操作の一部を説明します。

:::note info
知っている人は飛ばしていただいてOK！
:::
VSCodeの拡張機能で「vim」と検索し、「Vim」をインストールしましょう


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/7aaececc-f835-2e27-39ed-59fcfbd5c461.png)

適当にTextファイルを作成し、開きます
下部のステータスバーに書かれているように、今は **NORMALモード**(コマンド入力や移動) です。
このモードではテキスト入力ができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/0cd909d4-828b-8006-181b-56c0e1482be4.png)

「 i 」キーを押すと、**INSERTモード**(テキスト編集)になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/10711f2f-09fe-f22c-7ef1-d2c3a5f5e830.png)

数行をテキスト入力し、「 Ctrl + [ 」キーを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/e57d6ece-e1a0-c641-bcb0-2c2eb213ab6a.png)

ここで**操作感のキモ**を味わうことができますが
NORMALモード(コマンド入力や移動)での移動は「h、j、k、l」キーで操作します。
矢印キーの代わりにh j k lで操作という形です。
- h :左移動
- j :上移動
- k :下移動
- l :右移動
他にも
- w、b :単語単位での前後移動
- x :1文字削除
- u :アンドゥ
など、他にも色々なキーで操作が可能です。
詳細はチートシート等を見てみてください。

[vim操作チートシート](https://gihyo.jp/assets/files/magazine/SD/2015/201510/download/Furoku_CheatSheet_Vim.pdf)

:::note info
本当に機能の一部の一部しかご紹介していませんが、
キーボードのみで＆ホームポジションを崩さずにテキスト編集が可能です。
:::




# 4. 「.vimrc」によるカスタマイズ
VSCodeで使用する際はあまり必要がありませんが、UNIXやMacターミナル等でvimを使用する際は、カスタマイズすることをお勧めします。
「.vimrc」ファイルに設定したいパラメータを記載すると、vimエディタがカスタマイズできます。

## カスタマイズ前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/3372aa73-12a4-5eff-14fa-055a1ab06698.png)

## .vimrcファイルに書いてみる
```
" 行番号の表示
set number
" 検索結果をハイライト表示
set hlsearch
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/0217c2bb-c016-d2a4-e43c-ac824062d72f.png)




## カスタマイズ後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/961ba8bb-c821-1ba9-c572-2e53dc8a8f4f.png)

`set number`で行番号が表示されたり、
`set hlsearch`で検索文字をハイライト(※「は」で検索)してくれます。

:::note info
最強のカスタマイズを見つけよう！
:::

# 5. (便利ツール紹介) im-select - 日本語入力向けをスムーズにする
vimは日本語入力にはどちらかというと不向きで、
前述のvimモード切り替えに加えて、日本語入力↔︎英語入力の切り替えが入るとさらに煩雑になります。
そんな時には**im-select**というアプリを導入すると、vimモード切替と日本語入力切替を自動で行ってくれるので、スムーズに出来ます。
[VSCodeのVim使用時に日本語からノーマルモード移行でおかしい時の対処法](https://bou7254.com/posts/vscode-vim-japanese-im-solution)

# 6. (便利ツール紹介) Vimium - Webブラウザもキーボードで操作しよう
[Vimium](https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja)
という拡張機能があります。(chrome,Edge,Safari)
こちらを使うことで、Webブラウザ上の操作もvimライクにキーボードで操作が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/42d33f46-a707-8ab5-5b04-c1bee126d227.png)

画面上のアルファベットをキー入力すると、該当リンクやボタンを押すことができます。
マウス要らずですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812363/403e9873-bd8e-555f-34f3-4adedbd0fb09.png)

# 7. 終わりに
やはりキーボードのホームポジションを崩さないというのは、なかなかに楽で良いです。
ただ、ふとした操作はどうしても矢印キーだったり、マウスを使ってしまう時がありました。
長らく染みついた動きはすぐには変えられないですね…

使ったことのない方、久々に使ってみようと思った方もvimに触れてみて、マウスデトックスをしてみてはいかがですか？
よいvimライフをお送りください。