こんにちは！株式会社レスキューナウのシステム部でフロントエンド、バックエンド、インフラ構築などを担当している吉井です。
今回はVimを使ったちょっとしたテクニックについてご紹介させて頂こうかと思います。
Vimについて
まずはVimについて軽く説明させて頂きます
Vimはターミナル(Windowsで言えばコマンドプロンプト、PowerShell)上で
動かすことが出来るテキストエディタです。
GUIを立ち上げられない環境でファイル編集したい時によく使われることが多いと思います。
このVim、ほぼキーボードオンリーで操作するエディタであり、
少々操作方法が特殊で敬遠されがちなのですが、実は色々便利なコマンドがたくさん有り
それらを使えばプログラムのコーディングを効率的に素速く行うことが出来るようになります。
今回のお題
例えばJavaScriptでこういう感じの連想配列を用意したいとします。
const obj = {
a1: 1,
a2: 2,
a3: 3,
a4: 4,
a5: 5,
a6: 6,
a7: 7,
a8: 8,
a9: 9,
}
一つ目のa1の行を入力した後コピペして数字だけ書き換えて・・・
というやり方でも書くことは出来ますが
正直ちょっとめんどくさいですね。
でもこんなめんどくさい作業でも簡単に出来てしまいます。
そう、Vimならね。
まずこんな感じに空の{}を用意します。
const obj = {
}
次にVimをノーマルモードからCtrl+Vを押して矩形選択のビジュアルモードにします。
すると
こんな感じに縦方向に選択が出来るようになります。
次にこの状態で9行分選択します。
Shift+Iで入力モードに入りa0: 0,と入力します。
const obj = {
a0:0,
}
Esc or Ctrl+[ でノーマルモードに戻ります。
すると9行分同じ値が入力された状態になります。
const obj = {
a0: 0,
a0: 0,
a0: 0,
a0: 0,
a0: 0,
a0: 0,
a0: 0,
a0: 0,
a0: 0,
}
次にa0の0の部分を矩形選択のビジュアルモードで全て選択します。
そしてgの後Ctrl+Aを押して下さい。
すると9つあったa0がa1からa9の連番になったと思います。
const obj = {
a1: 0,
a2: 0,
a3: 0,
a4: 0,
a5: 0,
a6: 0,
a7: 0,
a8: 0,
a9: 0,
}
同じように連想配列value側の0の部分を矩形選択のビジュアルモードで全て選択し、
gの後Ctrl+Aを押します
const obj = {
a1: 1,
a2: 2,
a3: 3,
a4: 4,
a5: 5,
a6: 6,
a7: 7,
a8: 8,
a9: 9,
}
これで目的の連想配列を書くことが出来ました！
一連の流れをGifアニメで行うとこのようになります。
めんどくさい作業があっという間に出来ていますね。
このようにVimのコマンドを上手く使うと、コーディングがよりスムーズに行うことが出来ます。
昨今ではJetBrains製IDEやVSCodeを使う人が多いと思いますが、
それらにプラグインを入れることでVimのように操作することが出来るようになります。
JetBrains製IDE Vimプラグイン
VScode Vimプラグイン
Vimに慣れるまでは少し大変なことも有ると思いますが、
使いこなせるようになってくるとどんどん作業スピードが上がり
何よりコーディングがとても楽しくなります！
もしご興味がお有りでしたら是非ともVimを触ってみて下さいね！
Discussion