123
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Systemi(株式会社システムアイ)Advent Calendar 2024

Day 24

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

Last updated at Posted at 2024-12-23

1. はじめに

あなたは、日頃「Vim(ヴィム)」というエディタを使っていますか?
私は使っていません。(過去は使っていました)

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

こういう人向け

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

背景

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

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

2. Vimとは?

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

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

特徴

Vimにはモードという概念があり、切り替えながら編集作業を行います。

  • ノーマルモード(NORMAL) :コマンド入力や移動
  • インサートモード(INSERT):テキスト入力
  • ビジュアルモード(VISUAL):テキスト選択
  • コマンドモード(COMMAND) :保存やテキストエディタ終了などの操作

メリット

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

デメリット

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

3. vimに触れてみようのコーナー

簡単な操作の一部を説明します。

知っている人は飛ばしていただいてOK!

VSCodeの拡張機能で「vim」と検索し、「Vim」をインストールしましょう

image.png

適当にTextファイルを作成し、開きます
下部のステータスバーに書かれているように、今は NORMALモード(コマンド入力や移動) です。
このモードではテキスト入力ができません。
image.png

「 i 」キーを押すと、INSERTモード(テキスト編集)になります。
image.png

数行をテキスト入力し、「 Ctrl + [ 」キーを押します。
image.png

ここで操作感のキモを味わうことができますが
NORMALモード(コマンド入力や移動)での移動は「h、j、k、l」キーで操作します。
矢印キーの代わりにh j k lで操作という形です。

  • h :左移動
  • j :上移動
  • k :下移動
  • l :右移動
    他にも
  • w、b :単語単位での前後移動
  • x :1文字削除
  • u :アンドゥ
    など、他にも色々なキーで操作が可能です。
    詳細はチートシート等を見てみてください。

vim操作チートシート

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

4. 「.vimrc」によるカスタマイズ

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

カスタマイズ前

image.png

.vimrcファイルに書いてみる

" 行番号の表示
set number
" 検索結果をハイライト表示
set hlsearch

image.png

カスタマイズ後

image.png

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

最強のカスタマイズを見つけよう!

5. (便利ツール紹介) im-select - 日本語入力向けをスムーズにする

vimは日本語入力にはどちらかというと不向きで、
前述のvimモード切り替えに加えて、日本語入力↔︎英語入力の切り替えが入るとさらに煩雑になります。
そんな時にはim-selectというアプリを導入すると、vimモード切替と日本語入力切替を自動で行ってくれるので、スムーズに出来ます。
VSCodeのVim使用時に日本語からノーマルモード移行でおかしい時の対処法

6. (便利ツール紹介) Vimium - Webブラウザもキーボードで操作しよう

Vimium
という拡張機能があります。(chrome,Edge,Safari)
こちらを使うことで、Webブラウザ上の操作もvimライクにキーボードで操作が可能です。

image.png

画面上のアルファベットをキー入力すると、該当リンクやボタンを押すことができます。
マウス要らずですね。
image.png

7. 終わりに

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

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

123
18
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
123
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?