【初学者向け】プログラミングを始めるなら、Vim流入力をマスターしよう！

# はじめに
[情報通信システム工学科アドベンドカレンダー](https://qiita.com/advent-calendar/2018/ics2018)1日目です。

情報通信システム工学科3年の大木建人@2357giです。

今回は大学の授業で辛うじてプログラミング触ったことはあるけど、
後期から研究室配属されて本格的にプログラミングすることになりそう、やべーって学友に向けてのものとなります。

あとはだいたいプログラミング初心者のかた向けです。

本記事の内容は
**プログラミングするときは、vim流入力をマスターしよう**
というものです。

# そもそも
プログラミングをするときにカーソル移動を頻繁にしますよね？
しかし、カーソル移動に十字キーを使うのはとてもナンセンスです。
なぜなら、人はブラインドタッチする際に人差し指をFとJに構えている（ホームポジションのことです。ブラインドタッチができない？結構。[できるようになりましょう](https://www.e-typing.ne.jp/)）のですが、十字キーで移動しようとするとどうしてもホームポジションから移動する必要が出てきてしまします。
> 一般的なホームポジション
>![bt-home.png](https://qiita-image-store.s3.amazonaws.com/0/270408/22171757-6e70-3603-2e45-069b475a6342.png)
>[自己流タイピングはダメ！パソコン初心者に教えたいタイピング習得のコツ | ぱそちき | パソコン初心者に教えたい仕事に役立つPC知識](https://pasotiki.com/typing-kotu/)より引用

この画像の通りにキーボードに指を重ね、その後十字キーを操作しようとしてください。
試しに十字キーの→を押してみてください。


はい。


**無駄**がありますよね？？

小指で十字キーをさわりました？
それとも小指以外で十字キーを触りに行きました？
ホームポジションから右手がズレましたよね？

これではまたホームポジションに戻らなければいけません。

ましてや十字キーが独立しているキーボードや、十字キーの形がいつもと違う形だったりしたら目も当てられません。


ホームポジションから動かずにカーソル移動できればいいのに・・・・十字キーがホームポジションにあればいいのに・・・・



大丈夫、それは全て**可能**です。


**そう、Vimならね！**

ババーーーーン
>![06.png](https://qiita-image-store.s3.amazonaws.com/0/270408/49bcebca-62e1-9d5c-98dc-51472b2b2471.png)
>[正しいVimのロゴ — KaoriYa](https://www.kaoriya.net/blog/2013/12/06/)より引用

# Vimの仕組み、どうやって移動するのか
Vimはカーソル移動がH, J, K, Lで可能となっています。
つまり、ホームポジションから動かずにカーソル移動が可能となっております。
HJKLを指で押してみてください。
ここでカーソル移動ができるのです。**もう右下にあるナンセンスな矢印キーは外しても構いません。**

HJKLで移動するなら文字が打てないじゃんと思った貴方、Vimは素晴らしい解決策を用意してくれています。

それは、モードという概念です。

# モードとは
Vimにはモードという概念があり、ユーザーは各モードを自由時際に飛び回り思いのままにコーディングして行きます。
HJKLでカーソル移動ができるのは「ノーマルモード」であり、
文字を入力する際には`i` や `I` もしくは `a`, `A`, `o`, `O`, `s`, `S`のコマンドをノーマルモード上で打ち込むことにより「挿入モード」へ"モードチェンジ"することができ、挿入モード中で自由に文字を打つことが出来ます。

**「ちょっと待って！コマンド打たなきゃ文字が打てるようにならないの？！しかも文字打てるようにするだけなのにiとかIとかaとかAとか....コマンドの種類多すぎ！！！」**

そう思うと思ってました。
そうです。vimは文字を打つときに一度`文字を打てるモードにするためのコマンド`を打たなければいけないのです。

これではHJKLでカーソル移動ができる嬉しさより、文字入力する前にコマンドを打たなければいけない煩わしさの方が上回ってしまいます？

安心してください。
Vimは入力モードに移行する際の選択肢を豊富にすることにより、この入力モードに行こうする際の煩わしさもVimの利点へと昇華させているのです。

# コマンドによって挿入モードへ移行できる喜び
例えば、以下のような文章があったとします。数字は行番号、| はカーソルの位置です。

```

1 加藤くんは 春菜さんのモノマネ|が　とても上手です。
2 面白いですね。
```
いいですね。
ですが、加藤くんは春菜さんのモノマネよりも兵藤さんのモノマネの方が上手です。
なので、1行目と2行目の間に`加藤くんは 兵藤さんのモノマネも とても上手です。`という文章を追加するとします。

```
1 加藤くんは 春菜さんのモノマネが　とても上手です。
2 加藤くんは 兵藤さんのモノマネも とても上手です。
3 面白いですね。
```
このような文章にしたいです。

#### 十字キーなやり方
今日までのはあなたは、カーソル移動を十字キーで行うことを強いられています。
十字キーでどのようにカーソルを移動させ文字を入力するか考えてみましょう。
`↓(十字キー下)`を押して
`←`を何回か打ち込み(もしくはcmd + ←などで)行頭まで移動し、
文章を打ち込んで、
改行して
文章の追加としますか？

今、あなたはカーソル移動の為だけに何回キーを押し込みました？？

#### vimなやり方
Vimでは`o`を押します。
すると、カーソルが以下のように移動します。

```

1 加藤くんは 春菜さんのモノマネが　とても上手です。
2 |
3 面白いですね。
```
現在のカーソル行から一行下に、自動で改行しつつカーソルが移動します。
この時点ですでに`挿入モード`になっているので
あとは文字列を打ち込むだけです。


「便利！」と思いました？

このような「便利！」がVimには**星の数ほど詰まっています**。

また、`o`は下に改行して挿入でしたが、`O(大文字のo)`は上に改行して挿入です。

行頭や行末に一瞬で移動して挿入モードになるコマンド`I`, `A`だったり、

他にも現在のカーソル位置から行末まで削除しつつ挿入モードになるコマンド`C`だったり、

単語の上にカーソルがある場合単語を削除して挿入モードになるコマンド`ciw`だったり、


コマンドをさっと入力するだけで済みます。
普通の入力方法で上記のことをする場合を考えてみてください。
何回キーを入力したか、数え切れないほど煩わしい操作をしていますよね？
Vimなら一瞬です。

**Vimなら、一瞬です。**


# vimを使ってみよう！
ここまで読んでくれたあなたはきっといますぐVimを使いたくて仕方がない、
それかもしくは手元のターミナルで`$vi`と打ち込み上記のコマンドを試し、感動した方だと思います。
今回はプログラミング初学者の方向けなので、 VisualStudioCodeのVim拡張機能を用いてvimを体験したいと思います。


> -なぜvimではなくVScodeを使うの？
私はvimはプログラミング初学者に触らせるには少々不親切だと思っています。
なので、今回は「VisualStudioCode」と言う優秀なIDE（総合化初環境）を用いてIDEの高性能なサポートも受けつつ優秀なVimの入力を体験していただきたいと思っています。


## 環境をセットアップ
まずはVisualStudioCode(以下VSCode)を導入します。
VScodeとはMicrosoft製のオープンソースの総合開発環境であり、
入力補完やファイル管理などが高水準で纏まっています。
また、ユーザーが開発した拡張機能も充実しており、
今回はVSCode上でVimの入力方法が入力できる「vim」と言う拡張機能を用いてVimを導入していきたいと思います。

### 1. VSCodeの導入

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)

上記のサイトからインストーラを用いインストールします。

### 2. VScodeに拡張機能を導入
左側メニューからEXTENTONS、Vimで検索し、導入します。
<img width="359" alt="Screenshot_2018-11-20 18.34.16_WWHEW5.png" src="https://qiita-image-store.s3.amazonaws.com/0/270408/62add94b-864f-70e0-303f-6e42602428bc.png">


再起動し、EXPLORERから適当なファイルを開いてみます。

下の方に`--NORMAL--`と出ていればOKです。
<img width="234" alt="Screenshot_2018-11-20 18.35.44_72MVSK.png" src="https://qiita-image-store.s3.amazonaws.com/0/270408/a54ad0c7-9938-bc7d-b10c-e2bc88f6cc66.png">


**ようこそVimの世界へ。思考のスピードでのコーディングを楽しみましょう。**

# 終わりに
今回はVimの魅力と簡単なコマンドの紹介、VSCodeを用いたVim入力の初歩的なことを解説しました。

こちらにコマンド等がいい感じに纏まっているのでオススメです。
[Vim幼稚園からVim小学校へ - Qiita](https://qiita.com/hachi8833/items/7beeee825c11f7437f54)


次回は@hnk1031さんが[女子大生っぽい記事](https://qiita.com/hnk1031/items/e791f31ffaaee8cf6ea7)」を書いてくれるそうです
女子大生っぽいこと・・・楽しみですね。

