なぜ私はVimを使うことになったのか〜開発用エディターとしてのVimの有用性に関するご報告〜

# はじめに

はじめまして[Hoda](https://twitter.com/1031hoda)と言います。

都内でWebエンジニアとして活動、現在はVue.jsとGo言語を使って業務系Webアプリケーションの開発支援に従事しています。

現プロジェクトでは当初VS Codeを使ってコーディングしていたのですが、ひょんなことからVimを使うことになったため、まだ使いはじめて日は浅いですが、その経験で得た情報をシェアしたいと思います。

# 背景

私が現在参画しているプロジェクトでは、セキュリティを確保するために少し強固なプロキシ環境が敷かれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/4031288d-a0c7-e334-4e7d-7bec1f4164a5.png)

これまでは、このプロキシを突破するための設定を個々の開発者で実施して開発環境を構築していましたが、開発の進捗に影響があるため、対策の一つとしてサンドボックスを構築しました。

しかしせっかく構築したサンドボックスに対してVS Codeのリモート接続の設定がうまくいかず、リモート越しでの開発に難がある状態でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/656ffe66-c334-7ce0-4e2e-ffb20d685c2f.png)

立ちはだかるプロキシの壁とVSCodeの設定難易度に悩まされる日々ですが、どうにかしてより円滑に開発を進められないかと思い、Vimを試験的に使ってみようというアイディアに行き着きました。

IntelliJやGolandなど有料の高機能エディタを検討する流れもありますが、手っ取り早く試せるので、実際に2週間ほど試した結果をまとめます。

# はじめにやったこと

まずはじめに、知っている人に聞いて基本的な使い方を復習しました。

例えばhやjでカーソルを移動するだとか、テキストオブジェクトで単語ごとまとめて操作する方法などです。

私は以前お世話になったインフラの現場で軽く使用していたため、基本的な操作は知っているつもりだったのですが、聞いてみると「こういう機能もあったのか」という新たな気づきがあり、非常に勉強になりました。

- 基本的な操作  

「h, j , k, l, w, b」でカーソル移動
「yy」でヤンク（コピー）、「p」で貼り付け...など

<img width="320" alt="wとbでカーソルを移動している様子" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/d29a1df8-712e-30b1-3e03-3b064b44aa46.gif">

- テキストオブジェクト

単語や文字列をまとめて操作できる
例：「diw」...カーソル位置の単語を削除
　↑「w」を「”」にすると「”」で囲まれた文字列をまとめて削除可能

<img width="320" alt="diwで単語ごと削除している様子" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/d93acd6e-8772-3feb-eb66-ba50b2883b29.gif">

- ビジュアルモード

文字単位、行単位、矩形単位で選択し、操作、編集が可能
例：複数行の行頭や行末に一気に文字をいれる...など

<img width="320" alt="ビジュアルモードで複数の行頭に文字を挿入している様子" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/5c291b19-7a19-5fd5-b95e-8912760d5d08.gif">

- タブ機能

`:tabe`などで、複数のファイルをタブとして開ける
タブ間の移動は`gt`or`gT`で行う

<img width="320" alt="複数のファイルをタブで開いている様子" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/b22508cc-5c78-df8a-d594-d90a19fcb8bf.png">

- 入力補完

文字を入力している途中で`ctrl + p`を押すと候補が選択できる
タブを複数開いていると、開いている全てのファイルからも情報を拾ってくれる

<img width="320" alt="vimの入力補完機能を使っている様子" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/ab892088-ce69-a7dd-e508-c4911870462d.png">

数時間ほどコードをいじってみて、基本的な操作とテキストオブジェクト、ビジュアルモードの活用ができるようになると、標準のメモ帳アプリより効率よくコーディングできるレベルになります。

# プラグインの導入

ある程度使えるようになってくると、Vimをもっと便利にカスタマイズしたいという欲求が湧いてきます。というわけでプラグインを導入することにしました。

開発用として使うのであれば、少なくとも下記の機能が備わっていると非常に助かります。

- カラースキーム
- リアルタイム入力補完
- フォーマッター
- リンター

これらの機能は標準では備わっていませんが、ご存知の通り、Vimには先駆者が開発してくれたたくさんのプラグインがありますので、それを使って様々な機能を実現可能です。

ちなみにVimのプラグインは__[Vim Awesome](https://vimawesome.com/)__というサイトで探せます。

<img width="500" alt="プラグインの検索に便利なvim awesomeのトップページ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/6dc11d8e-7d14-7fa5-6b6c-a3b4f5637361.png">

# Dockerを利用したVim専用の環境構築

プラグインを導入するにあたり、専用の環境をDockerで構築することにしました。

現場ではサンドボックスを一つのユーザで共有していたため、他の開発者の作業の邪魔にならないよう、環境を分けることが目的です。

下図は本環境のアーキテクト図です。

<img width="400" alt="vimの試験運用のために構築したコンテナ環境のアーキテクト" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/1d9631e2-894d-c75f-8044-1326dafb1db4.png">

Go言語で構築されたアプリケーションの開発を想定し、docker composeでGoのコンテナとVimがインストールされたUbuntuのコンテナを用意しました。

Ubuntuを採用した理由は、Go以外の開発でも応用しやすくて、汎用性が高いと思ったからです。

開発対象のコードはサンドボックスのホスト側に配置して、各コンテナへマウントします。

開発者はssh越しにUbuntuのコンテナへアタッチし、コンテナにインストールされたVimでコードを編集します。コードはGoのコンテナにもマウントされているので、編集内容が即座に反映されます。

Docker環境の詳細については[こちらのリポジトリ](https://github.com/hodanov/docker-env-for-vim)をご覧ください。



# 結果

配色、フォーマッター、リンターが使えてそこそこイケてる感じになりました。リアルタイムでの入力補完は実装できておらず、今後の課題です。

<img width="600" alt="プラグインを導入してそこそこイケてる感じになったvimの画像" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231946/0d5accbc-f0d1-d363-04f7-0b9321c6eaf2.png">

# まとめ

Vimの導入は簡単ですが、若干学習コストが高いなと感じました。

しかしリモート越しでの開発、かつ高機能エディタが使えない環境ではEmacsと並んでおそらく最適解なのではないかと思います。

先駆者の作成したプラグインが強力なので、使いこなせれば開発もきっと捗ることでしょう！

そして何より、使っていて楽しい！Vimはいいぞ！

本記事の内容はゴリラ.vimの勉強会で発表させていただきました。
https://speakerdeck.com/hodanov/nazesi-havimwoshi-ukotoninatutafalseka

参加人数が多くて少し緊張していたのですが、終始和やかな雰囲気で、運営の人たちもゴリラさんを筆頭に楽しそうにしていたのが印象的でした。参加型のライブコーディングも新しい。

とても楽しかったです。どうもありがとうございました:sparkles:

# 参考資料

今回の試験で用意したDocker環境の詳細については下記リポジトリをご覧ください。

- https://github.com/hodanov/docker-env-for-vim

Vimの勉強と調査にあたり、下記の記事を参考にさせていただきました。情報を公開してくれているみなさま。どうもありがとうございました。

- [vimって極めればvscode並のIDEになるんじゃないの？ - 最強のvimrcを晒す。](https://qiita.com/ryuta69/items/98901f4c4f0683e7aa57)
- [Vimの便利な画面分割＆タブページと、それを更に便利にする方法](https://qiita.com/tekkoc/items/98adcadfa4bdc8b5a6ca)
- [Vim におけるプラグイン管理についてまとめてみた](https://qiita.com/tanabee/items/e2064c5ce59c85915940)
- [10 essential Vim plugins for 2018](https://medium.com/@huntie/10-essential-vim-plugins-for-2018-39957190b7a9)