４月になって時間もたち、新入社員の方は仕事に慣れようとしている時期かと思います。
弊社にも新しくメンバーが参加し、フロントエンド技術の研修を行っております。

メンバーにサーバ設定を教えるなかで、こんな会話がありました。

「設定ファイルをvimで開いて」
「vimってなんですか？」

筆者はvimを当然の前提知識として考えておりましたが、考えてみればフロントエンドからエンジニアになった人からすれば知らなくてもおかしくありません。
しかし、フロントエンドエンジニアとはいえ、最低限の知識はあったほうが良いということでvimの操作を教えることとなりました。

vimを使うには何を教えれば良いのか？

Windowsのメモ帳でやっていることができればいいだろうと考えました。
文字の入力と削除、コピー＆ペースト、キーの移動、ファイルの保存、エディタの終了です。

しかし、vimは上記操作を行う以前に知らなければならないことがあります。

用途に応じたモードの区別

vimにはモードという考え方があります。
どんなものかと言えば、文字入力をする挿入モードと、編集（削除など）をするノーマルモードとで明確に分離しています。
例をあげると、文字入力（インサート）モードのときに、Ctrl-C, Ctrl-Vでコピーや貼りつけができません。
逆に不便になっているのでは？　という疑問もあるでしょうが、たとえば編集モード2yyと押すだけで2行コピーできるなど、便利なことが多いためそうなっています。

モードの考えかたを教えた上で、最低限ファイルの編集をするためのコマンドを紹介します。

vimの基本操作

■移動
ノーマルモード時
h : 左へ移動
j : 下へ移動
k : 上へ移動
l : 右へ移動

■編集
ノーマルモード時
i : ノーマルモードから挿入モードにチェンジ
yy : １行コピー
p : 下にコピーした内容を貼りつけ
x : １文字削除
dd : １行削除

■保存と終了
挿入モード時にesc : 挿入モードからノーマルモードにチェンジ
:w : 保存
:q : vimを終了

まとめ

必要最低限のものとなりますが、vimの操作を紹介してみました。
フロントエンドエンジニアでもVagrantのLinuxにログインして設定ファイルを編集するなどのケースがあるため、最初は慣れないかもしれませんが、チャレンジしてみましょう！

●Wantedly掲載情報( Angular/Reactを極めたいフロントエンジニア大募集！！ )

株式会社CPR ソリューション事業部はこちら