【🔰初心者向け】Vimのススメ③ [よく使う横移動をマスターしよう！]

## はじめに
こんにちは！ITスクールRareTECHにてCS（Customer Support）を担当している池村です。今回の記事は、初心者向けのVimの記事の続きになります。前回の記事を読んでいない方はそちらから読んでいただきますと幸いです。

https://qiita.com/ikemura-ren/items/aab0d9ef798207874f0d

私も使い始めは、ここにすごく苦戦をしました。
![2c426de9-8dd4-4fe0-a25d-0c2f3536f749_720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/f7da7b72-a9e2-4005-8c89-48f920168e82.png)


## Vimの横移動について
横移動というのが何を指しているかというと、1行分の文字列の中から、カーソルを移動したいところに動かすということになります。これがVimのキーマップとして様々ありまして、全て覚えるのはまず厳しいものです。

:::note info
なので、横移動に関してはよく使うキーを紹介していこうと思います。
:::




## まずは基本から
前の記事で、基本的な横移動については紹介しました。
##### `h`：左へ1文字分移動
##### `l`：右へ1文字分移動
##### `0`：行頭に移動
##### `$`：行末に移動

### 行頭の最初の非空白文字へ移動
こちらも使うことが多いのですが、非空白文字に移動します。
##### `^`：現在いる行の非空白文字の行頭に移動
非空白文字というのは、例えば以下のような場所です。

```Python:非空白文字
@app.route('/')
def index():
    return render_template('index.html', todos=todos)
    👆
```
Pythonではインデントを空白文字4つで表現しますが、この`r`が**この行の非空白文字**に当たります。`0`で行頭に移動すると、空白文字も含めた行頭に移動するので、使い分けが必要になります。

### 単語の先頭に移動
次に単語ごとの移動になります。
これは単語の先頭か末尾かによって変わってきます。

##### `w`：次の単語の先頭に移動
##### `W`：次の単語の先頭に移動（空白文字を単語の区切りと見る）
##### `b`：前の単語の先頭に移動
##### `B`：前の単語の先頭に移動（空白文字を単語の区切りと見る）

`w`と`b`の挙動

![output5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/3e78d172-6604-403f-b7cc-961b85c94f47.gif)


`W`と`B`の挙動

![output6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/9f9f2693-794c-4df6-8e75-ec6dd721a418.gif)

:::note info
`,`や`'`などを区切り文字として認識するのが`w`や`b`になります。
二つの挙動の違いを理解しておくと便利です。
:::

### 単語の末尾に移動
##### `e`：次の単語の末尾に移動
##### `E`：次の単語の末尾に移動（空白文字を単語の区切りと見る）
##### `ge`：前の単語の末尾に移動
##### `gE`：前の単語の末尾に移動（空白文字を単語の区切りと見る）

:::note warn
これも先ほどの動きが単語の頭から末尾になっただけで挙動は変わりません。
ただ、正直に言うと私はあまり使いません。`gE`が打ちにくいんですよね。`e`と`E`は少し使っています。
:::

## 指定文字に移動
次に、現在いる行の中から移動したい文字に移動する方法です。

##### `f + 指定文字`：指定した文字に移動（右に進む）
##### `N（数字） + f + 指定文字`：行の中のN個、後の文字に移動
##### `F + 指定文字`：指定した文字に移動（左に戻る）
##### `N（数字） + F + 指定文字`：行の中のN個、前の文字に移動


以下のコードには`e`が三つあります。カーソルは行頭の`{`にあるとします。
```Python:fを使った移動
{'id': 3, 'task': 'コードレビュー', 'completed': False}
```

- `fe`と打った場合

![output7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/3ac54bd6-ac0a-45cf-82a1-ebc2a36d753e.gif)

- 2feと打った場合

![output8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/8bd91757-250c-4ec0-aabb-dd8f6d03a87e.gif)


:::note info
前方にどの文字があるか、ある程度理解している必要がありますが、とても便利な移動方法です。
:::

### ただ、めんどくさいので、私はプラグインを入れて解消しています
少しだけプラグインを入れる方法を見ていきましょう。
VimはVSCodeと違って、プラグインを入れるのは少し面倒です。

プラグイン用のツールを入れた上で、設定ファイルに書き込みをしないといけません。

```Bash:vim-plugのインストール
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
```

```Bash:~/.vimrcへの書き込み
call plug#begin()
'rhysd/clever-f.vim'
call plug#end()
```

今回は以下のプラグインを導入します。

https://github.com/rhysd/clever-f.vim

書き込みが終わりましたら、保存をして終了してください。

次に適当にVimでファイルを開いていただいて、以下をコマンドモードで実行します。

```Bash:プラグインのインストール
:PlugInstall
```

これを実行することで、プラグインが使えるようになります。

このプラグインは、`f + 移動したい文字`での移動を簡単にしてくれるものです。
使い方は一緒ですが、`f + 移動したい文字`を打った後、`f`を何度か押すことで、その文字に順次移動をしてくれる優れものです。

:::note info
Vimには同じようなことができるキーマップもありますが、こっちのプラグインの方が使いやすいです。
:::

![output9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798971/4c518512-6efc-4587-bc3b-70dc75849be1.gif)

:::note info
上の動画は、`f + a`のキーを打った後、`f`キーを連打しているだけです。
:::


## おわりに
ここまで読了、お疲れ様でした。
正直全ては紹介しきれていないのですが、便利なプラグインがたくさんある今、基本の基本だけで十分かとも思い、結構省いてご紹介させていただきました。

横移動関連の続きは先にして、次はヴィジュアルモードの解説にいこうと思います。


## 宣伝
少しだけ宣伝です！
2025年4月19日（土）にRareTECHの学習交流会が東京で開催されます！
一般の方も一緒に学習できますから、ぜひご参加いただけますと幸いです！

https://connpass.com/event/347287/