はじめに
皆さん「VSCode Vim」というVSCodeの拡張機能をご存じでしょうか？
「VSCode Vim」を利用し始めてから1年経ったので、今回は皆さんに「VSCode Vim」を 布教 ご紹介しようと思います！
参考にさせていただいたサイト
・VSCode Vim README.md（GitHub）
・Vim 日本語ドキュメント
Vimってなに？
「VSCode Vim」の前にまずは「Vim」について軽くご紹介。
「Vim」は、Unix（Linux）のエディタである「Vi（ヴィーアイ）」から派生したテキストエディタの１つです。
Viエディタをより便利で使いやすくすることを目的としたエディタなので、ほとんどはViエディタの改良となっています。
それを踏まえてVSCode Vimとは、
“VSCode上でvimをエミュレーションする拡張機能”です！
どんなメリットがあるの？
１．コーディングがキーボードのみで完結する
一番のメリットは、やはり”キーボードのみで全て完結する”事だと思います。
マウスって結構繊細な操作を求められる場面が多くて、ミスの発生につながることがあります。
Vimエディタであればマウス要らずでコーディングすることができ非常に便利です。
２．コーディング作業の効率化が図れる
1による恩恵ですが、「キーボードのホームポジションから手を離さなくてよい」ってなかなかデカいです。
マウスを使う場面が多いと、右手があっち行ったりこっち行ったり…と忙しくなりますよね。
行ったり来たりする手間が省けるので、コーディング作業の効率化に繋がります！
続いてVimの「キホン」についてご紹介します！
”その１” Vim キホンの「キ」
Vimには様々なモードがありますが、今回は３つご紹介します！
・ Nomalモード
・ Insertモード
・ Visualモード
それぞれ以下の役割を担います。
Nomalモード
通称：ノーマルモード
Vimのテキスト編集コマンドを入力できるモードです。
※注意※
通常のテキストは入力できません！
エディタを起動すると大体このモードから始まります。
（コマンドモードとも呼ばれます。）
Insertモード
通称：挿入モード
通常のテキストを入力できるモードです。
Visualモード
通称：ビジュアルモード
テキストを範囲選択することができるモードです。
移動コマンドで選択範囲の拡大・縮小をすることができ、移動コマンド以外のコマンドを使用すると、選択範囲に対してそのコマンドを実行することができます。
”その２” Vim キホンの「ホ」
ここからは私が良く使うVimコマンドをグループに分けてご紹介します！
少々辞書的になってしまいますが、お付き合いください。
- オペレーションコマンド
| コマンド | 説明 |
| c | changeのc 変更する |
| d | deleteのd 削除する |
| y | yankのy コピーする |
| v | visualのv 選択する |
- 移動コマンド
| コマンド | 説明 |
| h | 左に移動 |
| j | 下に移動 |
| k | 上に移動 |
| l | 右に移動 |
| コマンド | 説明 |
| shift + h | 画面上部に移動 |
| shift + l | 画面中央に移動 |
| shift + m | 画面下部に移動 |
- オブジェクトコマンド
| コマンド | 説明 |
| i | innerのi 内部を指します |
| a | aroundのa 全体を指します |
| [ or ] | 角括弧（ブラケット）を指します |
| { or } or shift+b | 波括弧（ブレース）を指します |
| ( or ) | 丸括弧（パーレン）を指します |
| < or > | 山括弧を指します |
| ‘ | シングルクォーテーションを指します |
| “ | ダブルクォーテーションを指します |
| ` | バッククォートを指します |
- サラウンドコマンド
| コマンド | 説明 |
| y s <motion> <desired> | <motion>で指定した箇所を<desired>で囲む |
| d s <existing> | <existing>の囲いを削除する |
| c s <existing> <desired> | <existing>の囲いを<desired>にチェンジする |
| shift + s <desired> | visualモードの選択箇所を<desired>で囲む |
- その他コマンド
| コマンド | 説明 |
| o | open lineのo 新しい行を下に追加して挿入モードに切り替えます |
| shift + o | 新しい行を上に追加して挿入モードに切り替えます |
| p | putのp レジスタ内の文字列をカーソル下に貼り付けます |
| shift + p | レジスタ内の文字列をカーソル上に貼り付けます |
”その３” Vim キホンの「ン」
では、キホンの「ホ」でご紹介したコマンドの実践をしてみましょう！
応用例を３つご用意しました。
【応用①】
”括弧の中のテキストを削除したい時”・・・
マウスであれば：括弧内を全選択して削除
キーボードであれば：Shift + 矢印キーで選択して削除
・・・なかなか手間がかかりますよね。
そんな時は Normalモード で括弧の中のテキストにカーソルを合わせd → i → ( と順番に入力ってみましょう！
if文の括弧の中だけ削除することができました！
この d i ( コマンド意味としてはこんな感じ。
・d → 削除する（オペレーションコマンド：delete）
・i → 内部を（オブジェクトコマンド：inner）
・( → 括弧の（オブジェクトコマンド：( ）
上記のように、 ”括弧の 内部を 削除する” という意味のコマンドになっています！
・・・と、こんな感じでVimは 各グループのコマンドを組み合わせて使用します！
【応用②】
”文字列の 内部を 変更する” 場合は・・・
・c → 変更する（オペレーションコマンド：change）
・i → 内部を（オブジェクトコマンド：inner）
・” → ダブルクオーテーションの（オブジェクトコマンド：” ）
なので、 c i ” になるわけですね！
※ オペレーションコマンドの”change”はコマンド実行後にInsertモードに移行します。
そのため、削除後すぐにテキストを入力できます。
【応用③】
”括弧の 中に 波括弧を 入れたい”場合は・・・
( data ) → ({ data })
上記のように変更したい場合ですね。
これ、あるあるだと思います。
そんな面倒な入力も、Vimなら簡単！！
・ys → 囲む（サラウンドコマンド：ys）
・i → 内部を（オブジェクトコマンド：inner）
・( → 括弧の（オブジェクトコマンド：( ）
・{ → 波括弧で（オブジェクトコマンド： { ）
というように、 ys i ( { になります！
このように各グループのコマンドを組み合わせて、なんでもできるのがVimの魅力です！
「これコマンドで出来ないかなぁ・・・？」と思うことは大抵コマンドが用意されていますので、ご興味があればぜひ調べてみてください！
最後に
ここまで読んでいただいた方はVimに片足突っ込んでいるのと一緒です。
今すぐ拡張機能をご自分のVSCodeにインストールし、使ってみましょう！
Vimの難しいところでもあるのですが、今回ご紹介したコマンドを一気に覚えて使いこなそうとすると、身に付く前に挫折する可能性があります。
まずは”自分が何の動作を効率化したいか”を考え、そのコマンドを使うところから始めるのがおすすめです！
（私の場合、”括弧の中のテキストを消す”作業が面倒だったので、 d i ( から使い始めました）
使っていく内に、段々と「次はこれを効率化したい！」となりVimコマンドが身についていくと思います。
皆さんもVim教に入信しましょう！
