読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

Mac(El Captain) に Sublime Text3 で Ruby on Rails の開発環境を構築する


今年の11月にアクトインディに入社した namikata です。今年で 31 歳になります。今まで、エンジニアとして仕事はしたことはないのですが(プログラミングはプライベートで独学)、未経験でも頑張ることを約束して、アクトインディで働くことになりました。

アクトインディ の運営する 子どもとお出かけ情報サイト いこーよ は Ruby on Rails をフレームワークで採用しています。当然、未経験ですから Ruby の開発環境なんて整えたことはありません。 Vim も一般的なコマンドを知っている程度で、ショートカットなんてほぼ分からない。。。残された選択肢は勢いでライセンスを買った Sublime Text3 しかないということで Advent Calender 3日目は Sublime Text3 で Ruby on Rails を開発する環境の構築を事例を交えて紹介したいと思います。

この記事では、主に Sublime Text3 のプラグインをメインに紹介します。紹介する環境を構築すると、以下のことが Sublime Text3 で出来るようになります。

内容 プラグイン
tabによる Ruby の入力補完 SublimeCodeIntel
メソッドジャンプ Ctags
Ruby の文法チェック SublimeLinter
実装ファイル と spec ファイルをショートカットで呼び出し RubyTest
Sublime Text3 で spec テストの実行 RubyTest

入力補完、メソッドジャンプ、実装とテストファイルの切り替えは、どの Rails プロジェクトでもベースとなる機能だと思うので、この 3点 を整えてから、各プロジェクトの環境に沿って、他のプラグインの導入を検討していくといいんじゃないでしょうか。

プラグインを導入した Rails プロジェクトの開発方法

7AqHzioAPZ-compressor.gif

  1. プロジェクトフォルダに terminal で移動
  2. subl . でプロジェクトを開く
  3. Command + p で改修を行うファイルを開く
  4. Command + . で spec ファイルを開く
  5. Command + Option + 2 で横2画面に分割(実装ファイルとテストファイル用)
  6. Control + 1 で画面1に移動
  7. Control + shift + 2 でテストファイルを画面2に移動
  8. Control + 1 or 2 で画面を移動しながら、ごにょごにょ開発したら spec ファイルで Command + Shift + T や Command + Shift + R でテストを確認する

自分は今はこのような使い方をしています。画面分割はどのように分割すると便利なのか模索中。

環境

環境
Mac OS 10.11 El Captain
ruby 2.1.0

事前準備

以下 Sublime Text 3 での Ruby on Rails の開発環境を整えるための事前準備になります。

  1. Sublime Text 3 のインストールと Package Control のインストール
  2. Homebrew をインストール http://brew.sh/ からインストール手順を確認
  3. homebrewの確認 brew doctor, brew update
  4. terminal から subl で sublime text を起動できるように設定

MAC の環境構築でつまづいた点は、以下のブログでもちょくちょく記事にしたりしているので、参考にどうぞ http://takanamishi.hatenablog.jp/

Sublime Text 3 での Ruby on Rails の開発環境構築

tabによる Ruby の入力補完( SublimeCodeIntel )

途中まで文字を入力すると、メソッドの候補などを表示してくれるプラグインです。

Vu1G5cpMmT.gif

インストールと設定

  1. Command + Shift + p で SublimeCodeIntel と入力してインストール

動作確認

  1. 新規ファイルを開き、 Command + Shift + p で拡張子に ruby を選択
  2. "a".sp と入力し split などのメソッドが補完されることを確認

注意点

SublimeCodeIntel は高機能なので、メソッドジャンプ機能もあります。けど、ファイル数が多いプロジェクトだと、メソッドジャンプは重すぎて使えないので Ctags を併用します。

Github リンク

Kronuz/SublimeCodeIntel

メソッドジャンプ( Ctags )

メソッドの定義元にジャンプしてくれるプラグインです。

Cgu4FTtKto.gif

インストールと設定

  1. brew install ctags で Mac に Ctags をインストール
  2. Command + Shift + p で ctags と入力してインストール
  3. メソッドジャンプを利用したいプロジェクトに移動して ctags -R -f .tags コマンドにて .tags ファイルを作成する
  4. ( git でプロジェクトを管理している場合) ctags -R -f .tags コマンドを実行すると .tags ファイルが作成されます。 .tags ファイルが git の対象ファイルに含まれてしまうので .gitignore に追加するか .gitignore を汚したくなければ .git/info/exclude に書いて、ファイルを git の管理対象外に設定します。

動作確認

  1. メソッドにカーソルがいる状態で Control + t -> Control + t と連続して入力
  2. Control + t -> Control + b で元の場所に戻ってこれることを確認

Github リンク

SublimeText/CTags

Ruby の文法チェック( SublimeLinter )

コードの文法をチェックしてくれるプラグインです。使用していない変数は黄色。文法上誤りがあれば赤。といった形で文法をチェックしてくれます。

YTMgFBFPNC.gif

インストールと設定

  1. Command + Shift + p で SublimeLinter と入力してインストール
  2. Command + Shift + p で SublimeLinter-ruby と入力してインストール

動作確認

  1. 新規ファイルを開き、 Command + Shift + p で拡張子に ruby を選択
  2. arr = ['aaa', 'bbb'] と記述し、行の左側に黄色い丸が表示されることを確認
  3. arr = ['aaa', 'bbb' とし、行の左側に赤い丸が表示されることを確認

Github リンク

SublimeLinter/SublimeLinter3

Sublime Text3 で spec テストの実行( RubyTest )

Sublime Text3 で spec テストの実行を行うことができます。 terminal を行き来しなくなるので、とても楽になります。

OMpInJlElZ.gif

インストールと設定

  1. Command + Shift + p で RubyTest と入力してインストール

動作確認

  1. Railsチュートリアルのサンプルを手元にダウンロード railstutorial/sample_app_rails_4 ※ ruby2.0.0 のバージョン前提のプロジェクトなので rbenv とかで上手く ruby のバージョンを切り替えてください。
  2. 環境を整えたら プロジェクトのフォルダに移動し terminal で subl . でプロジェクトを開く
  3. Command + p で user.rb ファイルを開く
  4. Command + . で user_spec.rb が開くことを確認
  5. Command + Shift + T テストが実行されることを確認

注意点

  • binding.pry は無視されるので、使いたい時は terminal でテストを実行する
  • テストファイルは spec フォルダ配下に入っていないと動作しません

Github リンク

maltize/sublime-text-2-ruby-tests

最後に

以上で、ベースとなる Rails 環境の構築手順はお終いです。環境整えるだけの記事ですが、ストレスなく開発できる環境ができた方が開発楽しめますもんね! Rails の開発環境を整えたお陰で Sublime text にちょっと愛着が湧いてきました。これから開発頑張っていきたいと思います。

アクトインディでは、開発を楽しみたいエンジニアをいつでも募集しています^^ 少しでも興味が沸いたら ぜひ遊びに来てください