【最強のテキストエディタ】「Vim」入門

あなたは、どのテキストエディタを使おうか悩んでいませんか。また、プログラミングにも慣れてきて、今の開発環境を改善したいと思う事はありませんか?

この記事では、高機能なテキストエディタVimについて、インストールの方法から設定までご紹介します。

出典:写真AC

Macのテキストエディタアプリでは、Sublime Text3 や Atom が有名ですが、PCのスペックによって動作が遅かったり、ディスプレイのサイズが小さいため、なかなか作業しづらいと感じる方も多いのではないでしょうか。

筆者も「vim」を使用することで、劇的に開発環境が改善することが出来ました。

Vimとは?

Vimは、UNIX環境(Macintosh, Linuxなどで使われているOS)で便利なテキストエディタ「Vi」から派生した高性能なテキストエディタです。

ターミナルアプリなど、CUI(Command Line Interface)上でコーディングが出来るので、多くのエンジニアに好まれています。

全てターミナル上で操作するため、プログラミング初心者には難しく見えますが、実際は使い方さえ覚えてしまえば簡単です。

 

なぜVimを使うのか?

5089be0474d2b002e5a0c75c27cd07a2_m

出典:写真AC

 

理由その1: 対応しているフォーマットが多い

cWv2hAk
出典: cupOF Interests

複数のプログラミング言語のフォーマットに合わせるために、いちいちテキストエディタのパッケージを導入するのは面倒ですよね。

例えば、一般的にはSublime Textをダウンロードした直後にHTMLファイルを開いても、コードの色分けが初期設定でされていなかったり、タグを省略して書くことさえ出来なかったりします。

しかし、Vimは様々な言語のフォーマットに対応しているため、コードの色分け等を瞬時に判別してくれます。

 

理由その2: メモリ消費量が少ないからサクサク動く!

コーディングをするなら、GUI(Graphic User Interface)のほうが多機能で、使い勝手が良いという評価は多いでしょう。

しかし、GUIはPCのスペックによって動作が大きく左右されるので、PCによっては動作が極めて遅いことも少なくありません。

VimはCUIにも関わらず、多機能でかつ軽量で動してくれるので、スペックの低いパソコンでも使えます!

 

理由その3: キーボードだけで操作できる!

前述した通り、CUIベースで誕生したテキストエディタなので、マウスで操作する概念はそもそもありません。

カーソルの移動はH, J, K, Lキーで行います。

他にも、指定した行に一辺に移動できるショートカットもあるので、マウスで操作するよりも作業効率が上がるのは間違いなしです!

53d6cfae0180c5d91ce80257a393369d_s

出典:写真AC

理由その4: 歴史が長いからこそ、使い勝手が良い

Vimの前身が世の中に登場したのは、今から約30年前です。当時UNIX環境のPCで動作できる「Vi」というエディタが存在していました。

しかし、viの動作に対応していたPCは限られていたため、viのクローン版テキストエディタ「vim」が1991年に登場しました。

現在に至るまで何度もバージョンアップが行われているので、使いやすさに対するこだわりは他のエディタよりも強いことが分かります。

 

理由その5: 開発コミュニティが活発!

歴史あるエディタでも新しいプラグインが日々追加されています。他のテキストエディタと比較してみると、圧倒的にVimの方が多いです!

各テキストエディタのパッケージ数の比較

Sublime Text 3,761個
Atom 4,734個
Vim
14,111個

※2016年8月のパッケージ数です。

更に、日本の開発コミュニティサイトも存在しているので、英語が苦手な人でもVimに関する質問・不具合の報告、改善策の提案が他のテキストエディタよりもしやすいです。

vim-jp » Vimのユーザーと開発者を結ぶコミュニティサイト

 

Vimを使ってみよう

9869260ce6920c13c2fc78ef2adee9d0_m

出典:写真AC

 

早速Vimを使ってみましょう。今回は手短な作業をするので、初心者・経験者問わず誰でもできるようになっています。

この機会に使い方を覚えて、メインエディターとして使えるようになりましょう!

 

Vimのインストール

・Macの場合

Macには初めからインストールされています。

最新版を使いたい場合には、ソフトウェアのインストールを簡単にできる、パッケージ管理システムで有名なHomebrewを利用してインストールをおすすめします。

Homebrewについては、こちらの記事をご参考ください。

homebrewとは何者か。仕組みについて調べてみた

また、インストール方法についてはこちらの記事をご参考ください。

Vim初心者に捧ぐ実践的入門

 

・Windowsの場合

windowsの場合は、ソースコードを公式サイトから用意しビルドさせる必要がありますが、初心者の方には難しいかもしれません。

香り屋 様のサイトには簡単に導入できるインストーラーがあるので、こちらを利用することをおすすめします。

 

基本的なコマンドを習得しよう

0bdb56ae204bee60ea49e921bbec24ad_s

出典:写真AC

 

vimにはモードがあります。「編集モード(インサートモード)」「閲覧モード(ノーマルモード)」があり、どちらのモードが確認するためには、escキーを押して閲覧モードに戻れます。

 

vimの操作方法

まず、vimの基本操作として以下のコマンドが挙げられます。

k
j
h
l
一文字削除 x
編集モードに切り替える i
次の行から編集モードに切り替える o
現在の行に新しい行を追加して編集モードに切り替える O
閲覧モードへ 編集モード中にesc

 

上書き保存 :w
名前をつけて保存 :w ファイル名
編集終了 :q
保存して終了 :wq または 😡
ファイルを開く :e ファイル名

 

他にも沢山のコマンドがあるので、興味のある方は参考にしてください。

 

vimの操作に慣れるため、”Hello World”という文字が出力されるRubyのプログラムを組んでみましょう!

 

以下のコマンドをターミナル上で入力しよう

pwd  #ホームディレクトリにいることを確認
cd desktop #デスクトップに移動
touch helloworld.rb #helloworld.rbというrubyファイルを作成
vim helloworld.rb  #作成したhelloworld.rbをvim上で編集する

 

次に以下のような画面が出てきます。Vimで開いたhelloword.rbです。

まだ作成したばかりなので、何も記入されていません。これから編集モードに切り替えて処理を加えていきます。

スクリーンショット_2016-08-21_1_39_16

 

編集モードに切り替え、コードを記述しよう

キーボードの “I” を入力し、編集モードに切り替えます。「–INSERT–」という文字が表示され、編集モードに切り替わっていることが分かります。スクリーンショット_2016-08-21_1_41_10

 

次に以下のコードを記述してください。

puts "Hello World"

スクリーンショット_2016-08-21_1_41_30

 

escキーを押すと、編集モードを終了します。最後に、変更した内容を上書きするため、:wq とコマンドを打ちます。

https://gyazo.com/800ceaea263fc463545c73a71baccfd6

それではプログラムが動作できているかどうか確認してみましょう。

 

ターミナルで以下のコマンドを入力してください

ruby helloworld.rb

 

「Hello World」と出力されていたら成功です!これで一通りVimを使ったコードの編集方法を学べました。

 

操作が不慣れなうちは、ストレスを感じるかもしれません。しかし、コマンドを覚えてしまえば、かなり作業スピードが上がり、Vimの良さがわかるでしょう。

 

Vimの設定を行う

gear-1077550_1280

 

設定を行うことによって、vimで表示されるテキストの色や、編集モードでインデントを自動的に揃えるなどしてくれるので、より便利になります。

 

.vimrcを作成する

設定を行うには、ターミナル上で「.vimrc」というファイルをホームディレクトリ上に作成する必要があります。

ターミナルを開いて以下のコマンドを入力しましょう。

cd #ホームディレクトリに移動
vim ~/.vimrc #vimrcを作成し、中身をvimで表示する

以下の画像のように表示されたら次へ進みましょう。

スクリーンショット 2016-08-21 13.25.10

 

.vimrcを編集する

それでは作成した.vimrcに設定コードを記述しましょう。設定内容を定義する場合、setというコマンドを記述します。

(例)set オプション名 = 値

 

オプションの種類は豊富にありますが、中でも基本的なものを紹介します。

オプション名 内容
number 行番号の表示させる
title ターミナルのタイトルを指定する
autoindent 改行時に自動的にインデントが振られるようにする
encoding=utf-8 文字コードをutf-8に変換させる
tabstop=2 tabキーを押した時の幅をスペース2つ分にする
expandtab tabを半角スペースで挿入する
shiftwidth=4 vimが自動で生成するインデントの幅をスペース4つ分にする

 

キーボードの”I”キーで編集モードに切り替え、setしたいオプションを入力しましょう。例えば、vimで行数を表示したい場合、このように入力します。

set number

編集が完了したらescキーを入力し、:wqとコマンドを入力すれば編集内容が保存されます。試しにもう一度、vimでファイルを開くと以下のように行数が表示されたら成功です。

スクリーンショット_2016-08-21_14_14_13

 

Vimにプラグインを導入しよう

次にVimのプラグインについてご紹介します。プラグインを活用することで、Vimの開発環境を更に効率良くすることができるので、是非利用してみましょう。

 

なぜVimにプラグインは必要なのか?

元から備わっているVimの機能でも作業効率は十分捗りますが、やはり使用していくうち欲しい機能や不便に感じる点も増えてくるでしょう。

特に最近ではフレームワークを用いた開発が増えているので、ファイルだけでなく、ディレクトリ(フォルダー)の操作もできないといけません。

そのため、Vimを活用しているエンジニアは、必ずといっても良いほどプラグインを導入しています。

 

プラグインの導入方法

それでは実際にプラグインをVimに入れてみましょう。
基本的に欲しいプラグインがあったらターミナル上でcurlコマンドを入力するだけですが、その前にプラグインを管理できるプラグインを導入しておくと今後のプラグイン管理が非常に捗ります。

 

NeoBundle

NeoBundleは、日本のvimユーザーであるShougo氏によって作られたプラグインのバージョンやリストなどを一括管理してくれるプラグインです。今回は、これをインストールしてみましょう。

 

NeoBundleをインストールしよう

ターミナル上で以下のコマンドを入力してください。

cd ~/.vim  #.vimディレクトリに移動
pwd  #今いるディレクトリが.vimに移動していることを確認
mkdir bundle #bundle というディレクトリを作成する 
cd bundle #たった今作成したbundleディレクトリに移動
git clone https://github.com/Shougo/neobundle.vim  ~/.vim/bundle/neobundle.vim

これでVimにNeoBundleを簡単にインストールすることができました。

 

NeoBundleの初期設定を行おう

インストールができても、今の段階ではNeoBundleを動かすことが出来ないので、.vimrcを開いて以下のコードを追加します。

set nocompatible
if has('vim_starting')
   set runtimepath+=~/.vim/bundle/neobundle.vim
endif
call neobundle#begin(expand('~/.vim/bundle/'))
    NeoBundleFetch 'Shougo/neobundle.vim'




call neobundle#end()
filetype plugin indent on

これでNeoBundleのコマンドを動かすことができます。

 

NeoBundleでプラグインをインストールする

それではNeoBundleコマンドでプラグインをインストールしてみましょう!

 

手順その1: 欲しいプラグイン名を.vimrcに入力する

先程入力したNeoBundleに関する設定コードに、NeoBundle ‘xxxx/プラグイン名.vim’ と追加します。

スクリーンショット_2016-08-21_14_50_55

 

手順その2: プラグインをインストールする

ホームディレクトリに移動し、vimを起動します。

cd
vim

 

Vimの起動画面に移動したら、:NeoBundleInstallとコマンドを入力してください。

:NeoBundleInstall

 

Update Doneとメッセージが表示されたら成功です。

スクリーンショット_2016-08-21_15_00_42

 

手順その3: インストールされたプラグインの一覧を取得する

確認の為、今インストールプラグインがきちんとVimにあるのか確認するコマンドを入力しましょう。

:NeoBundleListとコマンドを入力すると、プラグイン一覧が以下の画像のように表示されます。追加したいプラグイン名が入力されていたらインストール成功です。お疲れ様でした!
スクリーンショット 2016-08-21 15.01.24

 

おすすめのVimプラグイン

最後に便利なプラグインを3つご紹介したいと思います。

NERDTree
Vimを起動しながらファイルやディレクトリを開くことができるプラグインです。Ruby on RailsやCakePHPなどのフレームワークで開発されている方にオススメ

NeoSnippet
vim上でコードを自動的に入力補完してくれるプラグインです。長いコードを何度も書くのが面倒な方にオススメ

molokai
テキストのフォーマットに応じてカラースキーマを適用してくれるプラグインです。本気でこれからVimを使われる人にオススメ

 

どのプラグインもNeoBundleで簡単にインストールできます。

また紹介したプラグインは、ほんの一部に過ぎません。もっと効率化を図りたい方は開発コミュニティに参加したり、プラグインを一覧でまとめているサイトを参考にしてみてください。

Vim Awesome

 

その他

その他のテキストエディタとしてAtomや、Sublime Text などもご紹介しております。

ぜひご参照ください。

【徹底解説】テキストエディタ「Atom」の日本語化と便利機能 – for Mac

プログラミングを始める方必見!Sublime Text3のおすすめ設定

【保存版】サクラエディタの利用方法&おすすめ設定を徹底解説

 

最後に

いかがでしたでしょうか?Vimは、他のテキストエディタと比べて多くのメリットがあり、しかも高い効率で作業できる素晴らしいエディタです。

この記事を通してVimの事を少しでも理解いただけると幸いです。プログラミングで1番大事なことは、効率の良い開発環境がどれだけ備わっているかに限ります。

Vimをどんどんカスタマイズしてプロのエンジニアに近づきましょう!

 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルをに見つけることができます。

この機会にプログラミングを学びませんか?

rgbtechnote2-01

長岡 大樹 長岡 大樹が書きました
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

プログラミングをもっと勉強してみませんか?

当メディアを運営しているプログラミングスクールTECH::CAMPの
お試しカリキュラムが、今なら無料でご覧いただけます!



    メールマガジン登録でTECH NOTEの最新情報とカリキュラムを受けることができます

SNSでもご購読できます。

このエントリーをはてなブックマークに追加
記事をシェア→

無料プログラミング体験会!×

日本最大規模のプログラミングスクールTECH::CAMPの説明会に参加! 無料体験会申し込み