LiBz Tech Blog

LiBの開発者ブログ

チートシートで学ぶ、憧れのVimmerへの挑戦!!! ~ 入門編 ~

はじめに

f:id:yoshimi_nu:20190731220629p:plain

こんにちは!最近暑くなってきましたね、夏の始まりを感じます!
オフィスにこもってばかりしてないで、プールに足でも浸かりながらプログラミングをしたいなーなんて思う今日この頃です。

あくまでお仕事でね。

ということで、弊社ブログでは2週に渡ってVueについての記事が続いており
(まだご覧になってない方は是非こちらからドウゾ...)

GASとVueでエンジニアのMuscleを可視化した - LiBz Tech Blog

Vue CLI UIを活用して実際にアプリを作ってみた - LiBz Tech Blog

この流れに便乗して、自分もVueについての記事でも書こうかなんて考えておりました。

が、、、

「V」から始まる3文字

と、言えばやっぱり(?)Vimですよね!!

ということで今回はVimへの愛をこの場を借りてお伝え出来たらなーなんて思っています!
それではレッツゴー!!

憧れのVimmerへ、いざ!

エンジニアとしてキャリアをスタートをして、まだ一年も経過していない自分ですが、エンジニアになったら絶対にすると決めていたことがありました。

それこそがVimmerになることでした。

非エンジニアだった頃の自分は
プログラミング = ターミナルの黒い画面で何か呪文を記述している
ぐらいのイメージだったので、あの真っ黒な画面で延々と書かれている呪文を操るエンジニアという人達はさながら黒魔術士のように見えたものです。

そして、晴れてエンジニアになれた自分ですがプログラミングの習得と同時にVimの操作にも本当に苦戦しました。
ようやくVimに慣れてきたので、復習もかねてVimの好きなところを挙げていきたいなーと思います。

優しいチュートリアル、好き

まずVimに慣れてきた人達が口を揃えていう利点が

キーボード操作で全てが完結する

というところではないでしょうか。

それほど、使いこなせばキーボードだけでなんでも出来てしまうVimではありますが、学習コストがあることも間違いない事実。

しかし、初心者の皆さん安心してください。
Vimには素晴らしいチュートリアルが存在するのです。まずはチュートリアルを一周して基本を抑えることがおすすめですよ。
では、さっそくターミナル画面を出してみてこのコマンドを打ってみてください。

$vimtutor


するとこんな画面がでてくるはずです。

f:id:yoshimi_nu:20190801005100p:plain

7つのレッスンからなるこのチュートリアルをやることで、基本的なVimの操作方法は覚えることができると思います。

Vimのモードおさらい

Vimを使い始めると、まずはモードという考え方に戸惑うかと思います。

Vimには以下の代表的には4つのモードがあり、それぞれを切り替えしていくことで編集を進めていくことになります。

【代表的な4つのモード】

  • ノーマルモード (コピー、ペースト、文字削除、カーソルの移動)
  • インサートモード (文字の入力)
  • ビジュアルモード(範囲選択、フィルター)
  • コマンドモード(保存、終了)

f:id:yoshimi_nu:20190802065308p:plain

モード間の切り替えに関しては、他にも色々な入力キーがありそれぞれによって微妙に動きが異なってくることとなります。

ちなみにインサートモードからノーマルモードへの切り替えはめちゃくちゃ使うわけですが、その際に使用されるESCがMacユーザーの私にとって、かなりキーボードの遠い位置にありそのままだと使いづらいです。

その為、多くのVimmerの方達は自分好みにカスタマイズしています。

設定方法はVimの設定ファイルである.vimrc
inoremap <silent> jj <ESC>と書くだけ!!(jj は私の設定です)
これでストレスなくノーマルモードへの切り替えができます。

まぁ慣れてくれば、モードの切り替えは意識することはなくなってくるので安心してください。


Vim基本操作まとめるよ

ここからは実際に編集作業をする際に必要となる操作の基本的な部分をまとめていきます。

カーソル移動(ノーマルモード)

キー 挙動
h 左に移動
j 下に移動
k 上に移動
l 右に移動
0(ゼロ) 行の先頭に移動
$ 行の最後に移動
gg ドキュメントの先頭行に移動
G ドキュメントの最終行に移動
2G 2行目に移動(数字は任意)
ctrl + f 1画面下に移動
ctrl + b 1画面上に移動
w 単語の先頭に進む(区切りとなる文字を含めない)
W 単語の先頭に進む(区切りとなる文字を含める)
e 単語の末尾に進む(区切りとなる文字を含めない)
E 単語の末尾に進む(区切りとなる文字を含める)
b 単語の末尾に戻る(区切りとなる文字を含めない)
B 単語の末尾に戻る(区切りとなる文字を含める)

ここでいうeEの違いはというと abc.def.ghi.jkmという文字があった際にamまでを移動しようとした時に

eabc+.+def+.+ghi+.+jkmの時は7回eの操作が必要
Eabc.def.ghi.jkm を1つの単語とみなして、1回の操作でOK

インサートモード

ノーマルモードからインサートモードへの切り替えもキーによって挙動が変わってきます

キー 挙動
i カーソルの位置でインサートモード開始
I 行の先頭に移動してインサートモード開始
a カーソル位置の次の位置に移動してインサートモード開始
A 行の末尾に移動してインサートモード開始
o 現在の行の下に空白行を作成してインサートモードを開始
O 現在の行の上に空白行を作成してインサートモードを開始

これらの違いを覚えるのが大変ですが、文字入力したい箇所によって使うキーが変わるというのはすごく便利なので是非覚えてくださいね。

ビジュアルモード

キー 挙動
v 文字単位でのビジュアルモード開始
V 行単位でのビジュアルモード開始
Ctrl + v 短形ビジュアルモード開始

カット、ペースト

vimの世界ではコピーのことをヤンクと言います。なぜかは知りません。偉い人に聞いてください。

キー 挙動
yy 現在の行をヤンク
5yy 現在の行から5行をヤンク(数字は任意)
dd 現在の行をカットしてヤンク
5dd 現在の行から5行をカットしてヤンク
yw カーソル位置の単語をヤンク
y$ カーソル位置から行の終わりまでヤンク
y0 カーソル位置から行の始まりまでヤンク
P カーソル位置の上の行にペースト
p カーソル位置の下の行にペースト
x 現在の文字(1文字)をカット

コマンドモード

:を押してから使うコマンドモードです。
私はMacのUSキーボードを使っているのですが:を入力する時にShiftキーと併用するのがめんどくさくて、.vimrcにこのような設定を入れています。

nnoremap ; :
nnoremap : ;

こうしておくと、ノーマルモードの時だけコロンとセミコロンが入れ替わるのでShiftキーの呪縛から逃れることが出来ます。なんて幸せなんだ!

キー 挙動
:w 保存
:wq 保存して終了
:q 保存せずに終了(ファイルに変更がある場合は終了できないので注意)
:q! 保存せずに終了(ファイルに変更がある場合も終了可。変更点は破棄されるので注意)
/ (文字列) ファイルの中で(文字列)の検索
? (文字列) ファイルの中で(文字列)を逆方向に検索。使ったことはない。
:%s/hoge/hogehoge/g ファイル全体も文字列置換。今回はhogeをhogehogeに変更

ちなみに:smileと入力すると

f:id:yoshimi_nu:20190802085237p:plain

こんなユニークな要素まで用意してくれてます。素晴らしい。Vim...好きやわ。

モーションとテキストオブジェクト、オペレーター

ここまで、色々なコマンドを紹介してきましたがいきなり全部は覚えることなんてもちろん出来ません。(自分も全部使いこなせてる自信なんてない)

ノーマルモードだけでも大量のコマンドが出てきましたね。
Vimを使用する限りもっとも長い時間を過ごすであろうノーマルモードのコマンドにはある法則があってそれを理解していると、コマンドの暗記ではなくコマンドの組み合わせとしてより効率的に覚えていくことが出来るようになります。

それが最後にお伝えしたいモーションとテキストオブジェクト、オペレーターと呼ばれるものです。

モーション

ここでいうモーションとはカーソル移動に関するコマンドのことを指します。
一度、ご紹介したwWbBhjklなどもモーションの一種となっています。 これらのモーションコマンドは単体で使うと

j → 1文字下に移動

となりますが、コマンドの直前に数字を入力することでモーションコマンドを繰り返し実行出来るようになるます。

5jjを5回実行 → 5文字下に移動

これをうまく活用することで、無駄なコマンド入力を省き効率よく編集作業を行うことが出来るようになります。

詳しくは:help motionとVimで入力してヘルプページを参照してみてください。

(ヘルプページはデフォルトが英語となっておりますので、日本語の方が良いという方は下記ページを参照して日本語してみるのも良いかもしれません)

vimのHELPを日本語化してとっつき易くしてみた | ちゅんもす置き場

Vimのヘルプを日本語化 - Debug Your Life // 暮らしをデバッグする。

テキストオブジェクト

テキストオブジェクトとはテキストを一まとまりとして、表現する方法です。 つまり、「単語」「行」などコマンド操作の適用範囲を指定することが出来ます。

テキストオブジェクト 機能
iw 「inner word」単語(ホワイトスペースを含まない)
aw 「a word」単語(ホワイトスペースを含む)
is 「inner sentence」文(ホワイトスペースを含まない)
as 「a sentence」文(ホワイトスペースを含む)
i] 「inner block」ブロック(ホワイトスペースを含まない)
a] 「a block」ブロック(ホワイトスペースを含む)
ip 「inner paragraph」段落(ホワイトスペースを含まない)
ap 「a paragraph」段落(ホワイトスペースをむ)

オペレーター

オペレーターとはノーマルモードで使用できるテキストに対して操作の指示を行うコマンドになります。それ単体では使用することが出来ず、モーションやテキストオブジェクトと一緒に使うことで効果を発揮します。
まず詳細を知る為に:help operatorとVimで入力してみましょう。

f:id:yoshimi_nu:20190802103624p:plain


実際によく使用するのはydcあたりでしょうか。

オペレーター 機能
y ヤンク
d 削除
c テキストを削除。その場所からインサートモードを開始

組み合わせの使用方法

ここまで紹介した3つの組み合わせの概念を組み合わせることによって、コマンドを思うがままに操れるようになってきます。

例えばdiwというコマンドはdという削除を意味するオペレーターとiwという単語のテキストオブジェクトを組み合わせたコマンドになります。

つまり機能としては

ホワイトスペースを含めない単語を削除する
という機能になります。

例えば、他には

コマンド 機能
2yp 2つの段落をヤンク
dis 文(ホワイトスペースを含めない) 削除
5cw 5つの単語を削除した後にインサートモードに切り替え

といったように

オペレーター + モーション

オペレーター + テキストオブジェクト

3つの概念を組み合わせることによって、様々な機能を表現することが出来るようになります。
一見、難しそうに見えますが繰り返し使用することで何となく覚えていくことが出来るようになると思います!
自分はまだまだ感覚で色々出来るほどのVimmerではありませんが。。。

最後に

今回はVimの基本的な扱い方について説明させていただきました。
しかし、Vimの奥深い世界はまだまだこれから。
次回はカスタマイズ編なんて出来たら良いなーなんて考えています。

でもみなさん、忘れないでください。。。




f:id:yoshimi_nu:20190802115114p:plain



今は夏です!!!とりあえず海で遊びましょう!!!!!!

早く行かなきゃクラゲが出るようになっちゃうよ!!!!!!!!!!


Vimなんて1年中いつでも出来るんだから!!!!!!!!!!!!!!!!!