イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

I will be Vimmer

初めまして、新卒一年目のOtakeです。
本日はエディタについてお話をしようかなと思います。

入社前まではAtomを愛用していたのですが、VScodeのジャンプ機能やDockerコンテナにログインできる機能に魅力を感じて、最近はVSCodeを愛用しています(Atomにジャンプ機能やDockerコンテナログイン機能があるかは知りません)。
しかし、以前から僕にはある想いがありました。
「Vimmerカッケー!!!」
僕は基本的にカッコいいかどうかと言う基準を大事にしています。

上司「kohe」さんがVimmerで、熱くVimの魅力を語ってくださります。
また、彼からの情報によると、VScodeにVimを拡張機能として入れることができるらしく、VScodeの便利な機能とともにVimを味わえるそうです。
「VimとVScodeの良いとこどりええやん」
と思い、Vimの勉強をしてみようと思いました。
以下に今回勉強した内容を簡単に綴ります。

そもそもVimとは?

VimはUnix系のエディタでLinuxにはほぼ標準でインストールされています。
vimの前身であるviはマウスを使わずに使用することが想定されていたため、vimはキーボードで全ての操作が実行できるます。
こちらの記事でVimの魅力が綴ってあるので、目を通して見てください
Vim の魅力を余すこと無くお伝えする動画まとめ

「プログラマーにとってのエディタとは、武士にとっての刀のようなもの」
心に刺さりました。
それではVimの機能の説明をしていきます。

起動方法(Mac)

ターミナルで以下を実行します。

vim [ファイル名]

小噺: Vimのチュートリアルをしてくれるインタラクティブツールでvimtutorと言うものがあり、コマンドラインで以下を実行すると日本語のチュートリアルが見られます。

vimtutor

Vimの設定

Vimでは表示の色やインデントなど様々な設定をすることができます。
設定は.vimrc.gvimrcというファイルに書きます。
.gvimrcファイルにはGUI vim固有の設定を記述して、それ以外の設定を.vimrcファイルに記述します。
今回は色々な先人たちの設定から良いとこ取りで設定をしてみました。
これをGitで管理すればどのPCでも同じ設定を反映できるようになります。この記事を参考にするととても分かり易いです。
dotfilesをGitHubで管理

今回僕が設定した.vimrcファイルと.gvimrcファイルをこちらに掲載したので、参考にどうぞ
.vimrcと.gvimrcの設定

モード

vimには以下のようなモードがあります。

【ノーマルモード】
起動した時のモードです。
ESCを押すと、他のモードからノーマルモードに切り替わります(Ctrl + [でも可能)。

【インサートモード】
テキストファイルを編集することができるモードです。
ノーマルモードからi, I, a, A, o, O, giのいずれかを入力するとインサートモードに切り替わります。
i : カーソル位置から
I : 行頭から
a : カーソル位置の右から
A : 行末から
o : 現在の行の下に1行挿入し、その行頭から
O : 現在の行の上に1行挿入し、その行頭から
gi : 最後に入力がされた場所にテキストを入力

【ビジュアルモード】
ビジュアルモードには3種類あります。

  1. 通常ビジュアルモード
    入力された文字列を選択するモードです。
    ノーマルモードの状態でvを入力するとビジュアルモードに切り替わります。

  2. 行単位ビジュアルモード
    入力された文字列を行単位で選択するモードです。
    ノーマルモードの状態でVを入力すると切り替わります。

  3. 矩形ビジュアルモード
    入力された文字列を矩形で選択するモードです。
    ノーマルモードの状態でCtrl + vを入力すると切り替わります。

【コマンドモード】
コマンドを入力するモードです。
ノーマルモードの状態で、:を入力しその後にコマンドを入力します。

※Vimあるあるなのですが、何をタイプしているかわからなくなることが多々あります。そういった場合にはESCを押してノーマルモードにしてから、コマンドを再入力してみましょう。

コマンド

コマンドは数が多すぎるので、必要度に応じて*を付与します。
*** …​ 必須
** …​ 必要
* …​ 覚えとくと便利

移動

基本移動

左に移動(***)

h

下に移動(***)

j

上に移動(***)

k

右に移動(***)

l
画面単位で移動

画面先頭へ移動(**)

H

HはHeaderの略

画面中央へ移動(**)

M

MはMiddleの略

画面最終行へ移動(**)

L

LはLowerの略

一画面後に移動(**)

Ctrl + f

fはForwardsの略

一画面前に移動(**)

Ctrl + b

bはBackwardsの略

半画面下に移動(*)

Ctrl + d

dはdownの略

半画面上に移動(*)

Ctrl + u

uはupの略

カーソルが画面中央になるようにスクロール

zz
単語単位で移動

単語単位で進む(*)

w

wはwordの略

単語単位で進む(ドットやコロンのような記号も単語として含む)

W

単語単位で戻る(*)

b

bはbackwordの略

単語単位で戻る(ドットやコロンのような記号も単語として含む)

B

単語の末尾へ移動(**)

e

eはend of wordの略

単語の末尾へ移動(ドットやコロンのような記号も単語として含む)

E
行単位で移動

最初の行の先頭に移動(*)

gg

gはgoの略

最後の行の先頭に移動(*)

G

行番号を指定して移動(**0

[行番号] + G

現在の行の行頭に移動(*)

0

現在の行の最初の空白でない文字へ移動(*)

^

^は正規表現の先頭と同じ意味

現在の行の行末に移動(*)

$

$は正規表現の末尾と同じ意味

次の行の先頭へ移動(*)

Enter

前の行の先頭へ移動(**)

-

現在の行の指定した文字に移動(**)

f + 文字

fはfindの略 (行中に指定した文字が複数ある場合は、「;」を押すと次の文字に移動)

(), {}, []の対応する場所へ移動(**)
(), {}, []の上で%
保存

上書き保存(*)

:w

wはwriteの略

新しいファイル名をつけて保存(**)

:w [ファイル名]

上書き保存をしてvimを終了

ZZ
終了

カレントウィンドウを閉じる(*)

:q

qはquitの略

カレントウィンドウを強制的に閉じる(*)

:q!

!は強制の意味

全てのウィンドウを閉じる

:qa

aはallの略

保存かつ終了

カレントウィンドウを保存して閉じる

:wq

全てのウィンドウを保存して閉じる

:wqall
他のファイルを開く(*)
:e [ファイル名]

eはeditの略

削除(カット)

削除された内容はそのままクリップボードようなところに保存される

文字単位で削除

カーソルの文字を1文字削除(*)

x

xは削除することを表すcross outのcrossから由来

カーソル直前の文字を1文字削除(**)

X
行単位で削除

カーソルの行を1行削除(*)

dd

ddはdeleteの略

カーソルから行の先頭までの文字を削除(**)

d^

カーソルから行の末尾までの文字を削除(**)

d$
単語単位で削除

カーソルの位置から1単語削除(*)

dw

wはwordの略

貼り付け(ペースト)

コピーした内容をカーソルの後にペースト(*)

p

pはpasteの略

コピーした内容をカーソルの前にペースト(**)

P

コピー

行単位のコピー

現在の行をコピー(*)

yy

yyはyankの略

カーソルの位置から行頭までコピー(**)

y0

カーソルの位置から行末までコピー(**)

y$
単語単位のコピー

カーソルの位置から1単語コピー(*)

yw

操作の取り消し

undo(*)

u

uはundoの略

redo(*)

Ctrl + r

rはredoの略

検索

ファイル内文字列検索(*)

/ + [検索文字列]

検索文字列がファイル内に複数ある場合に、続けて下方向に検索

/ + [検索文字列] + n

検索文字列がファイル内に複数ある場合に、続けて上方向に検索

/ + [検索文字列] + N

カーソルが当たっている単語を検索(*) 上方向検索

*

下方向検索

#

テキスト全体選択(**) ビジュアルモードで3つのコマンドを組み合わせてテキストの全体選択を行う

  1. gg(ファイルの先頭に移動)

  2. V(行単位ビジュアルモード)

  3. G(ファイルの末尾に移動)

置換

文字単位の置換

カーソル位置の文字を1文字だけ置換(**)

r

rはreplaceの略

カーソル位置の文字からESCを押すまで入力した文字数分置換(*)

R

カーソル位置の文字をESCを押すまでに入力した文字に置換(*)

s

sはsubstituteの略

単語単位の置換

カーソル位置から1単語分をESCを押すまで置換(*)

cw

cはchangeの略

行単位の文字列で置換

カーソルがある行の文字(文字列)を一つ置換(*)

: + s + / + [置換前文字(文字列)] + / [置換後文字(文字列)] + /

Ex.) :s/apple/Apple

カーソルがある行の文字(文字列)を全て置換(*)

: + s + / + [置換前文字(文字列)] + / [置換後文字(文字列)] + / + g

Ex.) :s/apple/Apple/g

全ての行の最初の文字(文字列)を置換(*)

: + % + s + / + [置換前文字(文字列)] + / [置換後文字(文字列)] + /

Ex.) :%s/apple/Apple

※%は全行の意味

全ての行の全ての文字(文字列)を置換(*)

: + % + s + / + [置換前文字(文字列)] + / [置換後文字(文字列)] + / + g

Ex.) :%s/apple/Apple/g

確認をしてから置換(**) 全ての行の全ての文字(文字列)を確認してから置換

: + % + s + / + [置換前文字(文字列)] + / [置換後文字(文字列)] + / + g + c

Ex.) :%s/apple/Apple/gc

cはconfirmの略
上記のようにすると置換するか聞かれるので、 yでYES(置換する),
nでNO(置換しない),
aでALL(以降全て置換),
` q`でQUIT(ここで終了)
で質問に答える。

大文字⇄小文字の置換

カーソル位置の文字を大文字⇄小文字に置換

~

画面分割

縦分割(*)

:sp

spはsplitの略

横分割(*)

:vs

vsはvirtual splitの略

画面移動(*)

Ctrl + w + w

wはwindowの略

画面を閉じる(*)

:close

タブ

新しいタブを作成

開くファイルが確定していない場合(**)

:tabnew

開くファイルが確定している場合(**)

:tabe [ファイル名]

eはeditの略

タブの移動

次のタブへ移動(**)

gt

gtはgo to next tabの略

前のタブへ移動(**)

gT
タブの終了(**)
:tabclose
タブを起動する時に開く(*)
vim -p [ファイル名] [ファイル名]
開いてる全てのタブで置換(*)
:tabdo [置換条件]
Ex. ) :tabdo %s/html/HTML/g (全てのタブで全てのhtmlをHTMLに置換)

直前の操作を繰り返す(*)

.

インデントを揃える

現在の行のインデントを揃える(*)

=

全ての行のインデントを揃える(**)

1. gg (先頭に移動)
2. V (行選択ビジュアルモード)
3. G (末尾に移動)
4. = (指定行のインデントを揃える)

文字列補完

補完候補を表示+選択(**)

Ctrl + n

次の補完候補を選択(**)

Ctrl + n

前の補完候補を選択(**)

Ctrl + p

便利機能

矩形選択後に編集

選択範囲に文字列を追加(*)

1. Ctrl + V (矩形ビジュアルモード)
2. I (挿入モード ※大文字のi)
3. 文字入力
4. ESC

※ESCを押すと選択した部分に修正が反映される

選択範囲の文字列を削除

1. Ctrl + V (矩形ビジュアルモード)
2. x (削除)

※削除はコピーもされるので、その後pでペーストすることも可能

オペレータとモーション

一通りのコマンドを学んだところで、さらにVimを深く知りにいきます。
vimのキーには大きく分けて「モーション」と「オペレータ」の2種類があります。

【モーション】
操作の適用範囲。カーソル移動コマンドのこと。
モーションコマンド : h, j, k, l, w etc…​
使い方 : [count] motion (countは省略可能)
Ex.) 4h(左に4つ移動)

【オペレータ】
操作を表す。オペレータはモーションに対して使うか、 Visual mode上で使うことができる。
オペレータコマンド一覧 :

  • c : changeの略。変更を行う

  • d : deleteの略。削除を行う

  • y : yankの略。コピーを行う

  • ~ : 大文字⇄小文字の変換を行う

  • g~ : 操作を適応する全ての文字に対して大文字⇄小文字の変換を行う

  • gu : 操作を適応する全ての文字に対して小文字に変換する

  • gU : 操作を適応する全ての文字に対して大文字に変換する

オペレータとモーションは組み合わせると例えば以下のようなことができます。

d2w(カーソル位置の単語とその次の単語を削除)

ノーマルモードでは、基本的に最初にオペレータを入力し、その後に範囲指定をします。
ビジュアルモードでは、範囲を最初に選んでそれからオペレータを入力します。
ここで僕はあることに気づきました。
今までに記述したdを使用した削除コマンド, cを使用した置換コマンド, yを使用したコピーコマンドがオペレータ+モーションになっていました。
つまり、このオペレータ+モーションの法則とオペレータ、モーションを覚えてしまえば、あとは組み合わせでいろいろな操作ができるということです。
Vim面白い。。。

テキストオブジェクト

さらに深くVimについて知っていきます。
テキストオブジェクトとは、文字・単語・行・段落・括弧で括られた範囲など、コマンド操作を適用する範囲のこと。
オペレータと組み合わせることで、簡単に範囲を選択して操作を行うことができます。
テキストオブジェクトとオペレータの組み合わせは以下のように使用します。

オペレータ + [count] + テキストオブジェクトの範囲 + テキストオブジェクト

テキストオブジェクトの範囲

テキストオブジェクトの範囲では、オペレータを適応する範囲を指定します。
テキストオブジェクトの範囲の種類は以下の2つです。

  • a : an objectの意味。記号を含むまとまりを表す。

  • i : innerの意味。記号を含まないまとまりを表す。

例えば、テキストオブジェクトの種類が[]であった場合(テキストオブジェクトの種類については後述する)に、ci[とすると[]の内側を変更することになりますが、ca[とすると[]の内側と[]自体を変更することになります。

テキストオブジェクトの種類

以下の通りです。

  • w : 単語

  • [ : []のブロック

  • ( : ()のブロック

  • { : {}のブロック

  • < : <>のブロック

  • t : タグのブロック

  • " : ""のブロック

  • ' : ''のブロック

  • \ : ``のブロック

テキストオブジェクトの使用例

()の中身を修正する(Ex. 関数の引数指定を変更)

ci(

""の中身を削除する(Ex. 文字列の修正)

di"

{}の中身を削除する(Ex. 関数の中身を削除)

di{

以上が一通りのVimの説明です。 う〜ん、覚えることが多い。。。やはり少しずつ使いながら慣らしていく必要がありますね。 とにかく使い続けてみます!

以上でも以下でもない、以上!!!