テキストエディタ「Vim」をWindowsでも使う方法
こんにちは。東京本社のK.M.です。
今回はLinuxを使ったことがある人ならば必ず使ったことがあるであろう、テキストエディタ「Vim」をある目的のためにWindowsにも導入をしたため、その手順と私の目的についてお話します。
０．はじめに～Vimとは何だろう？～
Vimは現在では主にLinuxなどのUNIX系OSで広く利用されているテキストエディタです。
UNIX系OSに搭載されているということでも分かるように、操作の中でマウスの出番は一切なく、すべての操作がキーボードだけで完結できるという特徴があります。
キーボード内で完結させるためには、色々な機能をショートカットキーや、コマンド入力で呼び出す必要があり、それを使いこなすにはある程度コマンドを覚えておく必要があります。
そのため、Vimを完璧に使いこなすにはかなり高い知識・技術が必要となり、普通のテキストエディタと比べてかなり癖の強いテキストエディタです。
しかし、そのショートカットキー・コマンドをある程度覚えた先には、マウスを一切触らないぶん他のテキストエディタに追随を許さないような速度でテキスト編集が可能になります。
特に、繰り返し系の処理は圧倒的にVimを使ったほうが早く、私はまだ使い始めて5年目ほどの初心者ではありますが、すでに幾度となくこの恩恵にあずかっています。
このように一度使いこなすと、かなり大きなポテンシャルを披露するVimに心酔する人も多く、このような方々を「Vimmer」と呼ぶこともあるほど。
きちんと勉強すれば必ず大きなリターンを与えてくれるVimについて、今回は初心者Vimmerの私が、Windowsでも導入して使えるようにしてみようという記事です。
１．ダウンロード～インストール
Windows版のVimは、Vimの公式サイトにてダウンロードできます。
他の有志の方のサイトからでもダウンロードすることができますが、公式サイトからの場合だと、常に最新のVimをダウンロードすることができるため、不具合の修正版等を最速で入手できます。
また有志の方のものの場合、独自機能が備わっていることが多いですが、それだけ不具合の原因にもなりやすいです。
どうしても、特定の有志の方が作成した機能を使いたいような事情がない限り、公式からダウンロードするのが得策でしょう。
それでは、Vimの公式サイトにアクセスしてみましょう。
（１）画面左の「Download」を押して配布ページに遷移します。
（２）今回ダウンロードするのはWindows版のため、「PC: MS-DOS and MS-Windows」をクリックします。
（３）「gvim_9.1.0000_x86.exe」または「gvim_9.1.0000_x64.exe」をクリックすると、ダウンロードが始まるため、ダウンロードが完了したら、exeファイルを起動します。
（４）インストールウィザードが立ち上がったら、特に設定を変えずに既定の状態で手順を進めます。
（５）下の画面が表示されたら、インストール成功です。
２．コマンドプロンプトから起動するには
正常にインストールが完了したら、以下のようにスタートメニューからVimの起動が可能になります。
しかし、追加の設定を少しすることでコマンドプロンプトからでも起動が可能になります。
今回は、コマンドプロンプトからも起動できるように設定を追加で行います。
（１）スタートメニューを表示した状態で、「環境変数」と入力し、「システム環境変数の編集」を選択します。
（２）システム環境変数側の「Path」を選択した状態で、「編集」をクリックします。
（３）新規をクリックして、Vimがインストールされているフォルダを選択し、以下のようにVimがインストールされているフォルダが一番下に追加されるようにします。
これで設定は完了しました。確認のため、コマンドプロンプトを使って確認してみましょう。
コマンドプロンプトにて「vim」と入力したあと、Enterを押して、以下の画面が表示されれば成功です。
(番外編) PowerShellからも起動できます
２．ではコマンドプロンプトで起動するという名目で設定を行いましたが、実は先ほどの設定で、PowerShellからも起動することが可能になりました。
コマンドプロンプトと同じようにPowerShellにて「vim」と入力したあと、Enterを押せば以下の画面が表示されます。
コマンドプロンプトから起動するもよし、PowerShellから起動するもよし、スタートメニューから起動するもよし、自分の使いやすいやり方でVimを利用してみてください。
ちなみに私は自宅ではコマンドプロンプト、職場でPowerShellを用いてVimを利用しています。
３．Vimをカスタマイズする
ここまでVimをインストールするための手順を説明してきましたが、実はこれで終わりではありません。ここからはViｍを自分の好きなようにカスタマイズしていきます。
しかし、Vimのカスタマイズは非常に奥が深く、さらに人によって設定する内容は様々であるため、ここでは多くは語りません。ですがこれだけは言っておきますと、「Vimをカスタマイズしないで使う」ということはあり得ません。
まずはカスタマイズを保存するファイルを作ってみる
Vimで個人のカスタマイズを設定するときには、「.vimrc」というファイルにカスタマイズ内容を記しています。そしてこのファイルを「ホームフォルダ」に保存します。
ホームフォルダといわれるとピンとこないかもしれませんが、基本は「C:\Users\<ユーザ名>」のフォルダです。このフォルダに.vimrcファイルを保存します。
この他にもカスタマイズは大量にありますが、これが最低限のカスタマイズです
先ほども述べたように、Vimのカスタマイズできる内容は大量にあります。それこそここで説明したら、この記事の何百～何千倍の長さになりますし、第一私がすべてを把握していません。しかし裏を返せば、自分がこうしたいと思ったことは大体叶えてくれるものとなっているほどの量のため、自分が何かを解決したいときに改めて調べてみるとよいでしょう。
今回は実際に自分が利用しているカスタマイズの中から、ほとんどの人が使っている最低限のカスタマイズを抜粋して貼っておきます。そのままコピペでもいいので、先ほど作った「.vimrc」に保存してみましょう。
" setting
" バックスペースの挙動を通常と同じにする
set backspace=2
" VIMの内部エンコードをUTF-8とする
set encoding=UTF-8
" ファイルの読み込みのエンコード順を指定
set fileencodings=UTF-8,CP932
" バックアップファイルを作らない
set nobackup
" スワップファイルを作らない
set noswapfile
" undoファイルを作らない
set noundofile
" 編集中のファイルが変更されたら自動で読み直す
set autoread
" バッファが編集中でもその他のファイルを開けるように
set hidden
" 入力中のコマンドをステータスに表示する
set showcmd
" コマンドラインの補完
set wildmode=list:longest
" 折り返し時に表示行単位での移動できるようにする
nnoremap j gj
nnoremap k gk " 見た目系
" 行番号を表示
set number
" 通常文字列の文字色を黄色にする
hi Constant ctermfg=14
" カーソルラインの設定を初期化
hi clear CursorLine
" 現在の行を強調表示
set cursorline
" 行末の1文字先までカーソルを移動できるように
set virtualedit=onemore
" ビープ音を可視化
set visualbell
" 括弧入力時の対応する括弧を表示
set showmatch " ファイル名表示
set statusline=%F
" 変更チェック表示
set statusline+=%m
" 読み込み専用かどうか表示
set statusline+=%r
" ヘルプページなら[HELP]と表示
set statusline+=%h
" プレビューウインドウなら[Preview]と表示
set statusline+=%w
" これ以降は右寄せ表示
set statusline+=%=
" file encoding
set statusline+=[ENC=%{&fileencoding}]
" 現在行数/全行数
set statusline+=[ROW=%l/%L]
" 現在列数
set statusline+=[COL=%c]
" ステータスラインを常に表示(0:表示しない、1:2つ以上ウィンドウがある時だけ表示)
set laststatus=2 " Tab系
" 不可視文字を可視化(タブが「^ 」と表示される)
set list listchars=tab:\^\
" Tab文字を半角スペースにする
set expandtab
" 行頭以外のTab文字の表示幅（スペースいくつ分）
set tabstop=4
" 行頭でのTab文字の表示幅
set shiftwidth=4 " 検索系
" 検索文字列入力時に順次対象文字列にヒットさせる
set incsearch
" 検索時に最後まで行ったら最初に戻る
set wrapscan
" 検索語をハイライト表示
set hlsearch
" ESC連打でハイライト解除
nmap :nohlsearch
" シンタックスハイライトの有効化
syntax enableちなみに以上の設定を施したVimにてテキストファイルを開いてみると、以下のような表示になります。変にエラー等が出ることなく、以下のような画面となれば、カスタマイズが上手く反映されています。
この他にもWebで検索をすれば、その人その人の設定方法があります。その情報たちを取捨選択しながら、より良いVim環境を作ってください。
４．私の導入した目的～CSSの数値を微調整～
さて、長々と導入までの道のりを説明してきましたが、なぜ私がVimをWindowsに導入したのかをお話しいたします。
それはずばり、「CSSの数値設定の微調整」です。
CSSというと、Webページのレイアウトを行うために用いるファイルです。そこで切っても切れない縁でつながれているものが、数値設定の微調整です。
この幅を少し狭くしたい、このテーブルの高さを少し高くしたいなどといった対応を行うとき、しばしば1ピクセル、ときには0.1ピクセル単位で数値を調整します。その時に、通常のテキストエディタでは、元の数値を消して新しい数値を打ち直す必要があり、また必然的に「このピクセル数にこの値を足して…」というように計算が必要となります。この作業が私にとっては非常に手間でした。
一度入力した値を消して、頭の中で計算して入力して、保存して、画面を再表示。気に入らなければ、もう一度入力した値を消して、頭の中で計算して…の繰り返し。Google Chromeのデベロッパーツールでは、CSSの値を上下の矢印を用いて簡単に変更できるのに、普通のテキストエディタではそうはいかなかったのです。
「数値を簡単にインクリメント・デクリメントできるテキストエディタってないかなぁ」と考えていたとき、普段からプライベートでLinuxをよく使っていた私は思いつきました。
「そうだ。Vimにはインクリメント・デクリメント機能があるじゃん」と。
こうして私は、Windows版のVimを使ってCSSの編集をおこないはじめたのでした。ということでここからは、Vimに搭載されている「インクリメント・デクリメント機能」について説明をしていきたいと思います。
インクリメント・デクリメント機能
テキストに書かれている数値をインクリメント・デクリメントしてくれる機能ですが、私の知る限り、テキストエディタでこの機能があるものは、Vimしか知りません。上にも書きましたが、私はこの機能を使いたいがために、WindowsにVimを導入したといっても過言ではないのです。（他のエディタで簡単に出来るものがあれば私の知識不足です、ごめんなさい）
実際にVimで使ってみましょう。
今回使うコマンドは、インクリメント・デクリメントと合わせて3つです。
| コマンド | 内容 |
| 「:wq」 | 編集したファイルを保存して、Vimを終了する。 |
| Ctrl+A | 数値をインクリメントする。 |
| Ctrl+X | 数値をデクリメントする。 |
先ほどのカスタマイズでもそうでしたが、Vimのコマンドについても、説明するとこの記事の数百倍になってしまうほど大量にあります。最後にコマンド一覧について、掲載されているページのURLを貼っておりますので、これ以外の操作でVimを使ってみたい方は、参考にしてみてください。
（１）コマンドプロンプトより編集したいCSSファイルをVimで開きます。
今回は「test.css」というファイルを編集します。
（２）編集したい要素に矢印キーでカーソルを合わせます。
（３）「Ctrl+A」を1回押すと、値が1増えます。
（４）「Ctrl+A」をさらに3回押すと、値がさらに3増えます。
（５）「Ctrl+X」を1回押すと、値が1減ります。
（６）「100」と打った後に、「Ctrl+X」を押すと、値が100減ります。
（７）「:wq」と打った後に、Enterキーを押すと、変更が保存されてVimが終了します。
このように操作して私は、ときには慎重に、ときには大胆にCSSの値を変更していきます。
インクリメント・デクリメントの注意点
しかし、この機能も万能ではありません。
1点だけ注意しなければならないことがあります。
それは、「数値以外の文字で区切られた場合、それぞれの値で調整しなければならない」ということです。
つまり、小数点がある値の場合、整数部と小数部でそれぞれインクリメント・デクリメントが発生し、以下のような挙動になってしまいます。
インクリメントでの注意点
「268.9」の「9」をインクリメントした場合、「269.0」ではなく「268.10」となる。
デクリメントでの注意点
「269.0」の「0」をデクリメントした場合、「268.9」ではなく「269.-1」となる。
この挙動はカンマでもいえることなので、インクリメント・デクリメントを行うときにはこの1点だけを気を付けて扱いましょう。このことを覚えて調整をすれば、Vim以外の各エディタよりも格段に速いスピードで微調整ができるはずです。
５．さいごに
ここまでVimの導入方法と、私の使い方について説明をしましたが、いかがでしたでしょうか。
Vimは最初のハードルこそ高いものの、慣れてくれば段々と自分の武器へと進化していきます。今回はCSSでの利用方法だけを紹介しましたが、テキストエディタであるため、どのような場面でも優れた活躍を見せてくれるでしょう。
それこそ、テキストエディタでは超有名なサクラエディタを食ってしまうほどのポテンシャルがあります。
今回の記事を読んで、Vimについて興味を少しでも持っていただけたら幸いです。最後に全てを説明できなかったVimのコマンドについてまとめられたページをご紹介します。
６．おまけ～Vimで使うコマンド集～
VIm公式日本語ドキュメント
https://vim-jp.org/vimdoc-ja/vimindex.html
この他、Qiita等にて有志の方がよく使うコマンドについてチートシート等を作っています。