#知識0から始めるVim講座
さて、みなさんは「Vim」というエディターをご存知でしょうか？
もしあなたがサーバー関係やプログラミング関係に携わっているのでしたら名前ぐらいは聞いたことがあるでしょう。
ですが実際にはVimがとういうものかわからない。または難しすぎてVimを使うのを挫折してしまった。
今回はそんな人の為の記事を書いていこうと思います。
まず、vimにはどんな印象をお持ちでしょうか？
少しでもVimというエディターを触ったことのある方ならこう思うでしょう。操作がわからないと。
確かにvimはマウスを一切使わない。言ってしまえばマウスを使う設計をされていないエディターです。
もともとVimはCUI(コマンド・ユーザー・インターフェース)で使われることを前提に設計されたviというエディター(vimの前世)
を超える（改良の）ために作られました。
そのため今までのAtom SublimeText VisualStudioCode などのオーソドックスな高性能エディターとは全くの別物と思っていいでしょう。
ですが、別物のエディターと言っても高性能なことには変わりありませんし。
僕自身Vimは慣れさえしてしまえば’世界一高性能なエディター’だと思っています。
しかもIT系をやっていくと大体Unix/Linux系のOSを触れる機会があると思います。それで、Vimでコンフィグを書き換えなければ行けないなんてことも多々あります。
なので覚えておいて損はないと思います。
それでもVimと言うのは初心者(玄人でも)やはり難しい物は難しいのです。
ですが、僕はこう思います。コマンドを覚える順番さえしっかりしていれば簡単に覚えられるのではないだろうかと。
僕には最初Vimを布教してきた先輩Vimmerがいました。その人は僕に最初に何を覚えてどのようにステップアップしていけば良いのかを教えてくれました。自分がvimmerになった今でも、あのステップアップの仕方は効率が良かったと思います。なのでbashさえわからない人もわかりやすくVimmerに近づくステップアップのやり方を記事にしていこうと思います。
そして、これを1から10まで1日でマスターしたいんだという方。朝７時に起きて朝シャンして、
コンビニでジュースとビーフジャーキー買ってvimに挑みましょう
セッションごとにわかりやすく記事をまとめておくので途中途中わからないセッションだけ見ていくのもおすすめです〜。
- Vimを触る前にまず最低限のLinuxコマンドを覚えよう
- HelloVim!
- れっつあこーでぃんぐ！(5ステップに分けてます)
- brew / tmuxについて
- Vim依存症になってしまった方へのvimperatorとplugin
##Vimを触る前にまず最低限のLinuxコマンドを覚えよう
vimと言うのは先程も記載しましたがCUIで動かすのを前提に作られています 。
そのため、普段目にするフォルダーやアイコンなどはGUIなので見ることすらありません。
では、どうやってファイルの区別をしたりファイルを選択・開いたりするのでしょうか？
このセッションは、そんなLinux(sh)の知識が無い方向けのセッションです。これを知らないとvimを使っていて、
「え？どうやってファイル開くの？」「マジわけわかめだわー」「ふじこーーー〜！」
と、なるのでしっかり覚えましょう。
| コマンド | 意味 | 効果 | |
|---|---|---|---|
| 1 | cd | ChangeDirectory | ディレクトリの移動 |
| 2 | ls | List | ディレクトリの一覧表示 |
| 3 | pwd | PrintWorkingDirectory | カウントディレクトリーの表示 |
| 4 | mkdir | MakeDirectory | フォルダーの作成 |
| 5 | ~ | ? | ホームディレクトリーに移動(追記:設定をしてないとできないです) |
このように、紹介したコマンドを使えばGUI無しでもフォルダーを開いたりフォルダーの中を編集したり
することができます。
そして予備知識としてVimはエディターだということをしっかりを自覚しましょう。
Vimはターミナルから起動してターミナル上で動きますが、Vimを開いているときはその開いているターミナルのタブは
1つのエディターとして考えてください。
そのためRubyやRails。Node.jsなどを起動する場合はVimの中からは起動できませんので
VimShellというPlugin使えばできるようです。
Control-tなり何なりで新しいタブを開いてそこでサーバーを起動してください。
そして新しいタブをターミナルでずらずらと開くのもダサいのでtmuxという物をおすすめします。
tmuxのインストールなどは最後に紹介します。
##HelloVim!
ようこそVimの世界へ！
では、はじめに書きましたが。Vimと言うのはしっかりとステップを踏んで進んでいけばさほど難しくは感じないですし、
Vimの魅力にとらわれていきます。基礎もできていないのにいきなり難しいコマンドを覚えようよしても、前提がなければできるものもできません。
数学や理科と一緒です。割り算もできないのに因数分解なんて無理な話です。
なのでこのセッションではまずVimの基礎操作となるところからやっていきましょう！！
| コマンド | 効果 |
|---|---|
| h | カーソルを左にずらす |
| j | カーソルを下に下げる |
| k | カーソルを上に上げる |
| l | カーソルを右にずらす |
まずは基本的にな操作についてです。これをまずは何が何でも覚えなければいけません。
出ないとカーソル移動ができないからです。一応十字キーでも操作は可能ですが。それではVimの意味がありません。
これはしっかりと覚えましょう！
次に、Vimの入力と保存です。
| コマンド | 効果 |
|---|---|
| a | カーソルの場所から1文字進めてInsertModeに入る |
| i | カーソルの場所からInsertModeに入る |
| x | カーソル直下の文字を消します |
| :w | ファイルの保存(Control-s) |
| :q | 実行中のタブを閉じる |
| :wq | 上を組み合わせて保存して閉じることもできる |
| :w! | のように最後に[!]をつけると強制的に処理します |
ここでいきなり、InsertModeという謎の名詞が出てきましたね。これはVimのモードと言う機能です。
Vimでは一切マウスを使わないため。コマンド入力モード・文字入力モード・選択モードと
3つのモードに分かれています。基本Vimはコマンド入力モードに滞在することが多いです。
| 名前 | 意味 | 主な機能 | 起動の仕方 |
|---|---|---|---|
| NormalMode | コマンド入力モード | カーソルの移動。他のモードへの移行。テキストのコピー、カット、ペースト。 | Esc |
| InsertMode | 文字入力モード | テキストの入力、編集。 | a/i/A/I/ciw/ |
| VisualMode | 文字選択モード | テキストの選択。 | v |
さて、Vimのモード事情を覚えたところで、ステップ１はここでおしまいです。
実際にVimを少し触ってみてどうだたでしょうか？ 難しかったですか？ ですが、以上のコマンドさえ覚えていれば
最低限のファイル操作はできると思います。正直これだけ覚えていれば普通のエディターとして使うことができます。
ステップ２はさらに覚えることが複雑になっていきますが、ステップ１をできた方なら多分楽勝です。
そしてステップ２が終わった頃には「あ、Vimつかいやすい」と思うようになっているはずです。
##れっつこーでぃんぐ！
さて、少しずつvimがどのようなものかわかってきたところで次はvimの魅力の１つである多彩なコマンドを紹介します。
vimには多分150ぐらいのコマンドがあります。そのコマンドを一気に学ぼうとすると、頭が変になりますし意味わかんなくなります。
なので、今回は5段階に分けて様々なコマンドを紹介していきたいと思います。
###ステップ1
| コマンド | 効果 |
|---|---|
| 基本コマンド | |
| dd | カーソルがある1列削除 |
| yy | 1列コピー |
| p | ペースト |
| u | 操作を1つ戻す(Control+z) |
| J | カーソルがある行に1つ下の行を連結する |
| カーソル移動 | |
| gg | ページの一番上に行く |
| G | ページの一番下に行く |
| H | 表示されている画面の一番上に行く |
| M | 表示されている画面の真ん中に行く |
| L | 表示されている画面の一番下に行く |
| ページ内検索 | |
| /hoge | [/]のあとの文字列を検索する(Control-f的なあれ) |
| n | [/]で検索した文字列の次の検索候補に飛ぶ |
| N | [/]で検索した文字列の前の検索候補に飛ぶ |
以上が今より更にステップアップするためのコマンドたちです。
これだけ使えれば普通の高性能エディターぐらいは使えると思います。
これを見て[u]で操作を一つ戻れるのに、すすめることはできないの？ と思う方もいると思います。
ありますとも、[Control+r]で、[u]の反対のことができます。
正直僕自身最初の1ヶ月ぐらい上の表のコマンドぐらいしか覚えてませんでした。（たったこれで十分使えたから）
###ステップ2
ステップ２は文字入力の応用です。[a]や[i]などでもInsertModeに入ることはできますが
一番最後から文を書き足したいのに一番最後までカーソル持って行ってInsertModeに入るのは、毎回めんどくさくないですか？
ですが、今回はそんなあなたにおすすめなコマンドがあるんです！
| コマンド | 効果 |
|---|---|
| 文字入力の応用 | |
| A | カーソルのある行の最後にInsertModeで飛ぶ |
| I | カーソルのある行の最初にInsertModeで飛ぶ |
| . | 直前にやったことを繰り返す |
| カーソル移動 | |
| $ | カーソルのある行の最後にNormalModeで飛ぶ |
| ^ | カーソルのある行の最初にNormalModeで飛ぶ |
| VisualMode | |
| v | インサートモードに入る |
| v+[移動キー] | 範囲選択ができる(1) |
| v+(1)+y | 選択した範囲をコピー |
| v+(1)+d | 選択した範囲を削除 |
ステップ２はこれだけです。
これを覚えればVisualModeで範囲選択するときとかも楽になりますし、文字を入力したいところまで、
いちいち運ぶ必要が少なくなります。
###ステップ3
ステップ２がマスターできたら次はカーソルの移動を捗らせるコマンドです。
いちいち[l]や[h]で真ん中の方にカーソルを動かすというと、遅いしだるいしコーヒー冷めちゃいます。
ですので、手っ取り早くカーソルを動かす方法を紹介します。
| コマンド | 効果 |
|---|---|
| w | 1単語飛ばしてカーソルを右に動かす(文字外) |
| e | 1単語飛ばしてカーソルを右に動かす(文字内) |
| b | 1単語飛ばしてカーソルを左に動かす(文字外) |
| 正直こっちは覚えなくてもいいと思うけど | |
| ge | 1単語飛ばしてカーソルを左に動かす(文字内) |
これをマスターすると[h&l] よりも早くカーソルを動かすことができますが、
実際これでカーソル動かすの結構忘れちゃったりするんですよね、
###ステップ4
ステップ4は削除系のコマンドです。これを覚えれば確実に作業効率が格段に上がります。
| コマンド | 効果 |
|---|---|
| c | VisualModeで選択した範囲を消してInsertModeで終わる |
| ci | 括弧の中身だけを消す(例:[ci"] "この中だけが消えます") |
| ciw | カーソルの下にある１単語を消してInsertModeに入る(英語・カタカナ・ひらがな・漢字で分けられる) |
| cit | htmlのタグに囲まれている中を消します |
| dw | カーソルから右にある単語を消す（NormalModeで終わる） |
| daw | カーソルの下にある単語を消す |
| D | カーソルから右にある文を全て消す |
| S | カーソルのある１行を全て消してInsertModeにはいる |
*すみませんitermでキーボードの可視化できなかったんでterminal.appでちょっと見づらいですが
許してください。
###ステップ5
ステップ５はその他役立つコマンドを覚えようって感じです
| コマンド | 効果 |
|---|---|
| :!{shellコマンド} | vim内でshellのコマンドが使えます |
| m | [m]+[a~Z]で好きな行をマークしておいて[`]+[a~Z]でマークしたところに飛べます |
| ` | " |
| ~ | カーソル直下の文字の大文字小文字を切り替える |
| % | 括弧がカーソル直下にある場合[括弧終わり -> 括弧初め]に飛ぶ(逆もできる) |
| U | 選択した範囲をの大文字小文字を切り替える |
| * or # | カーソルのおいてある単語を検索する(/hogeのhogeにカーソル直下の単語を置き換える感じ) |
| :n | [n]に数字を入れるとその行に飛びます |
| ggVG | すべて選択(Control-a) |
| Control+v | インサートモード（箱型) |
| 保存系 | |
| ZZ | 変更があれば保存して終了 |
| :x | 変更があれば保存して終了 |
| :xa | 変更があるタブを保存してすべてのタブを閉じる |
ステップ５までついに終わりましたね! 実際Vimを触ってみてどうだたでしょうか?
やはり難しいと、感じましたか？ ですがもうコマンドを覚えてしまえば、あとは慣れです。
ステップ５まで諦めずにできたなら、きっと気づいた時には理解し。vimを扱えると思います。
おつかれまでした(*^^)
##brew / tmux について
冒頭でも記事にしていましたが、vimを開きながら他の作業をするには、違うタブでいちいちディレクトリを
指定して開いたり閉じたりしていろいろめんどくさいです。そして作業中のタブを誤って閉じてしまったり。
そんないろいろめんどくさいことが、スマートに行えるのが[tmux]というものです。
これを使えばいちいち、タブを開き直した時にディレクトリを指定し直す必要もないですし
誤ってタブを閉じても復元することができます。
しかもターミナル上から時間や、メモリーの使用率充電の残り残量なども表示することができ、
ターミナルを１つの端末として扱うことができます。
もしすでにHomeBrewがインストールされているMacなら、以下を実行するだけでインストールできます。
まだHomeBrewをインストールしてない方はこちらから(Xcode必須だった気がします)
HomeBrew
brew install tmux
インストールが完了したら、ターミナルで
tmux
とやるとtmuxが起動できます。
あとは、僕よりも文章力のある方に任せます。
###vimperator
さて、最後にvimを実際に使ってみてvimに慣れ、この記事を見てvimが好きになってくれたら嬉しいなと思います。
そしてvimが好きになって普段PCを触っている時も出来る限りvimを使いたいと思い、vimに恋をしてしまった方。
いいものがあります！！
ブラウザをvimと同じキー操作で使うことのできるaddonがあるんです！
その名も！Vimperatorというfirefoxのaddonです。
このaddonを追加すれば、一切マウスを使わないでブラウザを操作することができるようになります。
vimperator
一応基本操作も載せておきますね。
| キー | 機能 |
|---|---|
| 基本操作 | |
| hjkl | 右・上・下・左 |
| H,L | ひとつ前のページに戻る,ひとつ先のページに進む |
| a | ブックマーク |
| s | |
| r | ページの更新 |
| y | 現在開いているページのUrlをコピー |
| p | クリップボードの内容を検索する |
| b | 現在開いてるタブ一覧表示 |
| gg | 一番上ページのに行く |
| G | 一番下のページに行く |
| url選択(ヒントモード) | |
| f | ヒントモードを起動* |
| F | ヒントモードを起動*(新規タブで開く) |
| 検索 | |
| t | 検索内容を新規タブで開く |
| o | 検索内容をページ内に表示 |
| w | 検索内容を新規ウィンドウで開く |
| タブ移動 | |
| gt | 右のタブに移動 |
| gT | 左のタブに移動 |
| 検索 | |
| /hoge | [/]のあとの文字列を検索する(Control-f的なあれ) |
| n | [/]で検索した文字列の次の検索候補に飛ぶ |
| N | [/]で検索した文字列の前の検索候補に飛ぶ |
| コピー | |
| c | インサートモード開始 |
*ヒントモードとは、f or Fを押した時にurlやボタンなどのアクションのある物に番号を振り
その番号を指定するとそのurlに飛べるという機能です。
そして、ターミナルでvimを使うのが嫌とか、ターミナルで起動するのいちいちめんどいって方、
AtomというEditorのプラグインで基本操作をvimのキーバインドで使えるようになるものがあります。
(今回紹介したコマンドはだいたい使えます)
これなら、Control-sとか基本コマンドや左にディレクトリ一覧を表示したりできます。
(Neobundleとかでも入りますけど、その説明はまた今度)
https://atom.io/packages/vim-mode
まあ、ざっとこんなものですかね。
最後まで読んでいただきありがとうございます！！
おつかれまでした。