大学生からの Web 開発

会社の人に見つかってぽよぽよしてきた

「Vim Bootstrap」を使っておけば、なんちゃって Vimmer も幸せになれる

f:id:karur4n:20140819190303p:plain なんちゃって vimmer (自分)。

つい先ほどこんな記事を書いたばかりなのに Your configuration generator for NeoVim and Vim - Vim Bootstrap を見つけて、どんどん拡張していってる。

最近導入した vim プラグイン をまとめる - 大学生からの Web 開発

Vim Bootstrap は 自分の使用する言語に合わせた .vimrc を提供してくれるサービス。多く使われている設定、プラグインが入ってておすすめできる。

使い方

Your configuration generator for NeoVim and Vim - Vim Bootstrap にアクセスして自分の使う言語を選択して generate する。

f:id:karur4n:20140819190258p:plain

vimrc というファイルがダウンロードされる。

$ mv ~/Downloads/vimrc ~/.vimrc
$ vim +NeoBundleInstall +qall

編集する

f:id:karur4n:20140819190259p:plain f:id:karur4n:20140819190301p:plain そのまま使っても、初心者には何が何やらなのでプラグイン・設定をひとつひとつ検索していく。イマイチわからなかったり使わないであろうものはガンガン消す、またはコメントアウトする。

あと、vim-commentary より nerdcommenter、ultisnips より neosnippet の方が流行ってる感があるのでそちらに変えておいたほうがいいかもしれない。

なにこれ

"*****************************************************************************
"" Abbreviations
"*****************************************************************************
"" no one is really happy until you have this shortcuts
cab W! w!
cab Q! q!
cab Wq wq
cab Wa wa
cab wQ wq
cab WQ wq
cab W w
cab Q q

これがなにをしているのか、なんのためにしているのかわからないので教えてください。

追記

このマッピングタイプミスのためのものと思われます。回答してくださった方々、ありがとうございました。

.vimrc の cab って何?
「なにこれ」はタイプミス予防だと思います。「いらんやろ」とは思いますが。 - mattn のブックマーク / はてなブックマーク

まとめ

そんなに長くもなく、取っ付き易くて良いです。

最近導入した vim プラグイン をまとめる

プラグインは入れたは良いも、導入したことやキーバインドをすぐに忘れるのでメモ。

最近入れたプラグイン一覧

fugitive.vim

Git のラッパープラグインvim から Git の操作ができる。

今までついついエディットを中止することを忘れてコミット粒度が大きすぎたり、内容がまとまってなかったりしたので、それを解消するために vim を開きながら Git を扱えるこのプラグインを入れた。

addcommitはもちろんdiff, blameなどだいたいのコマンドは使えるので、vim と git を使っている人はみんな入れたほうがいいプラグイン

インストール

NeoBundle 'tpope/vim-fugitive'

.vimrc

au FileType gitcommit nnoremap <silent> <buffer> <ESC><ESC> :q<CR>
au FileType gitcommit inoremap <silent> <buffer> <ESC><ESC> <ESC>:q<CR>
au FileType fugitiveblame nnoremap <silent> <buffer> <ESC><ESC> :q<CR>

コミット、ブレイムウインドウが Esc Esc で閉じる。好みで設定する。

使い方

  • :Gwrite
    • 編集中のファイルを git add
  • :Gcommit
    • git commit
  • :Gread
    • 編集中のファイルをコミット時の状態に戻す
    • 上書きされているわけではないので、戻す場合は:w
  • :Gstatus
    • git status
    • 現在の git の状態を確認する
    • ファイルにカーソルラインを合わせた状態で
      • -: add/resetの切り替え
      • D: diff 表示
      • Enter: ファイルの内容を表示
      • C: コミット
  • :Gdiff
    • 差分表示
    • 変更箇所でdp: その差分をgit add
  • :Gblame
    • :git blame
    • 見やすい
    • Enter: そのときのコミットのファイル状態の表示

参考

VimmerなGit使いはfugitive.vimを今すぐ入れたほうがいい - SELECT * FROM life;
fugitive.vim が便利すぎたのでメモ - 反省はしても後悔はしない

scss-syntax.vim

scss のシンタックスハイライトを行うプラグイン

インストール

NeoBundle 'JulesWang/css.vim' " vim のバージョンが 7.4 未満なら必要
NeoBundle 'cakebaker/scss-syntax.vim'

.vimrc

au BufRead,BufNewFile *.scss set filetype=scss.css

使い方

scss ファイルを開く

neomru.vim

Unite.vim の MRU (Most Recently Used) が外部化されていたので入れた。

最近使ったファイルを表示して開くことができるプラグイン。便利だから Unite を使っている人は入れたほうがいいと思う。

インストール

※ Unite.vim が入っていることが前提です

NeoBundle 'Shougo/neomru.vim'

.vimrc

nnoremap <leader>m :<C-u>Unite file_mru<CR>

これで <leader>m で開く

使い方

開く。

  • インサートモード
    • <C-n>: 候補を下へ移動
    • <C-p>: 候補を上へ移動
    • 入力で絞り込み
  • ノーマルモード
    • j/k で移動
  • Enter: 選択中のファイルを開く

※ <C-n> Ctrl + n, <C-p> Ctrl + p ってことです

vim-altercmd

既存の Ex コマンド(:wとか:qとか元からあるコマンド)を独自のものに置き換えられるプラグイン

今のところ後述の rails.vim のためだけに使っている。

インストール

" NeoBundle 'kana/vim-altercmd' オリジナル版
NeoBundle 'tyru/vim-altercmd' " フォーク版

オリジナルのkana版とtyru版の違い · tyru/vim-altercmd Wiki
オリジナル版の更新が止まっててフォーク版の方が改善されている

.vimrc

call altercmd#load() " コマンド設定より前に書く

使い方

.vimrc

" ※ ↓の設定はしちゃダメ
AlterCommand w Exp

これでwコマンドを実行するとExpコマンドが実行されるようになる。

rails.vim

これは最近入れたわけではないけど、使い始めたのが最近のため。 今まで rails プロジェクトのファイル移動は unite-rails を含めた unite でしかやってなかったけど こちらは ワンアクション で移動できて良い。どちらも使えば最強。

インストール

NeoBundle 'tpope/vim-rails'

使い方

  • :R(model/controller/view)
    • 対応した mvc に移動する
  • :A
    • テストとかに飛ぶ

詳しくは AdventCalendar - Vimで快適なRailsライフを - Qiita を見よう。

ユーザー定義のコマンドは大文字から始まらないといけないのだけれど、shift押すのが面倒くさいので さっきの vim-altercmd を使う。

.vimrc

autocmd User Rails AlterCommand r R
autocmd User Rails AlterCommand rc Rcontroller
autocmd User Rails AlterCommand rm Rmodel
autocmd User Rails AlterCommand rv Rview

autocmd User Railsrails プロジェクトでのみ動作するよってこと。rails.vim のおかげで rails を判別できている。 これで:r:Rが、:rc:Rcontrollerが、などが実行される。

まとめ

vimプラグイン入れて、これからにわくわくしている時が一番楽しい。

dotfiles を公開しているのでよかったら見てください。
karur4n/dotfiles

APIのモックを簡単に作成できる「node-easymock」

フロントエンド・バックエンドを分離してAPI主体で開発していく「APIファースト」がホットっぽいですね。

http://wazanova.jp/items/698

それに捗りそうな「node-easymock」を紹介します。

何をしてくれるか

例えば、localhost:3000/userにアクセスしたら

{
  "name": "taro",
  "age": 22,
  "comment": "Hi"
}

みたいなJSONを返してほしいなー、ってのをちゃっちゃと作れるツールです。

API実装はしてないけど、テスト用に使うためのモックサーバーを簡単に立てられるツール。

インストール

node.js製でnpmを使ってインストールします。

$ npm install -g easymock

使おう

localhost:3000/userから取得したければ、user_get.jsonに色々書いていきます。このように、(名前)_(リクエスト名).jsonというファイルの内容がlocalhost:3000/(名前)に(リクエスト名)でアクセスした時に返ってきます。

$ vi user_get.json

{
  "name": "taro",
  "age": 22,
  "comment": "Hi"
}

で、

$ easymock

を実行すると、localhost:3000/userからjsonが返ってきます。

ちなみに、(名前)を除いて_get.jsonファイルだとlocalhost:3000/で返ってきます。

階層構造にする

localhost:3000/items/1みたいに階層構造のURIにしたければ、

easymockSample
└─ items
      └─ 1_get.json

つーかんじでファイルを作ればOK

ルーティングをする

localhost:3000/users/:useridみたいにルーティングしたいときは、config.jsonで設定します。

$ vi config.json

{
  "routes": [
    "/user/:userid"
  ]
}

$ vi users/userid_get.json

{ "id": #{userid} }

としてやれば、localhost:3000/users/3267なんかで

{"id": 3267}

が返ってきます。 config.jsonには他にも色々書けますが省略。

ドキュメント

http://localhost:3000/_documentation/に自動でドキュメントをつくってくれて便利です。

さいご

とても簡単。他にもテンプレート機能、変数、JSONPなんかも使えるので詳しいことは本家参照。

GitHub - CyberAgent/node-easymock: A simple but powerful mock server in nodejs