Vim操作まとめ（入門）

エンジニアとして一度は触れることがあるVimの操作について解説します。

普段はVScodeやJetBrains製,EclipseなどのIDEを使用することが多いですが、
なるべく手の動きを少なくしたり。マウスを使用しないようにコーディングをしたいと考えるエンジニアの中で今でも使用されているエディタになります。

現代では、IDEの性能が非常に高くなっているので、IDEのプラグインにVimを導入して
IDE上でVimライクなコーディングをして生産性を上げていくというのが最適なのではないかと個人的に感じています。

※ちなみに、Vimの進化版としてNeoVimがあります。この記事ではNeoVimを使用しておりますが、Vimと操作は基本的に同じになります。

最低限必要だと思われるコマンドをまとめました。

# 基本操作（モードの切り替え）

初心者は戸惑うことが多いですが、Vimには`モードの切り替え`という独特な概念があります。`モード`ごとで操作できる内容に違いがあります。

初心者的には違いは以下だと理解しておく程度で問題ないと思います。
- 挿入モード：文字やコードを打つことができます
- ノーマルモード：ファイルの中の移動をすることができます

| コマンド| 内容|
|:----|:----|
| vim| 起動|
| i| 挿入モード（Insert）|
| esc| ノーマルモード（Normal）|

以下では、以下を実施しています。
1. Vim（NeoVim）の起動
2. 挿入モードに切り替えて、`hello world`を入力
3. ノーマルモードに切り替える

![Kapture-2024-03-24-at-22.11.02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/1a19e5cd-5ea5-bf78-0f02-3aaa3bf9e528.gif)


# 移動（1）

慣れるまで非常に戸惑うコマンドになります。
ここで挫折する方多いですが、ぜひ慣れてください。

私はこのサイトを使用してファイル内の移動の練習をしました。
https://vimate.jp/lessons/vimmer-01

ノーマルモードで実施します。

| コマンド| 内容|
|:----|:----|
| k| 上に移動|
| j| 下に移動|
| h| 左に移動|
| l| 右に移動|

以下では、以下を実施しています。

`k` `j` `h` `l`を使ってvimの中で移動をしています。

![Kapture-2024-03-24-at-22.33.50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/70da5fc0-b137-aeff-2083-9e5e92193897.gif)


# 移動（２）

| コマンド| 内容|
|:----|:----|
| :5| 5行目に移動（数字を変えて好きな行に移動可）|
| 0| 先頭に移動|

上記のような便利な機能もあります。

![Kapture-2024-03-24-at-22.42.49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/cffd566b-3faf-70f8-4e0b-62b8280e9f6f.gif)


# 保存

保存の仕方にも様々な種類がありますが、以下が用意されています。

| コマンド| 内容|
|:----|:----|
| :w　ファイル名| 名前をつけて保存|
| :w| 上書き保存|
| :q| 編集終了|
| :q!| 保存しないで編集終了|
| :wq| 保存して終了|

# 編集

ノーマルモードで実施します。

| コマンド| 内容|
|:----|:----|
| a| 次の文字から挿入モード|

![Kapture-2024-03-24-at-22.48.29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/896220ff-1c3f-7bc8-5a7c-a0b4d0c4097b.gif)

# 削除

ノーマルモードで実施します。

| コマンド| 内容|
|:----|:----|
| x| 1文字のみ削除|
| dw| 1単語の削除（削除したい単語の先頭に移動してから実施）|
| u| undo（元に戻す）|
| dd| 1行切り取り|
| 2 dd| 2行切り取り|

![Kapture-2024-03-24-at-23.30.18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/3e2f0c65-13c0-9c26-98d2-2a358b559ff3.gif)


# コピー & ペースト

ノーマルモードで実施します。

| コマンド| 内容|
|:----|:----|
| yy| 1行コピー|
| 2 yy| 2行コピー|
| p(小文字)| 下にペースト|
| P(大文字)| 現在の行にペースト|

![Kapture-2024-03-24-at-23.59.04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/48d012da-49da-06f2-3dd4-82d2d0d36e35.gif)

# 検索と置き換え

ノーマルモードで実施します。

| コマンド| 内容|
|:----|:----|
| /｛検索をしたい文字｝| 検索|
| n| 次の検索結果に移動|
| N(大文字)| 前の検索結果に移動|

以下では、文字を検索して、検索結果を移動しています。

![Kapture-2024-03-25-at-00.33.52 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/6e843ccf-6e96-b16e-f4a5-f2c2145ff2d9.gif)


| コマンド| 内容|
|:----|:----|
|:%s/検索する文字/一括置換したい文字/g |一括置換 |
|:%s/検索する文字/一括置換したい文字/gc |確認しながら置換 |

以下では、文字を検索して、上記2種類の一括置換をしています。

![Kapture-2024-03-25-at-00.54.13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/8156594b-ab02-38af-4bed-a9dc72e4b475.gif)

# 空白行の挿入

ノーマルモードの状態

| コマンド| 内容|
|:----|:----|
|o(小文字) |選択している行の下に空白行を挿入 |
|O(大文字) |選択している行に空白行を挿入 |

![Kapture-2024-03-26-at-00.49.46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/1e5272e1-29a7-3477-826b-8ebd70be3241.gif)

# Visualモード（複数行のコピー＆ペースト）

少々応用になりますが、Vimには`ビジュアルモード`というモードも存在します。
ノーマルモードの状態で「v」を押してVisualモードへ変更します。

| コマンド| 内容|
|:----|:----|
|hjklで範囲指定 + y|複数行を選択してコピー|

pコマンドを使用すれば、ペーストすることができます。

![Kapture-2024-03-26-at-00.58.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/9a76b43f-d105-6834-5191-c68034e929c0.gif)


# Visualモード（インデント操作）

ノーマルモードの状態で「v」を押してVisualモードへ変更

hjklで複数行を選択した状態で以下のコマンドを実施します。
| コマンド| 内容|
|:----|:----|
|shift + > |右にインデント移動|
|shift + < |左にインデント移動 |

![Kapture-2024-03-26-at-01.07.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/5840f490-0002-5e7d-8911-4e19676b1407.gif)