この記事は、エモーションテックアドベントカレンダー9日目の記事になります。
エモーションテック Advent Calendar 2022
昨日の記事はフロントエンドエンジニアのkasaharuさんによる
「NgRx ComponentStore の lifecycle hook を使って Subscription を購読解除する」でした。
何書こうかな
どもども、エモーションテックでPdMをしている「いいの」です。
いやー、早いものでもう年末かー
あ、ヤッベ...
アドベントカレンダーもうすぐ僕の番じゃん！
えー何書こうかなー
とりあえず何か書き始めるためにvim起動しよー
ん...？
vimってなにって？
vim知らない？
あーBIMね!? 聴いてて心地いいから仕事中に聞くと捗るよなー
「BUDDY」とか「Veranda」好きだよー
おー、あなたとはうまい酒が呑めそうです。
わかるわー、でも違うんですよー。
アーティストのBIMではないんですよー。
僕もよく聴いてますし、今年は夏以降「焦年時代」をヘビロテしてます。
(知らない人は是非聴いてみてね)
vim!? 最高のテキストエディタだよな！
プラグイン入れすぎて、すっかり暗黒面に落ちてるよww
おー！あなたともうまい酒が呑めそうです。
気づいたらずっとvimrcいじってたりしますよねー。
つくねが美味いオススメの焼鳥屋があるんで飲み行きましょ。(マジで)
ということで、エンジニアはみんな大好き(?) vimを、非エンジニア向けにおすすめする記事でも書こうかと思います。
非エンジニアの人は分からないと思いますが、エンジニアはみんなvimというテキストエディタを用いてコードを書いてます。(捏造)
vimとは
テキストエディタってなに？
怖がる必要はありません。
エンジニアがコードを書くものでもあり、みなさんが打ち合わせ時に使ったりする「メモ帳」もテキストエディタです。
テキストを編集するアプリケーション、それがテキストエディタです。
エンジニアが使っているテキストエディタも、「コード書く以外に使っちゃだめ」ということはありません。
むしろ、コードを速く正確に書くための機能があるため、非エンジニアが文章を書くのに使っても効果を発揮します。
vimってなに？
vimは数多あるテキストエディタの一つです。
エンジニアのPC画面を背後から見たときに、よく黒い画面で何やら小難しそうにをカタカタ入力すると、文字が下から上にドバァっと流れていくのを見たことないですか？
最近ではドラマなんかでもそんなシーンがあったりしますね。
あの真っ黒画面の中でテキストを編集することがあるのですが、そこで使われているのがviというエディタで、その拡張版となるのがvimです。
なんでわざわざそれを使うの？
簡単です。
文字の編集が圧倒的に速いからです。
僕は自分で言うのもなんですが「他者よりタイピングが圧倒的に遅い」です。
元エンジニアなのにタイピングが遅すぎるお茶目な一面によく驚かれます。
そんな僕が人並みの仕事をしようと思うと、みんなの倍以上速く動かないといけません。
そこで選んだのがvimです。
で、結局何がすごいの？
そうですよね。
ざっとあげるとこんな感じかと思ってます。
- キーボードだけで完結 (マウス不要！)
- スクロールや移動もホームポジション(タイピング時に手を置く基本位置)から離れずに編集できる
- テキスト編集がコマンドで一瞬
- 便利コマンドを使えば面倒な操作もラクラク
- プラグインによる拡張性が高い
- 世界中の人が開発した便利プラグインで痒い所に手が届く
説明が上手ではないので、ここからは実際の挙動を確認いただけると良いかなと思ってます。
これがvim
基本のカーソル移動
| key | 実行内容 |
|---|---|
l |
右へカーソル移動 (lを5回入力) |
j |
下へカーソル移動 (jを5回入力) |
h |
左へカーソル移動 (hを5回入力) |
k |
上へカーソル移動 (kを5回入力) |
文章編集している時に、マウスやカーソルキーで移動しているんですか？
え...がーちゃん？
右手をホームポジションから離してしまったらそれだけでタイムロスですよ！
テキストエディットにアディショナルタイムはないんです！
遠い位置にあるカーソルキーなんか使わないで、hjklで移動すればいいじゃない！
いかにして編集箇所に無駄なく早くたどり着くか
| key | 実行内容 |
|---|---|
P |
クリップボードの内容をペースト |
G |
ファイル最終行へ移動 (36行目) |
gg |
ファイル先頭行へ移動 (1行目) |
30G |
30行目へ移動 (30行目) |
g/ |
ワード検索になり、「bud」と検索すると候補がリアルタイムで絞られるので、該当する行のアルファベット「d」を入力して移動 (17行目) |
e |
単語の末尾へ （「BUDDY」の末尾） |
$ |
行末へ (13行目の行末) |
0 |
行頭へ (13行目の行頭) |
H |
画面表示されている範囲の先頭行へ (4行目) |
L |
画面表示されている範囲の最終行へ (30行目) |
※ g/だけプラグインの[vim-easymotion]を利用した挙動とキーバインド
(/がデフォルトの検索キーです)
右手をホームポジションから離してマウス握りしめグイングイン、
スクロールのためにホイールをギュインギュイン、
クリックのために人差し指と中指でカチカチカチカチカチカチカチカチカチカチカチカチ...
その間、左手はお留守番...
左手と右手の労働環境違いすぎー
みなさんそんなに右手を酷使したら、そのうち手首取れちゃいますよ？
1つ2つキー叩いてサクッとファイル内を移動しましょ！
いや、それただのショートカットキーぢゃんっ！
まぁ、気持ちは分かる。
でも気づきました？
大文字のキー入力するのにShiftこそ使えど、Ctrとかcommandとか使ってないんだぜ？
あれやこれやとキーを同時に押さなくてもホームポジション周りのキーを押すだけなので、その分速く移動して早く編集できますよ
ちょっと待って、文字入力できないぢゃんっ！
そう思うよねー。
それこそがvimなんですよ。
編集する道具を切り替えるのではなく、モードを切り替える
vimにはモードという概念があります。
モードに関しては以下の通りです。
| mode | 概要 |
|---|---|
| ノーマルモード | 基本的なモード。カーソルを移動したり、任意の行に移動したり。 |
| インサートモード | 文字を入力するモード。ノーマルモードから切り替えることでテキスト編集が行える。 |
| ビジュアルモード | 文字列の範囲指定をするモード。マウスでピーってやるのと一緒。 |
| コマンドラインモード | 保存や検索などで使う。なんか色々できる。 |
で、まずお見せしたのが正にノーマルモードと言われる基本的なモードなのですよ。
ノーマルモードでは文章の編集はできません。
それじゃ困る！
ですよねー、文字打ちたいですよねー。
大丈夫です。愛があれば。
ではモードを切り替えて文章を編集していきましょうー。
aiをこめて
| key | 実行内容 |
|---|---|
i |
カーソル位置の前から文字入力 (2行目:買えずに) |
a |
カーソル位置の後から文字入力 (5行目:世界) |
I |
行頭から文字入力 (7行目:市役所) |
A |
行末から文字入力 (10行目:ドライブ) |
Esc |
ノーマルモードに戻る (各文字編集終わり) |
上記のように、ノーマルモードで移動し、カーソル位置からインサートモードで文字入力し終えた後に、Escで再びノーマルモードに移動することで次の編集点に移動できます。
めんどくさいように思えるかもしれませんが、これでキーボードの端にあるカーソルキーで移動したり、マウスで手首千切れそうになりながら移動せずに済みますね。
もっと伝えたいけど息切れ
もっと他のモードや「こんなこともできるんだぜ」も伝えたいのですが、ちょっと小忙しいので今回はここまでにしておきます。
この記事を読んで興味を持ち、ちょっとでも「vim使ってみたいな」と思って貰えると良いなと思ってます。
と言うことで、最後は
「こんなサクッとテキスト編集できるの魅力的じゃない？」
と思ってもらえそうなものを自己満足で紹介して終わろうと思います。
無駄に編集してみる
-
g/:Bonitaを検索して遷移 [vim-easymotion](プラグイン) -
veS]:Bonitaを[]で挟む [vim-surround](プラグイン) -
yy: 11行目をヤンク（コピー） -
gg: 先頭行へ遷移 -
,n: 現在日時を入力(独自に設定してあるキー設定) -
p: 現在位置の後に[Bonita]をペースト -
dd: 1行多くペーストしてしまったので、不要な行を削除 （3行目） -
u: 4行目も勢いで消しすぎてしまったのでアンドゥ(元に戻す) -
k: 1行上に移動 -
ci]: []を中身を削除してインサートモードになり、BUDDYと入力 (2行目) -
Esc: ノーマルモードに戻る -
G: 最終行に遷移 -
:: コマンドモードに切り替え -
%s/BIM/vim/g: ファイル内の文字列BIMをvimに一括置換 -
22G: 22行目に遷移 -
Ctr-v: 矩形選択のビジュアルモードに -
j: 押し続けて下に移動 -
I: 1行目の行頭だけインサートモードになり、「 」(空白スペース)を入力 -
Esc: ノーマルモードに戻ると、矩形選択で選んだ全ての行頭に空白スペースが入る -
gg: 先頭行へ遷移 -
V: 1行分を範囲選択するビジュアルモードに -
G: 最終行へ遷移して、ファイル内の文字列全てを選択状態に -
d: 滅びの呪文で全てを無に帰す
ほら、簡単でしょ？
同じことをマウスを使いながらやろうとしたら、キーボードとマウスを行ったり来たりになるので、vimの方が圧倒的に速いですよね？
こんなの覚えられるわけねーぢゃん
はい、僕もそう思ってました。
ですが、コードを書くのもメモを取るのもメールを書くのも全部vimにしてたら、いつの間にか出来る様になってました。
これはOTOGIBANASHIでも何でもなく、ある日急にできる様になりました。
そして、時々無意識にキー叩いているので、
「今のはどのキーで操作したの？」
と聞かれると
「あれ？どれだっけ？」
と、ちょっと答えられない時があります。
こうなってくるともう抜け出せなくなり、chromeの拡張機能にvimiumを入れてブラウザ操作までhjklで行う様になります...
おしまい
と言うことで、今回は非エンジニアの方に向けたvimの紹介でしたー。
vimは、触り始めこそとっつきにくいですが、チュートリアルも充実していますし、web上にはvimmerの皆さんが紹介してくれている情報が沢山あるので、興味を持ったらぜひ触ってみて欲しいです!
僕からは以上！
では、また来年のアドベントカレンダーで会いましょう笑
お仲間募集中
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。
プロダクトに興味のある方、vimでvimvimしたい方、ぜひ採用ページからご応募をお願いいたします。