Vimの使い方
そろそろ違うエディタを試してみたい、Vimを初めて扱う人、初心者の方向けに「最低限覚えておきたいコマンド」を中心にイラスト付きで解説。サーバ上で直接ファイルを編集したい人、今度こそVimを覚えたい人のために、Vimの使い方をメモしておきます。高速でコーディング可能なのでフロントエンドやデザイナー・ディレクターの方も覚えておいて損はないです！
エンジニア速報は Twitter の@commteで配信しています。
Vimのメリットとデメリット
Vim(Vi IMproved)はUNIXのOS上でも使える軽量なテキストエディタです。大抵どのサーバにも入っていて、サーバ上で直接ファイルを編集したり、ローカルではコーディングに使う人が多いかと思います。ローカルでもサーバ上でも動かせ、軽量で設定の自由度が高いエディタなのです。
とはいっても、筆者はVimがメインエディタではなく、たまに使うだけなので超初心者レベルですが、自分のように慣れてない人も結構いるんじゃないかと思い、再勉強して記事に書き整理しました。ガッツリではなく、なんとなく触れるようになりたい人向け。
デメリットとしては、VimはVim scriptで機能開発されており、Vimエディタのみ動くスクリプトなので、覚えたスクリプトを他で流用はできません。またコマンドが独特であり習得に少しだけ時間がかかります。
しかしながら、少ないキーストロークで編集可能でありマウス無しで操作可能なので、スピーディーにコーディングができます。またどんなOSでも動くので、デザイナーさんもディレクターさんも、ザックリとでもよいので覚えておくと役に立つかもしれません。
ダウンロード
何はともあれ、早速ダウンロードして試してみましょう。
インストール方法はダウンロードするだけです。
- [win] Vim — KaoriYa
- [mac] GitHub - macvim-dev/macvim: Vim - the text editor - for Mac OS X
- [Chromeアプリ] Vim - Chrome
VimとGVimの違い
VimとGVimは違います。
Vim
- CUI
- ターミナルで呼び出せる
GVim
- GUI
- グラフィカルで綺麗
- レンダリングが高速
- クリップボードが使える
- マウスが使える
- フォント設定
詳しくはこちらで確認してください。
vim-jp » Hack #152: VimとGVimの相違点について知る
GVimのほうが分かりやすいかと思いますので、ダウンロードしたら、GVimの方を起動してください。
Vimコマンドの使い方
予備知識
ノーマルモード（通常時）とインサートモード（入力時）の２つのモードがあります。とりあえず最初に覚えることは、以下の2つ。失敗した時に押すとよいコマンドです。
編集中
| Esc | ノーマルモードに移る |
|---|---|
| :q! | 保存せずに強制終了 |
ノーマルモードでは
| u | 元に戻す（リドゥはCtrl+r） |
|---|---|
| Ctrl+r | リドゥ |
上下に動かす
適当なファイルを開いて、早速動かしてみましょう。ファイルを作るのが面倒な人は
:Tutorial
と打つとチュートリアルが開くので、移動させてみましょう。
カーソルキーでも移動はできるんですけど、jkhlを使うほうが、ホームポジションを崩さなくてよくなるので、十字キーより早く移動させることができます。コーディングだけでなく、長時間のライティングでも疲れにくいです。
| j | 下に移動（人差し指） |
|---|---|
| k | 上に移動（中指） |
jは下に見えるとよく言われますが、ホームポジション時に「人差し指は下がる」と直感的に覚えれば忘れにくいかと思います。
覚え方：右手の人差し指が下、中指が上
カウンタ：5kと打つと、5行上に移動します。3jで3行下に移動。
左右に動く
覚え方：人差し指の左が左、薬指が右
と覚えたほうが直感的に覚えやすいですね。
| h | 左に移動 |
|---|---|
| l | 右に移動 |
少し覚えたら、以下のサイトでvimの操作をゲーム感覚で練習してみましょう。
編集（文字を挿入する）
i / a / o / A / Oなどのキーを押すと「入力モード」になります。
「@」という文字にカーソルがある時、iで@の前、aで@の後に挿入できます。
- i カーソルの前に挿入
- a カーソルの後に挿入
- O 現在行の上に行
- o 現在行の下に行
insertとは挿入するという意味、appendは後、open lineは行を開くという意味。
行末に文字を追加するには「A」と押します。
移動
移動系コマンドは以下があります。
- w 単語の先頭に移動 （word）
- b 直前の単語に移動 （back word）
- H 上、M 中心、L 下 に移動1（Home、Middle、Low）
- gg 最初の行に移動 （goto）
- G 最終行に移動（Goto）
- 100G 100行目に移動
- $ 行末移動
- ^ 行頭移動
- 0 行頭移動
- % かっこ（）などの移動
ページ送り、ページ戻り
Ctrl+f Ctrl+b
その他のコマンドの由来はこちらのサイトが詳しいのでご確認ください。
Vim Mnemonic | Vim のコマンドの覚え方大全 - haya14busa
削除
ノーマルモード（Escを押した後）で、カーソル下の文字を削除するには「x」を使います。ペケ（x）と覚えます。
deleteとは削除（切り取り）、yankはコピー、xは「閉じる」。
- x 削除、4x ４文字削除
dは削除コマンドで、その後に付くw / e /$などはオペレーターといいます。
- dw 単語の削除（切り取り）
- dd １行削除 / 3dd 3行削除
d$と打てば、行末まで一気に消せます。
- cw 単語を変更
- c 削除し挿入
コピー（複数）
これは凄いです。現在の行をコピー（ヤンク）するにはyy、貼り付けにはpを使いますが「レジスタ」という仕組みを使うと、スニペット登録のように複数のコピーができます。
"ayy "byy "ap "bp
yyの前に「"」と任意の文字を付与することによって、多くの文字を登録できます。さらに、インサートモード中でもCtrl+r+a（"ayyでコピーした場合）と入力すればペースト可能です。
Vim でコピペするときの Tips - 反省はしても後悔はしない
ペースト
カーソル位置のあとに貼り付けは
p
を使い、Pでカーソルの前に貼り付けできます。
置換
R
置換したい単語の先頭にカーソルを合わせ「R」（大文字）を押すと、上書きするかのように置換していきます。
選択
- v ビジュアルモード / 選択開始
- V 行全体選択
- Vjj 行選択を下方に増やす
- ggVG 全選択
短形選択
Ctrl+v で短形選択ができます。その後、iやaで挿入します。
コメントアウト
Ctrl+vで短形選択後、
I//Esc
で選択した行頭全てに「//」が入ります。短形選択して「d」で消せばコメントを解除できます。
矩形ビジュアルモードを利用した編集を使いこなす — 名無しのvim使い
連結
連結するときは
J
で連結。
空白削除連結
vjで改行削除したい行を選択し
gJ
で空白削除して連結。グッジョブ。
連結解除
「,」を「,改行」に置換して連結を解除します。
選択して置換するときは、vjで選択後
:s/,/,\r/g
ファイル全体を一気に置換するときは
:%s/,/,\r/g
「%」はファイル上全て、最後に付いてる「g」は複数指定です。
1行に連結
ggVGJ
で1行に連結。
検索
スラッシュと検索キーワードを入力した後エンター。「n」で順にフォーカス。
/検索する言葉 n
ページ全体のインデントを一気に整形
ggは先頭、=はインデント整形、Gは最終行。をまとめて
gg=G
cl.pocari.org - Vim でインデントを整える
ファイル一覧を表示
:e ディレクトリのパス でファイル一覧を表示します。
:e \Users\Owner\Downloads
バッファ
バッファを複数開くこともできます。その前にバッファって何でしょうか。
バッファとは、Vim がファイルを読み込んだ後にファイルの内容をコピーするメモリ領域のことです。つまり、我々が Vim でファイルを編集するときは、ファイルそのものではなくファイルの内容を読み込んだバッファを編集しているのです。
Vim のすゝめ 第 2 回 – バッファとウインドウ — SOUM/misc
一時的に蓄えておくファイルの内容みたいなもので、バッファの表示領域がウィンドウです。
バッファの一覧を見るには
:ls
を使います。そしてそのまま:b2のように、bと編集したい番号を打てば
バッファの切り替えが行えます。「%」はカレントバッファ（現在開いている）で、「#」は直前に編集していたバッファを指します。なので
:e #
で直前のバッファを開き
:bdelete バッファ番号
で不要なバッファを閉じることができます。
タブを開く
タブを開くときは
:tabnew
タブを閉じるときは
:tabclose
ウィンドウ分割
:vs ファイル名
でウィンドウを縦に分割。ファイルエクスプローラは
:e.
で表示されます。ソートは「s」を使います。
Ctrl+w で横のウィンドウに移動し、編集したいファイル上でEnter押して編集し保存。ウィンドウの位置を移動させるには
Ctrl+w H Ctrl+w L
で左右移動、Ctrl+rでもOK。
新しいウィンドウは:newで開けます。
:e #
で前のページに戻り、wqか:close で閉じます。
過去のコマンド履歴は
q:
で表示されます。次回Vimを開くときに、ウィンドウの位置や大きさを保持したい場合はGVimのウィンドウサイズを保存・復元したい - presentが参考になります。
補完
InsertモードでCtrl+PかCtrl+Nを打つと関数や単語を補完してくれます。これがとんでもなく高機能。
コマンドライン（:）で補完したい場合、例えばeであれば
:e この後にCtrl+Dで一覧 Tab で選択
となります。
全体の文字数を表示する
全体を選択した後に、文字数と単語数を表示するコマンドを入力。
ggVGg Ctrl+g
下の方に、単語や文字数が表示されます。
新規保存（名前をつけて保存）
:cd でファイルを作成したい場所に移動して
:cd \Users\Owner\Downloads
ファイルの内容を書き込んだら:savとファイル名を指定。
:sav hoge.txt
ファイルが作成されます。上書きは:w。
保存時に「un」ファイルが作られるのを無効化したいときは
:set noundofile
をvimrc等に追記してください。
インクリメント
数値を増減できます。
- Ctrl+a インクリメント（数値を増やす）
- Ctrl+x デクリメント（数値を減らす）
vim-jp » Visual モード時の CTRL-A/CTRL-X について
初期設定と便利なプラグイン
NeoBundle
最初にプラグインのインストールやアップデートを簡単に行えるプラグイン管理のNeoBundleをインストールします。
winの場合は「Git Bash Here」で開いてください。
-pオプションは２階層を一度に作る命令です。
$ mkdir -p .vim/bundle $ git clone https://github.com/Shougo/neobundle.vim .vim/bundle/neobundle.vim
NeoBundleを利用してvimプラグインを一元管理する - Qiita
プラグインのインストール方法
今後は、プラグイン等を_gvimrcに追記したら以下コマンドを打ち込んでインストールしてください。
:NeoBundleInstall
ダークテーマ molokai適用
[Vim as IDE 第1回] NeoBundleを利用してvimプラグインを一元管理する - Qiitaを参考に_gvimrcに追記。解説はリンク先を参照してください。
if has('vim_starting')
set runtimepath+=~/.vim/bundle/neobundle.vim/
endif
call neobundle#begin(expand('~/.vim/bundle/'))
NeoBundle 'Shougo/unite.vim'
NeoBundle 'Shougo/vimfiler'
NeoBundle 'tomasr/molokai'
call neobundle#end()
filetype plugin indent on
colorscheme molokai
これでテーマがダークテーマになります。
フォントの設定
プログラミング用フォント Ricty Diminishedをインストールします。
_gvimrcに以下を追加します。
set guifont=Ricty_Diminished_Discord:h14:cSHIFTJIS
と記述して保存。
フォントサイズを14にすると、綺麗に表示されます。反映されました。
emmet
コーダーにとってemmetは必須なのでインストールします。
Emmet-vimをインストールします。
Emmet.vim - ダウンロードか、以下の方法でダウンロード。
cd ~/.vim/bundle git clone https://github.com/mattn/emmet-vim.git
.vimrcに以下を追加
NeoBundle 'mattn/emmet-vim'
インストールします。
:NeoBundleInstall
更新するときはこちら（参照：NeoBundle - neovim/vim入門）
:NeoBundleUpdate
ローカルでファイルを作りvimで開きます。
touch index.html
編集モードで短縮記法を書いて
!
[Ctrl+y,]で展開します。Ctrlを押しながらyとカンマ（,）です。
loremなどのダミーテキストも出力できます。
ul>(li>lorem5)*4
タグで囲む
htmlタグで囲みたい時は、「v」で範囲を選択し、下のコマンドにTag:が表示されるのでタグを入力して[Ctrl+y,]（カンマを忘れずに）で展開します。
emmet-vimの使い方 | Memo on the Web
ファイル操作と階層表示
ディレクトリ階層とファイル操作を分かりやすくします。以下を_gvimrcに追加してインストール。
NeoBundle 'Shougo/vimfiler'
VimFilerと打ち込むとディレクトリ・ファイルの階層を表示。Tabを押すことで分割・移動、Enterでファイルを開きます。
:VimFiler
qで終了できます。
vimfilerとUniteでVimをファイラとして使用する方法 | karakaram-blog
git連携
git連携も可能です。
NeoBundle 'tpope/vim-fugitive'
VimとGitの効率的なコラボレーションの仕方 - MyEnigma
差分表示はこちら
NeoBundle 'airblade/vim-gitgutter'
Sass
sass、compassの自動コンパイルが可能となるプラグイン。
NeoBundle 'AtsushiM/search-parent.vim' NeoBundle 'AtsushiM/sass-compile.vim'
AtsushiM/sass-compile.vim: Add Sass compile & utility commands.
Markdown
ドキュメントやREADMEなどをマークダウンで書く人が多いかと思います。Vimにも適用することは可能で、markdown化させるプラグインは３つ必要とのこと。（参考：VimでMarkdownの環境を整える | KEYPOINT – キー・ポイント株式会社 開発日誌）あとは以下を.vimrcに記述し:PrevimOpenと叩くと、プレビューしてくれます。
NeoBundle 'plasticboy/vim-markdown' NeoBundle 'kannokanno/previm' NeoBundle 'tyru/open-browser.vim'
他
vimの使い方を学べるチュートリアル
クライアント版は:Tutorial、Unix上ではvimtutorでチュートリアルが見れます。
vimtutor
とこれだけ打ち込むと、実際に手を動かして学べるVimチュートリアルが出てきます。
:h
と打つと、メインヘルプファイルが表示され、内部リンクはCtrl+]で移動し、Ctrl+Tで元のページに戻ります。
ブラウザにVimキーバインド割り当て
ブラウザでVimキーバインドが使えるようになるChrome拡張があったので、インストールしてみたところ、びっくりする程便利に。マウス操作が格段に減って快適。
| k/u | 上にスクロール |
|---|---|
| j/d | 下にスクロール |
| H/L | ページ戻る進む |
| gg | 一番上 |
| G | 一番下 |
| b | ブックマーク呼び出し |
| t | 新規タブ |
| T | タブ選択画面 |
| x | タブを閉じる |
| / | 検索（Enter押してnで選択） |
| F | リンク移動 |
| gs | ソースコード表示 |
Vimスクリプト
起動するときに読み込まれるvimrc ファイルに書くVim用スクリプト言語の基本文法。echo、代入・関数・if文などが分かりやすく解説されてます。エディタからヘルプで見たい場合は:help eval.txtと打ち込んでみてください。
Vimスクリプト基礎文法最速マスター - 永遠に未完成
vimrc読書会
キーマッピングについてはこちらが詳しいです。
vimでキーマッピングする際に考えたほうがいいこと - derisの日記
以上、Vimの使い方と基本的な操作方法でした。
スポンサード リンク
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment