0
初心者Vimmerによる
Vim + Rails開発
開発Gr. 菊池大輔
@d_hero
この勉強会の内容

• Vimってどんなエディタ?
• Vimで便利なPlugin(主にRailsで)
このテーマのきっかけ その1
• 弊社のデザイナー I さん
「菊池さん、そのエディタ、
使いづらそっ
すね!」
そう思ってた時期が僕にもありまし
た。。。
でもちょっと待ってくれ!
このテーマのきっかけ その2
• パートナー I 社のFさん
菊池
「コマンドで、ぱぱっと開けるんです
よー」
Fさん
「・・・ファッ!!?」
Vimとは
• 「Vi」から派生したテキストエディタ
– Vi:VIsual editor、Visual Interface
• マウスを使わない!
• カーソルキーを使わない!
• コマンドによってテキスト編集を行う

– Vim
• 最初は...
ViとVimの違い
設定ファイルを編集して自分好みに!
• 「~/.vimrc」に書きこむ
– 各種Pluginを導入可能!
– キーマップの指定が可能!
– 文字色を変更可能!
• 「カラースキーマ」の導入
Vimを使うには
• UNIX系OS
– 「vi 」か「vim」コマンドを打つだけ。

• Windows
– 仮想マシンでUNIX系OSを使う(僕はこ
れ)
• vagrantを使ってちゃちゃっと用意

– GVim
• GUI用のVim
Vimの画面
文字色を変えると・・・
Vimの「モード」
コマンドモード
(起動時はここ)
ESC

i, a, o等

挿入モード
普通の入力

I等

行ごとのコピー
削除等

ESC

v, V等

ビジュアルモー
ド
切り取り、コピー
テキストを書き始めるには
• コマンドモードで、以下のコマンド
(挿入モードに移動)
– i: カーソル位置から入力開始
– a:カーソル位置の後から入力開始
– o:1行挿入して、その行から入力開始
– R:上書き開始

• 挿入モードからコ...
カット、コピー、ペースト
コマンドモードで
• x: 入力位置の1文字切り取り
• dd: 1行切り取り
• yy:1行コピー
• D:入力位置以降の切り取り
• p:貼り付け
[数字]x, [数字]dd, [数字]yyで、
複数文字、行で編集...
コマンドモードで出来るこ
と
• u:アンドゥ
• Ctrl+R:リドゥ
• 全文検索
– 「/(スラッシュ)文字列」で

• 保存、vimの終了
– 「:w」で保存
– 「:q」で終了(「:q!」で保存せず
強制終了)
– 「:wq」で保存し...
カーソルの移動
• コマンドモード、ビジュアルモード
• カーソルキーも使える、けど・・・
右手のホームポジションから
動かさなくてよい!

上:k

左:h
「^」、「$」:行頭、行末
下:j

[数字]+[コマンド]で
その数だけ移動

右...
ビジュアルモード
マウスのドラッグで選択するのと同じ
機能
• v:領域選択
• V:行選択
• Ctrl-V:矩形選択
選択した後
• d:切り取り
• y:コピー
他に・・・
• :new ファイル名
– 新しいウィンドウを開く!(水平方向)

• :vnew ファイル名
– 新しいウィンドウを開く!(垂直方向)

• Ctrl-wの後にk,j,h,l(エル)のいずれか
– 上下左右のウィンドウへの移動
...
ウィンドウを開いた画面

Ctrl+wの後に
j(下)入力
タブ機能

• :tabnew ファイル名
– 新しいタブでファイルを編集する

• [数字]gtで、指定した番号のタブに移
動
タブの画面
1gtで移動
2gtで移動
メリットとデメリット
• メリット
– キーボードだけで編集が完結する
– 慣れると編集が速くなる・・・かも。

• デメリット
– 他のエディタで操作を間違う危険性
• 編集が終わってESCキーを押す
(Excelのセルの修正が飛ぶ)
• 保...
Railsによる開発をするため
に
• VimにPluginを導入する!
– ディレクトリツリーを表示
– 特定のモデルを指定して表示

• Pluginを管理するPlugin
– vundler
vundlerのインストール
• gitでcloneするだけ
git clone 
https://gitbub.com/gmarik/vundle.git 
~/.vim/vundle.git
設定ファイルの編集
• 「~/.vimrc」に記述
filetype off
set rtp+=~/.vim/vundle.git/
call vundle#rc()
Bundle 'gmarik/vundle'
Bundle 'tpope/v...
Bundleコマンド
• Bundle 'tpope/vim-rails‘
– Github上のリポジトリから取得

• Bundle ‘dbext.vim’
– vim-scripts上のリポジトリから取得

• Bundle ‘git://...
Pluginのインストール
• インストール
– Vimを開いて「:BundleInstall」コマン
ド実行

• 再インストール
– 「:BundleInstall!」コマンド実行
Rails開発で使えるPlugin
• rails.vim
– MVC間を簡単に行き来する

• unite-rails
– 一覧表示をさせる

• The-NERD-tree
– ソースツリーを表示
rails.vim
• .vimrcで「Bundle ‘tpope/vim-rails’」
• vimでrails開発をする、といったらコ
レ!
• controllerのアクションの場所で「:
R」
– 関連するビューを開く

• 「:Rmo...
unite-rails
• ファイルを一覧表示&絞り込みしてく
れる
• 「:Unite rails/model」
• 「:Unite rails/controller」
• 「:Unite rails/view」
などなど
unite-railsの画面
The-NERD-tree
• 「:NERDTree」コマンド
– ソースツリーを表示
キーマップを変えておく
• 「:Rmodel」 → 「:Rm」
• 「:NERDTree」 → 「:Rt」
• 「:Unite rails/model」 → Ctrl-Hを2回
入力
良く使うコマンドを簡単にしておくこと
で、
更に効率が高まる...
その他にも
• Vim上でGitと連携
– 「git status」や「git-blame」を見やすく
– Vimからコミットもできる!

• 入力補完
– 入力途中に候補を出す
まとめ
• Vimのコマンドを覚えるのはちょっと
大変
– 作業効率面では良いのでは
– 自分好みにカスタムしよう!!

• Railsでの開発のための機能
– Pluginを入れる毎に新しい世界が。。。
ご静聴ありがとうございま
した。
Upcoming SlideShare
Loading in...5
×

初心者Vimmerによるvim+rails開発

4,403

Published on

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,403
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
9
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "初心者Vimmerによるvim+rails開発"

  1. 1. 初心者Vimmerによる Vim + Rails開発 開発Gr. 菊池大輔 @d_hero
  2. 2. この勉強会の内容 • Vimってどんなエディタ? • Vimで便利なPlugin(主にRailsで)
  3. 3. このテーマのきっかけ その1 • 弊社のデザイナー I さん 「菊池さん、そのエディタ、 使いづらそっ すね!」 そう思ってた時期が僕にもありまし た。。。 でもちょっと待ってくれ!
  4. 4. このテーマのきっかけ その2 • パートナー I 社のFさん 菊池 「コマンドで、ぱぱっと開けるんです よー」 Fさん 「・・・ファッ!!?」
  5. 5. Vimとは • 「Vi」から派生したテキストエディタ – Vi:VIsual editor、Visual Interface • マウスを使わない! • カーソルキーを使わない! • コマンドによってテキスト編集を行う – Vim • 最初は「Vi IMitation(Viの模倣)」 • 後に「Vi IMproved(Viの改良)」
  6. 6. ViとVimの違い 設定ファイルを編集して自分好みに! • 「~/.vimrc」に書きこむ – 各種Pluginを導入可能! – キーマップの指定が可能! – 文字色を変更可能! • 「カラースキーマ」の導入
  7. 7. Vimを使うには • UNIX系OS – 「vi 」か「vim」コマンドを打つだけ。 • Windows – 仮想マシンでUNIX系OSを使う(僕はこ れ) • vagrantを使ってちゃちゃっと用意 – GVim • GUI用のVim
  8. 8. Vimの画面
  9. 9. 文字色を変えると・・・
  10. 10. Vimの「モード」 コマンドモード (起動時はここ) ESC i, a, o等 挿入モード 普通の入力 I等 行ごとのコピー 削除等 ESC v, V等 ビジュアルモー ド 切り取り、コピー
  11. 11. テキストを書き始めるには • コマンドモードで、以下のコマンド (挿入モードに移動) – i: カーソル位置から入力開始 – a:カーソル位置の後から入力開始 – o:1行挿入して、その行から入力開始 – R:上書き開始 • 挿入モードからコマンドモードに戻 る – ESCキー
  12. 12. カット、コピー、ペースト コマンドモードで • x: 入力位置の1文字切り取り • dd: 1行切り取り • yy:1行コピー • D:入力位置以降の切り取り • p:貼り付け [数字]x, [数字]dd, [数字]yyで、 複数文字、行で編集可能
  13. 13. コマンドモードで出来るこ と • u:アンドゥ • Ctrl+R:リドゥ • 全文検索 – 「/(スラッシュ)文字列」で • 保存、vimの終了 – 「:w」で保存 – 「:q」で終了(「:q!」で保存せず 強制終了) – 「:wq」で保存して終了(ZZでも可)
  14. 14. カーソルの移動 • コマンドモード、ビジュアルモード • カーソルキーも使える、けど・・・ 右手のホームポジションから 動かさなくてよい! 上:k 左:h 「^」、「$」:行頭、行末 下:j [数字]+[コマンド]で その数だけ移動 右:l(エル)
  15. 15. ビジュアルモード マウスのドラッグで選択するのと同じ 機能 • v:領域選択 • V:行選択 • Ctrl-V:矩形選択 選択した後 • d:切り取り • y:コピー
  16. 16. 他に・・・ • :new ファイル名 – 新しいウィンドウを開く!(水平方向) • :vnew ファイル名 – 新しいウィンドウを開く!(垂直方向) • Ctrl-wの後にk,j,h,l(エル)のいずれか – 上下左右のウィンドウへの移動 • 他のファイルを見ながらの編集が可 能
  17. 17. ウィンドウを開いた画面 Ctrl+wの後に j(下)入力
  18. 18. タブ機能 • :tabnew ファイル名 – 新しいタブでファイルを編集する • [数字]gtで、指定した番号のタブに移 動
  19. 19. タブの画面 1gtで移動 2gtで移動
  20. 20. メリットとデメリット • メリット – キーボードだけで編集が完結する – 慣れると編集が速くなる・・・かも。 • デメリット – 他のエディタで操作を間違う危険性 • 編集が終わってESCキーを押す (Excelのセルの修正が飛ぶ) • 保存しようとして「:w」と入力、など
  21. 21. Railsによる開発をするため に • VimにPluginを導入する! – ディレクトリツリーを表示 – 特定のモデルを指定して表示 • Pluginを管理するPlugin – vundler
  22. 22. vundlerのインストール • gitでcloneするだけ git clone https://gitbub.com/gmarik/vundle.git ~/.vim/vundle.git
  23. 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. 24. Bundleコマンド • Bundle 'tpope/vim-rails‘ – Github上のリポジトリから取得 • Bundle ‘dbext.vim’ – vim-scripts上のリポジトリから取得 • Bundle ‘git://repository_url’ – それ以外のgitリポジトリから取得
  25. 25. Pluginのインストール • インストール – Vimを開いて「:BundleInstall」コマン ド実行 • 再インストール – 「:BundleInstall!」コマンド実行
  26. 26. Rails開発で使えるPlugin • rails.vim – MVC間を簡単に行き来する • unite-rails – 一覧表示をさせる • The-NERD-tree – ソースツリーを表示
  27. 27. rails.vim • .vimrcで「Bundle ‘tpope/vim-rails’」 • vimでrails開発をする、といったらコ レ! • controllerのアクションの場所で「: R」 – 関連するビューを開く • 「:Rmodel [モデル名]」 • 「:Rview [ビューのパス]」
  28. 28. unite-rails • ファイルを一覧表示&絞り込みしてく れる • 「:Unite rails/model」 • 「:Unite rails/controller」 • 「:Unite rails/view」 などなど
  29. 29. unite-railsの画面
  30. 30. The-NERD-tree • 「:NERDTree」コマンド – ソースツリーを表示
  31. 31. キーマップを変えておく • 「:Rmodel」 → 「:Rm」 • 「:NERDTree」 → 「:Rt」 • 「:Unite rails/model」 → Ctrl-Hを2回 入力 良く使うコマンドを簡単にしておくこと で、 更に効率が高まる!
  32. 32. その他にも • Vim上でGitと連携 – 「git status」や「git-blame」を見やすく – Vimからコミットもできる! • 入力補完 – 入力途中に候補を出す
  33. 33. まとめ • Vimのコマンドを覚えるのはちょっと 大変 – 作業効率面では良いのでは – 自分好みにカスタムしよう!! • Railsでの開発のための機能 – Pluginを入れる毎に新しい世界が。。。
  34. 34. ご静聴ありがとうございま した。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×