3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

みんなでVimやろう!

Last updated at Posted at 2025-01-17

ノベルワークスのとっしー(@tossy)です

はじめに

皆さんはVimを使ったことがありますでしょうか.
恐らく, 多くの人がgitでcommitをすr際に触れたことがあるのではないでしょうか.
Vimは古くからあるコードエディタです.
CUI(キャラクターユーザーインターフェース)環境が中心だったころに開発され, 様々な操作をキーボードだけで実現出来ます. つまり, マウスに手を伸ばすことなく, ホームポジションから手を動かすことなくコード編集を行える訳です.
このおかげで, Vimに慣れている人は一般的に 他のエディターを凌ぐスピードでコード編集が出来ます.
Vimを知らない人からすると, 魔法に見えるくらいかもしれません.
例えば, この動画を見てみてください.

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

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

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

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

Vimをvscodeに入れてみる

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

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

スクリーンショット 2025-01-16 20.58.57.png

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

早速Vimを使ってみる

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

スクリーンショット 2025-01-16 21.10.51.png

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

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

1. ノーマルモード

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

2. 挿入モード

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


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

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

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

挿入モードの時は, いつもの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 の略なのではないかと言われています)というのは, コマンドだったんだなということだけ覚えて頂ければと思います.

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

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

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

実践Vim 思考のスピードで編集しよう! (アスキー書籍)

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?