社内勉強会で発表した内容です。

1. 初心者Vimmerによる
Vim + Rails開発
開発Gr. 菊池大輔
@d_hero

2. この勉強会の内容
• Vimってどんなエディタ？
• Vimで便利なPlugin(主にRailsで)

3. このテーマのきっかけ その1
• 弊社のデザイナー I さん
「菊池さん、そのエディタ、
使いづらそっすね！」
そう思ってた時期が僕にもありました。。。
でもちょっと待ってくれ！

4. このテーマのきっかけ その2
• パートナー I 社のFさん
菊池
「コマンドで、ぱぱっと開けるんですよー」
Fさん
「・・・ファッ！！？」

5. Vimとは
• 「Vi」から派生したテキストエディタ
– Vi：VIsual editor、Visual Interface
• マウスを使わない！
• カーソルキーを使わない！
• コマンドによってテキスト編集を行う
– Vim
• 最初は「Vi IMitation(Viの模倣)」
• 後に「Vi IMproved(Viの改良)」

6. ViとVimの違い
設定ファイルを編集して自分好みに！
• 「~/.vimrc」に書きこむ
– 各種Pluginを導入可能！
– キーマップの指定が可能！
– 文字色を変更可能！
• 「カラースキーマ」の導入

7. Vimを使うには
• UNIX系OS
– 「vi 」か「vim」コマンドを打つだけ。
• Windows
– 仮想マシンでUNIX系OSを使う(僕はこれ)
• vagrantを使ってちゃちゃっと用意
– GVim
• GUI用のVim

8. Vimの画面

9. 文字色を変えると・・・

10. Vimの「モード」
コマンドモード
(起動時はここ)
挿入モード ビジュアルモード
ESCESC
i, a, o等 v, V等I等
行ごとのコピー
削除等
切り取り、コピー普通の入力

11. テキストを書き始めるには
• コマンドモードで、以下のコマンド
(挿入モードに移動)
– i： カーソル位置から入力開始
– a：カーソル位置の後から入力開始
– o：1行挿入して、その行から入力開始
– R：上書き開始
• 挿入モードからコマンドモードに戻る
– ESCキー

12. カット、コピー、ペースト
コマンドモードで
• x: 入力位置の1文字切り取り
• dd: 1行切り取り
• yy：1行コピー
• D：入力位置以降の切り取り
• p：貼り付け
[数字]x, [数字]dd, [数字]ｙｙで、
複数文字、行で編集可能

13. コマンドモードで出来ること
• u：アンドゥ
• Ctrl+R：リドゥ
• 文字列検索
– 「/(スラッシュ)文字列」で
• 保存、vimの終了
– 「：ｗ」で保存
– 「：ｑ」で終了（「：ｑ！」で保存せず強制終了）
– 「：ｗｑ」で保存して終了(ZZでも可)

14. カーソルの移動
• コマンドモード、ビジュアルモード
• カーソルキーも使える、けど・・・
上：k
下：j
右：l(エル)左：h
右手のホームポジションから
動かさなくてよい！
[数字]+[コマンド]で
その数だけ移動
「＾」、「$」：行頭、行末

15. ビジュアルモード
マウスのドラッグで選択するのと同じ機能
• ｖ：領域選択
• V：行選択
• Ctrl-V：矩形選択
選択した後
• ｄ：切り取り
• ｙ：コピー

16. 他に・・・
• :new ファイル名
– 新しいウィンドウを開く！(水平方向)
• :vnew ファイル名
– 新しいウィンドウを開く！(垂直方向)
• Ctrl-wの後にk,j,h,l(エル)のいずれか
– 上下左右のウィンドウへの移動
• 他のファイルを見ながらの編集が可能

17. ウィンドウを開いた画面
Ctrl+wの後に
j(下)入力

18. タブ機能
• :tabnew ファイル名
– 新しいタブでファイルを編集する
• [数字]gtで、指定した番号のタブに移動

19. タブの画面
1gtで移動
2gtで移動

20. メリットとデメリット
• メリット
– キーボードだけで編集が完結する
– 慣れると編集が速くなる・・・かも。
• デメリット
– 他のエディタで操作を間違う危険性
• 編集が終わってESCキーを押す
(Excelのセルの修正が飛ぶ)
• 保存しようとして「:w」と入力、など

21. Railsによる開発をするために
• VimにPluginを導入する！
– ディレクトリツリーを表示
– 特定のモデルを指定して表示
• Pluginを管理するPlugin
– vundler

22. vundlerのインストール
• gitでcloneするだけ
git clone
https://gitbub.com/gmarik/vundle.git
~/.vim/vundle.git

23. 設定ファイルの編集
• 「~/.vimrc」に記述
filetype off
set rtp+=~/.vim/vundle.git/
call vundle#rc()
Bundle 'gmarik/vundle'
Bundle 'tpope/vim-rails‘
filetype plugin indent on
vundler
初期化
インストール
するPlugin

24. Bundleコマンド
• Bundle 'tpope/vim-rails‘
– Github上のリポジトリから取得
• Bundle ‘dbext.vim’
– vim-scripts上のリポジトリから取得
• Bundle ‘git://repository_url’
– それ以外のgitリポジトリから取得

25. Pluginのインストール
• インストール
– Vimを開いて「：BundleInstall」コマンド実行
• 再インストール
– 「：BundleInstall!」コマンド実行

26. Rails開発で使えるPlugin
• rails.vim
– MVC間を簡単に行き来する
• unite-rails
– 一覧表示をさせる
• The-NERD-tree
– ソースツリーを表示

27. rails.vim
• .vimrcで「Bundle ‘tpope/vim-rails’」
• vimでrails開発をする、といったらコレ！
• controllerのアクションの場所で「：R」
– 関連するビューを開く
• 「:Rmodel [モデル名]」
• 「:Rview [ビューのパス]」
• 「：Rcontroller [コントローラ名]」

28. unite-rails
• ファイルを一覧表示＆絞り込みしてくれる
• 「：Unite rails/model」
• 「：Unite rails/controller」
• 「：Unite rails/view」
などなど

29. unite-railsの画面

30. The-NERD-tree
• 「：NERDTree」コマンド
– ソースツリーを表示

31. キーマップを変えておく
• 「：Rmodel」 → 「：Rm」
• 「：NERDTree」 → 「：Rt」
• 「：Unite rails/model」 → Ctrl-Hを2回入力
良く使うコマンドを簡単にしておくことで、
更に効率が高まる！

32. その他にも
• Vim上でGitと連携
– 「git status」や「git-blame」を見やすく
– Vimからコミットもできる！
• 入力補完
– 入力途中に候補を出す

33. まとめ
• Vimのコマンドを覚えるのはちょっと大変
– 作業効率面では良いのでは
– 自分好みにカスタムしよう！！
• Railsでの開発のための機能
– Pluginを入れる毎に新しい世界が。。。

34. ご静聴ありがとうございました。