Vimに慣れるためのミニドリル

主にJavaScriptのコーディング用としてVimを使い始めたのですがなかなか操作に慣れなかったので、空き時間に練習するための題材を考えてみました。実際のコーディング時に役に立つかどうかは微妙ですが、とりあえず指の運動にはなりそうです。

なお、個人的に横移動は全て `f` でやるように矯正したかったので、それ以外の横移動はつぶしています。

```vim
nnoremap h <nop>
nnoremap l <nop>
nnoremap w  <nop>
nnoremap b  <nop>
nnoremap e  <nop>
nnoremap ge <nop>
vnoremap w  <nop>
vnoremap b  <nop>
vnoremap e  <nop>
vnoremap ge <nop>
```

# 変数名を置換する（打ち直す）｜`cw{chars}<Esc>`

ある変数名を変更したい、という場面です。

開始カーソル位置は、１行目の先頭です。
私は、`fh*Ncwpiyo<Esc>n.` で練習しています。

```js:Before
const hoge = 1;
console.log(hoge);
```

```js:After
const piyo = 1;
console.log(piyo);
```

# 変数名を置換する（プットする）｜`cw<C-r>0<Esc>`

ある変数名を変更したい、という場面です。
ただし、変更後の変数名は既にヤンク済みで、それをプットしたいという場合です。

開始カーソル位置は、１行目の先頭です。
私は、`fpyejFh*Ncw<C-r>0<Esc>n.` で練習しています。

```js:Before
const piyo = 1;
hoge += 1;
console.log(hoge);
```


```js:After
const piyo = 1;
piyo += 1;
console.log(piyo);
```

# スネークケースからキャメルケースに｜`f_qmxgUlq`

スネークケースにしていた変数をキャメルケースに変更したい、という場面です。

開始カーソル位置は、１行目の先頭です。
私は、`fh*Nf_qmxgUlq;@myiwncw<C-r>0<Esc>n.` で練習しています。
なお、`gUl` は `~` としたほうが手っ取り早いですが、打ちにくいです（私の場合）。


```js:Before
const hoge_piyo_fuga = 1;
hoge_piyo_fuga += 1;
console.log(hoge_piyo_fuga);
```


```js:After
const hogePiyoFuga = 1;
hogePiyoFuga += 1;
console.log(hogePiyoFuga);
```

# 変数をなにかで囲う｜`cw{chars}<C-r><C-o>"{chars}<Esc>`

変数を、記号や関数などで囲いたい、という場面です。

開始カーソル位置は、１行目の先頭です。
私は、`fhcwparseInt(<C-r><C-o>", 10)<Esc>jFp.` で練習しています。


```js:Before
const a = hoge;
const b = piyo;
```


```js:After
const a = parseInt(hoge, 10);
const b = parseInt(piyo, 10);
```

# 関数全体を選択する｜`vf{]}`

関数定義の全体を選択したい、という場面です。

開始カーソル位置は、１行目の先頭です。
私は、`fc*Nffvf{]}dnviwpNdj` で練習しています。
なお、`]}` は `%` としたほうが手っ取り早いですが、打ちにくいです（私の場合）。


```js:Before
const compare = function(a, b) {
    return a - b;
};

array1.sort(compare);
```


```js:After
array1.sort(function(a, b) {
    return a - b;
});
```


# 離れた２つの単語を入れ替える｜``demmf{char}viwp`mP``

２つの「離れた」単語を入れ替えたい、という場面です。

開始カーソル位置は、行の先頭です。
私は、``fhdemmfpviwp`mP`` で練習しています。


```js:Before
const a = hoge - piyo;
```


```js:After
const a = piyo - hoge;
```


# 複数行をブロックで囲う｜``V>O{chars}<Esc>`>o{chars}<Esc>``

いくつかの行をif文などのブロックで囲いたい、という場面です。


開始カーソル位置は、行の先頭です。
私は、``jVj>Oif (fuga) {<Esc>`>o}<Esc>`` で練習しています。
方法はいくつも考えられますが、個人的には、囲いたい部分をビジュアルモードで選択することから始める方法が視覚的に分かりやすいと思います。


```js:Before
hoge = 1;
piyo = 1;
foo = 1;
bar = 1;
```


```js:After
hoge = 1;
if (fuga) {
    piyo = 1;
    foo = 1;
}
bar = 1;
```

# ifブロックをコピーしたelseを追加する｜`f{yaBgPI else <Esc>`

もともとif文があり、中身が似たようなelseを追加したい、という場面です。

開始カーソル位置は、行の先頭です。
私は、`f{yaBgPI else <Esc>j<C-a>` で練習しています。

```js:Before
if (fuga) {
    hoge = 0;
}
```

```js:After
if (fuga) {
    hoge = 0;
} else {
    hoge = 1;
}
```

# オブジェクトリテラルを縦書き？にする｜`f,a<C-j><Esc>viBs<C-j><C-r>"<C-j><Esc>`

正しい用語が分からないのですが、JavaScriptのオブジェクトリテラルの書き方を、

```js
a = {hoge: 1, piyo: 2};
```

から

```js
a = {
    hoge: 1,
    piyo: 2
};
```

にしたい、という場面です。

開始カーソル位置は、行の先頭です。
私は、`f,a<C-j><Esc>;.viBs<C-j><C-r>"<C-j><Esc>` で練習しています。


```js:Before
const user = {name: "hoge", age: 20, address: "fuga"};
```


```js:After
const user = {
    name: "hoge",
    age: 20,
    address: "fuga"
};
```

# 変数宣言を１行にまとめる｜`jdWVkJF;r,`

複数行に書いていた変数宣言を１行にまとめたい、という場面です。

例えば

```js
let a = 1;
let b = 1;
let c = 1;
```

を

```js
let a = 1, b = 1, c = 1;
```

にします。

開始カーソル位置は、先頭行の最初の文字です。
私は、`jjdd.j..kk"1P.u.dWj.VkkJF;r,;.` で練習しています。


```js:Before
let a = 1;
console.log(a);

let b = 1;
console.log(b);

let c = 1;
console.log(c);
```

```js:After
let a = 1, b = 1, c = 1;
console.log(a);
console.log(c);
console.log(b);
```