【Ruby初心者向け】テキストエディタ、ちゃんと設定できてる？使いこなせてる？チェックリスト10項目


## はじめに

勉強会とかで「最近Rubyを始めました」とか、「プログラミング自体、初心者です」という人たちの画面を覗くと、テキストエディタの設定がデフォルトのままだったり、コードを編集するのに矢印キーとバックスペースを連打しまくったりしている人をよく見かけます。

プログラミングを学ぼうとしているのだから、まずコードを書きたい、という気持ちは分かりますが、それよりもまず「コードを書く道具」の使い方をしっかり学んでおいた方が、効率よくコードが書けます。
そして効率よくコードが書ければ、プログラミングの学習効率もよくなります。

というわけで、この記事ではどんなテキストエディタを使う場合でも「最低限、これだけはやっておきたい設定」や「使いこなせるようにしたい機能」を10個紹介します。
初心者の方はこの記事を読んで、テキストエディタの設定や使い方を再確認しましょう！

## 対象となるエディタやIDE

この記事ではVimのスクリーンショットを載せていますが、対象となるエディタやIDEは特に限定しません。
プログラマ向けのテキストエディタであれば、この記事で紹介する設定や機能はほとんど実装（もしくはプラグインとして提供）されているはずです。

設定の仕方や機能の使い方がわからない場合は、お使いのエディタのヘルプページを見たり、ネットの情報を参考にしたりしてみてください。

## チェックリスト10項目

本記事では以下の10項目について説明していきます。
あなたが設定できている/使いこなしている機能はいくつあるでしょうか？？

1. シンタックスハイライトを設定する
2. 複数行の一括コメントアウト、コメント解除
3. 矩形選択・矩形編集
4. タブキーによるインデント幅の設定
5. endキーワードの自動入力、自動インデント
6. 複数ファイルの同時編集、タブ表示
7. ウインドウの分割
8. ファイルツリーの表示
9. インデントの可視化
10. やる気の出るカラースキームや背景画像


それでは以下が本文です！

## 1. シンタックスハイライトを設定する

シンタックスハイライトとは使用する言語に応じて、変数やメソッドを色分けしてくれる機能です。
Railsを開発する場合は、Rubyだけでなく、HTML、Haml、JavaScript、CoffeeScript、CSS、Sass/Scss、YAMLといったファイルも登場するので、ファイルの種類ごとにシンタックスハイライトが付くように設定しておきましょう。

シンタックスハイライトなし
![Screen Shot 2016-10-21 at 07.53.11.png](https://qiita-image-store.s3.amazonaws.com/0/7465/a5204837-9e82-567c-7938-2bb92a0abb73.png "Screen Shot 2016-10-21 at 07.53.11.png")


シンタックスハイライトあり
![Screen Shot 2016-10-21 at 07.53.19.png](https://qiita-image-store.s3.amazonaws.com/0/7465/07fc2b77-abe5-b7cd-1e80-82cf9e197589.png "Screen Shot 2016-10-21 at 07.53.19.png")

## 2. 複数行の一括コメントアウト、コメント解除

Rubyでコメントアウトする場合は以下のように1行ごとに`#`を付けます。

```ruby
# class Contact < ActiveRecord::Base
#   has_many :phones
#   accepts_nested_attributes_for :phones
#
#   def name
#     [firstname, lastname].join(' ')
#   end
#
#   def self.by_letter(letter)
#     where("lastname LIKE ?", "#{letter}%").order(:lastname)
#   end
# end
```

このとき、1行ごとに「#を入力、下に移動、#を入力、下に移動・・・」みたいなことをしていると非常に非効率です。
テキストエディタには複数行をまとめてコメントアウト/コメント解除できる機能（もしくはプラグイン）があるはずなので、この機能を使うようにしましょう。

また、この機能はRuby以外の言語でも使えるはずですし、便利なショートカットの割り当てもされているはずなので、そちらもしっかりチェックしてください。

![46n8Y0Dazj.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/18990afe-15b6-198b-7486-f587074132bb.gif "46n8Y0Dazj.gif")

## 3. 矩形選択・矩形編集

矩形選択・矩形編集は、横方向だけでなく、縦方向にも同時にテキストの入力やコピー・カット・ペーストができる機能のことです。
この機能もショートカットが割り当てられていることが多いので、ショートカットと一緒に使い方を覚えましょう。

![V2qgZwEGRt.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/e96fe63a-1953-b1ec-c23b-771eb0dba054.gif "V2qgZwEGRt.gif")

## 4. タブキーによるインデント幅の設定

Rubyのインデントは「半角スペース2文字」にすることが一般的です。
タブキーを押してインデントさせる際に、「タブ文字そのもの」が入力されたり、「半角スペース4文字」になったりしないように、エディタを設定しておきましょう。
多くのテキストエディタではおそらく、ファイルタイプ（拡張子）ごとにインデント幅の設定ができるはずです。

![EHsmH85cR9.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/1a9d35ec-5bbf-05bd-b4a5-b7ae971144fa.gif "EHsmH85cR9.gif")

## 5. endキーワードの自動入力、自動インデント

Rubyはif文やメソッドの終端に`end`キーワードを入力します。毎回「end、end、end...」と入力するのは大変なので、endキーワードが自動入力されるように設定しましょう。

また、if文やメソッドの中身はインデントさせて書くことがほとんどなので、改行と同時にインデントされた状態で書き始められるようになっていると効率が良いです。

上記の機能がテキストエディタ標準で提供されていない場合は、プラグインを探してみてください。

![rn6hhbIBsm.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/4ef0a080-31dd-77d4-d47e-e8575336e3e7.gif "rn6hhbIBsm.gif")

## 6. 複数ファイルの同時編集、タブ表示

初心者の方の操作を後ろから見ていると、ときどき「ファイルAを開いて編集、保存して終了、ファイルBを開いて編集、保存して終了、それからもう一度ファイルAを開いて・・・」というような作業をしている人を見かけます。
しかし、いちいちエディタを終了させなくても、テキストエディタは複数のファイルを並行して編集することができます。
さらに、ファイルごとにタブを分ければ、ファイルの行き来も簡単です。

![qORrvrxp8O.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/b73af7fa-3b02-5d13-d12a-92d57150c8e3.gif "qORrvrxp8O.gif")

また、Vimであれば「バッファの移動」を使うと、タブを分けなくても1画面内でファイルを行き来することができます。

![R6TbyP5VxZ.gif](https://qiita-image-store.s3.amazonaws.com/0/7465/24d41a33-e980-e540-0e78-f92ca96fd514.gif "R6TbyP5VxZ.gif")

いずれの場合でもエディタごとにショートカットキーが割り当てられているはずです。
複数のファイルを同時に開いて効率よくコードを編集しましょう。

## 7. ウインドウの分割

ウインドウを左右や上下に分割すると、片方のコードを見ながら、もう片方のコードを編集することができます。

左右に分割
![Screen Shot 2016-10-21 at 09.00.10.png](https://qiita-image-store.s3.amazonaws.com/0/7465/5d59f883-6928-72a0-ce94-b32b4c2fa0d4.png "Screen Shot 2016-10-21 at 09.00.10.png")


上下に分割
![Screen Shot 2016-10-21 at 09.00.25.png](https://qiita-image-store.s3.amazonaws.com/0/7465/45c6fb5c-df08-73d1-876f-c1f4c89a10f8.png "Screen Shot 2016-10-21 at 09.00.25.png")

画面が大きければ3分割したり、上下左右に分割したりもできます。
![Screen Shot 2016-10-21 at 09.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/7465/f8f4d32e-c981-bcd4-1334-715a5d8d378b.png "Screen Shot 2016-10-21 at 09.02.52.png")

![Screen Shot 2016-10-21 at 09.03.37.png](https://qiita-image-store.s3.amazonaws.com/0/7465/a037c1e0-fdb8-f4cd-6fa6-5e22b4d23947.png "Screen Shot 2016-10-21 at 09.03.37.png")

頭の中でコードを覚えておくのは限界があるので、ウインドウの分割をうまく使って、他のコードを参照しながらコードを書くようにしましょう。

## 8. ファイルツリーの表示

Railsアプリなど、ある程度大きなアプリケーションを開発する場合は、ディレクトリやファイルの一覧をすぐ参照できるようにしておいた方が、今自分がどのディレクトリにあるどのファイルを編集しているのか把握しやすくなります。
ファイルツリーが標準で表示できないエディタは、同等のプラグインを探してインストールしてください。

![Screen Shot 2016-10-21 at 09.09.34.png](https://qiita-image-store.s3.amazonaws.com/0/7465/414cb831-0d4d-67d8-ec86-17c18e818f8b.png "Screen Shot 2016-10-21 at 09.09.34.png")

## 9. インデントの可視化

if文やブロックの長さは短ければ短いほど望ましいですが、そうはいってもどうしても長くなってしまう場合はあります。
if文やブロックが1画面に収まりきらなかったり、ネストが深くなったりすると、「このブロックはどこからどこまで続いているんだ？」とわからなくなってきます。
そんな場合はインデントを可視化する設定やプラグインを入れておくと、「このブロックはここまで続いているのか」ということがわかりやすくなります。

インデントの可視化なし
![Screen Shot 2016-10-21 at 09.20.52.png](https://qiita-image-store.s3.amazonaws.com/0/7465/eb8ed7f4-d3ef-6abd-2856-a7f1166b82b3.png "Screen Shot 2016-10-21 at 09.20.52.png")


インデントの可視化あり
![Screen Shot 2016-10-21 at 09.20.57.png](https://qiita-image-store.s3.amazonaws.com/0/7465/11bbbbe1-1139-b441-f1d9-36e6c891700e.png "Screen Shot 2016-10-21 at 09.20.57.png")

## 10. やる気の出るカラースキームや背景画像

ここは完全に趣味の世界ですが、楽しくプログラミングするには大事なポイントです。
多くのエディタではカラースキーム（配色）やテーマを自由に選べたり、外部で公開されているカラースキームやテーマをインストールしたりすることができます。

デフォルトのままでも十分カッコいいエディタもありますが、もっとコードを書くのが楽しくなるような、自分好みのカラースキームを探してみましょう。

たとえば、こんな画面よりも・・・
![Screen Shot 2016-10-21 at 09.30.46.png](https://qiita-image-store.s3.amazonaws.com/0/7465/a223d401-3dc0-fe25-9bf3-e25d383787ed.png "Screen Shot 2016-10-21 at 09.30.46.png")

こっちの方がカッコいい！（僕の場合は）
![Screen Shot 2016-10-21 at 09.27.23.png](https://qiita-image-store.s3.amazonaws.com/0/7465/44156055-14c0-7a4f-747a-1cd70a5509e9.png "Screen Shot 2016-10-21 at 09.27.23.png")

RubyMineでは背景画像を入れることもできます。（他のエディタでもできるのかな？）
![background_image.png](https://qiita-image-store.s3.amazonaws.com/0/7465/935e93b0-8975-12f3-82f3-26af999a73c2.png "background_image.png")
出典： https://www.jetbrains.com/ruby/whatsnew/

ついでにターミナルの配色もカスタマイズしておきましょう。
Railsを開発したりする場合はターミナルの操作も必須になりますしね。
![Screen Shot 2016-10-21 at 10.18.01.png](https://qiita-image-store.s3.amazonaws.com/0/7465/c08de07e-09bc-d6fb-a3c4-e9df7d95bb02.png "Screen Shot 2016-10-21 at 10.18.01.png")

## 2020.2.29追記：全角スペースの可視化

熟練者でもうっかりやってしまうことがありますが、初心者の人は特に半角スペースと全角スペースを打ち間違えてプログラムが動かない、というミスを犯すことがよくあります。
全角スペースを可視化しておくと、うっかり全角スペースを入力してもすぐに気づくことができます。

全角スペースの可視化なし
<img width="303" alt="Screen Shot 2020-02-29 at 9.27.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/27cd9554-4161-a9b0-4ac2-611b61c19acd.png">

全角スペースの可視化あり（2行目の`[r,　g,　b]`のスペースが全角）
<img width="317" alt="Screen Shot 2020-02-29 at 9.27.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/7db0cfcc-c234-ea6a-c20a-ded27fcebf1e.png">

（注：全角スペースの可視化が強調されるよう、あえてシンタックスハイライトは外してあります）

## まとめ

ではあらためて今回紹介した10項目（+1項目）を振り返ってみましょう。

1. シンタックスハイライトを設定する
2. 複数行の一括コメントアウト、コメント解除
3. 矩形選択・矩形編集
4. タブキーによるインデント幅の設定
5. endキーワードの自動入力、自動インデント
6. 複数ファイルの同時編集、タブ表示
7. ウインドウの分割
8. ファイルツリーの表示
9. インデントの可視化
10. やる気の出るカラースキームや背景画像
11. 全角スペースの可視化（2020.2.29追記）

さあ、みなさんはいくつ「○」が付きましたか？
「デキるプログラマ」であれば、おそらくほぼ全部に○が付くはずです。

「○が1つか2つしか付かなかった」という初心者さんは今すぐ自分のエディタについて調べて、効率よくコードを書けるようになりましょう！

### あわせて読みたい

今回の記事では主に僕が使っているVimの画面を載せていました。
Vimの設定や便利なコマンドについては以下の記事でまとめているので、Vimユーザーの方はぜひ参考にしてみてください。

- [脱初心者を目指すVimmerにオススメしたいVimプラグインや\.vimrcの設定 \- Qiita](http://qiita.com/jnchito/items/5141b3b01bced9f7f48f)<a href="http://b.hatena.ne.jp/entry/http://qiita.com/jnchito/items/5141b3b01bced9f7f48f" target="_blank"><img src="http://b.st-hatena.com/entry/image/http://qiita.com/jnchito/items/5141b3b01bced9f7f48f" class="bookmark-count"></a>
- [脱初心者を目指すなら知っておきたい便利なVimコマンド25選 \(Vimmerレベル診断付き\) \- Qiita](http://qiita.com/jnchito/items/57ffda5712636a9a1e62)<a href="http://b.hatena.ne.jp/entry/http://qiita.com/jnchito/items/57ffda5712636a9a1e62" target="_blank"><img src="http://b.st-hatena.com/entry/image/http://qiita.com/jnchito/items/57ffda5712636a9a1e62" class="bookmark-count"></a>

「Vimに乗り換えたいんだけど、どうすれば？」という方はこちらの記事をどうぞ。

- [僕がサクラエディタからVimに乗り換えるまで \- give IT a try](http://blog.jnito.com/entry/20120101/1325420213)<a href="http://b.hatena.ne.jp/entry/http://blog.jnito.com/entry/20120101/1325420213" target="_blank"><img src="http://b.st-hatena.com/entry/image/http://blog.jnito.com/entry/20120101/1325420213" class="bookmark-count"></a>

本記事ではVimをメインで使ってきましたが、Railsアプリケーションをガッツリ開発する場合、僕はRubyMineを使っています。
RubyMineは有料のIDEですが、この記事で紹介したような機能はほぼデフォルトで設定・実装されているので、お金を払うぶんセットアップは早く終わるかもしれません。
RubyMineに興味がある方は以下の記事も参考にしてみてください。

- [メインの開発ツールをVimからRubyMineに変更した理由 \- Qiita](http://qiita.com/jnchito/items/cb05bb14d89095e5cc0b)<a href="http://b.hatena.ne.jp/entry/http://qiita.com/jnchito/items/cb05bb14d89095e5cc0b" target="_blank"><img src="http://b.st-hatena.com/entry/image/http://qiita.com/jnchito/items/cb05bb14d89095e5cc0b" class="bookmark-count"></a>