はじめまして、上田です。
ソーシャルプラットフォーム事業本部 UXデザイン部にて、マークアップ及びフロントエンドまわりを担当しております。

今回、私がご紹介させて頂く内容は、以前から業務に取り入れてみたかった高機能な
テキストエディタ「Vim」をご紹介させて頂きます。
『Vimとは?』
そもそも「Vim」とはどのようなテキストエディタかと言いますと、
UNIX系OSでは広く使われているテキストエディタで、大きな特徴としては、
操作の全てがキーボードのみで可能となっておりショートカットを上手く組み合わせて非常に効率よくマークアップなどの作業が可能な高機能なテキストエディタとして有名です。
また、「Vim」を語る上で外せないのが「モード」という概念です。複数のモードを使い、テキスト編集を行うことで、一般的なテキストエディタに比べて、かなり機能が充実しています。はじめはこのモードの概念に戸惑いがちなのですが、慣れてしまえば非常に使い勝手の良い機能となります。

「モード」の概念について簡単に説明させて頂きますと、
「モード」機能で一般的によく使用されているのが次の4つです。

・ノーマルモード
 Vimを操作する上での最も基本的なモードで編集コマンドの全てを入力することが可能です。
 他のモード中にキーボードの「ESC」でノーマルモードに移行可能です。

・ビジュアルモード
 領域の選択に特化している「モード」で矩形選択など、非常に便利な機能が用意されています。
 ノーマルモードからキーボードの「v」でビジュアルモードに移行可能です。

・挿入モード
 文章をファイルに書き込む際に使用する「モード」でテキスト内容の修正などは
 挿入モードを使用して行います。
 ノーマルモードからキーボードの「i,I,a,A,o,O」などで挿入モードに移行可能です。

・コマンドラインモード
 コマンドや関数の実行などはコマンドモードを使用して行います。また検索、置換処理なども
 コマンドラインモードを使用して行います。
 ノーマルモードからキーボードの「:」でコマンドラインモードに移行可能です。


『インストール』
では早速、「Vim」をインストールしてみましょう。
今回は「MacVim-KaoriYa」を使わせて頂こうと思いますのでまずは次のURLより「MacVim-KaoriYa」をインストール下さい。
※MAC OS10.7 Lion以前のOSはサポート外となっているようです。

インストールした「macvim-kaoriya-yyyyddmm.dmg」ファイルを展開
アプリケーションディレクトリに入れてしまえばインストール完了です。


img001


『初期設定』
インストールが完了したら使い勝手の良いように設定を加えます。
「ホームフォルダ/」に「.gvimrc」を作成して以下の初期設定内容を記述します。

img002


「.gvimrc」に記述する初期設定内容 ----------------------------------------------

" ↓ 初期設定内容ここから

" 色テーマを設定 デフォルトで何種類か用意されています。今回は「elflord」を選択
colorscheme elflord

" タブを常に表示する。
set showtabline=2  

 " IMを無効化
set imdisable

" 透明度を指定
set transparency=30 

" アンチエイリアスの設定
set antialias

" フォントの指定
set guifont=Monaco:h14

" ウィンドウサイズ(幅)の設定
set columns=120

" ウィンドウサイズ(高さ)の設定
set lines=50

" 行数を表示
set number

 " 括弧同士をハイライト
set showmatch

" インクリメンタル検索
set incsearch

" バックアップファイルを作らない
set nobackup

" ビープ音を鳴らなくなる
set visualbell

" スクロール時の余白確保
set scrolloff=5

" スワップファイル作らない
set noswapfile

" インデントを表示
set list
set listchars=tab:>-,trail:-,nbsp:%,extends:>,precedes:<

" カーソル行をハイライト
set cursorline
:hi clear CursorLine
:hi CursorLine gui=underline
highlight CursorLine ctermbg=black guibg=black

" ↑ 初期設定内容ここまで

---------------------------------------------------------------------------
※MACでは「.」から始まる不可視ファイルはデフォルトで非表示になっているので、

ターミナルで

defaults write com.apple.finder AppleShowAllFiles true

と打ちます。その後

killall Finder

と打ちFinderを再起動すると不可視ファイルが表示されます。

再び非表示にするには、

defaults write com.apple.finder AppleShowAllFiles false

killall Finder

で、もとに戻す事が可能です。

今回の初期設定内容の他にも「Vim」には様々な設定が用意されていますので

ご自身の使いやすい内容にどんどんカスタマイズして行くと良いかと思われます。

また、「Vim」のノーマルモードから「:set all」と打つと設定可能なオプションが一覧で確認出来ます。

img003

『基本操作&便利機能』

初期設定が完了したところで「Vim」の基本操作と、いくつかの便利な機能を紹介致します。

まずは基本操作から説明致します。冒頭でお伝えした通り「Vim」は基本マウスを操作せずカーソル移動などもキーボードのみで操作可能です。

移動の際に使用する基本的なキー操作は、下記となります。



【基本操作】

「↑上」:[ k ]

「→右」:[ l ]

「↓下」:[ j ]

「←左」:[ h ]

「行末へ移動」:[ ^ ]

 

「行末へ移動」:[ $ ]
「開始及び終了括弧へ移動」:[ % ]

【便利機能】

続いて、「Vim」の便利機能をいくつか説明致します。


・インデントをそろえる

 1.ビジュアルモード( Ctrl + v )でインデントをそろえる箇所を選択

img004_1

 2.キーボードの[ = ]でインデントがそろいます。 

img004_2



・行をまたいで編集する。

マークアップなどでまとめてclass名などを追加したい場合も簡単に追加可能です。

 
1.ビジュアルモード( Ctrl + v )でclassを追加したい場所を選択
 

img005_1


2.追加したいclassを記述
 

img005_2
 


3.「esc」でノーマルモードにもどる

img005_3


・文字を検索

1.まず、検索をかけたい行にカーソルを移動します。

img005_3
 
2.キーボードの[ F + 検索したい文字(今回は「1」を検索) ]でカーソルが移動します。

img006
 

また、この機能をつかって、選択範囲を指定する事も可能です。

1.選択したい範囲の始点でキーボードの[v]を押します。

img007
 

2.キーボードの[ F + 選択したい範囲の終点の文字 ]で選択範囲が指定可能です。

img008
 

『最後に』

今回、ご紹介させて頂いたのは「Vim」に関するごく初歩的な一部の機能になります。
その他「Vim」には様々なカスタマイズや機能が沢山詰まっています。
またそれに関する情報も沢山WEB上に公開されています。是非、ご参考にして頂きご自身の業務に役立てて頂ければ思います。


次回もなにか業務に役立つ有意義な情報が御座いましたら、お伝え出来ればと考えています。よろしくお願い致します!