RubyMine の使い方 #JavaScript

RubyMine とは

Rails 用 IDE。
有料だが、自分の知る限りでは最強。

ちなみに姉妹製品 WebStorm の上位版という位置づけなので、HTML/CSS/JavaScript の開発にも使える。

どのへんが最強なの？

全般的に言えるのは「ちゃんと IDE になっている」ということ。
他の無料 IDE は少し特殊なことをやろうとするとターミナルでやるしかないとか、
プラグインをいろいろ入れて合わせ技で・・・ということが多々あるのだが、
RubyMine は自身でほぼ完結しており、IDE 上で実現されている。
(ターミナルでコマンド打った方が早い場合もあるが)

MVC 単位の階層表示が可能なナビゲーション。
ジャンプ機能(メソッド定義部、アクションに対応するビューファイル等)。
補完が賢く、高速。
まともなデバッガ。
データベースの閲覧と編集。
クイックヘルプ。
VCS(Subversion, Git)内蔵。
UI やキーバインドのカスタマイズ。
プラグインによる機能拡張。
REST Client 機能。

使い方

ウィンドウの構成

Project パネル

現在開いているプロジェクトのディレクトリ構造、およびデータ構造を表示する。
ここでファイルやクラスをダブルクリックすると、これに対応する内容が Editor に展開される。

Structure パネル

現在編集中のファイルの論理構造を表示する。
一覧からメソッドを選択すると、定義部にジャンプできる。

Favorites パネル

Run パネル

起動したアプリケーションのログを表示するコンソールを表示。

Debug パネル

デバッガのコントロール機能、スタックフレーム、変数ウォッチなどを表示。

Database パネル

データベースへの接続と、テーブル一覧を表示。

Changes パネル

git 等の VCS でソースを管理している場合、変更ファイルと管理下にないファイルの一覧を表示。
変更したファイルに対して diff や revert を行うことができる。

クイックヘルプ

デフォルトだとクイックヘルプのパネルが表示されていないが、View > Tool Windows > Documentation で表示できる。
別ウィンドウで表示されるのが嫌なら Floating Mode を OFF にすればよい。

カーソル下の単語を調べるには View > Quick Documentaion を選択する。
適当なショートカットキーを割り当てるか、Control キーを押しながら単語にマウスカーソル合わせることでもヘルプを閲覧できる。

モデルの E-R 図を閲覧する

Project パネル上で右クリックし、Diagrams > Show Diagram を選択。
Select Diagram Type ダイアログが表示されるので Rails Model Dependency Diagram を選択する。

表示された E-R 図は上部にあるツールバーアイコンで詳細度を調整することができる。

Migration Fields: エンティティの属性の表示を ON/OFF
System DB Fields: id や created_at などのシステム固有属性を ON/OFF

JavaScript のデバッグ

あらかじめ Chrome に機能拡張 "JetBrains IDE Support" をインストールしておくこと。

Run > Edit Configurations を選択。
＋ボタンをクリックし、JavaScript Debug > Local を選択。
以下を入力。
- Name: 適当に。
- Path: デバッグした JavaScript コードを利用する HTML ファイルを選択。
- Browser: Chrome を選択。

あとは Run > Debug で指定ブラウザが起動して HTML ファイルを表示するので、必要に応じて Editor にブレイクポイントを設定すればよい。

REST Client

Tools > Test RESTful Web Service を実行。
REST Client パネルの Request Parameters タブに入力。
- HTTP method
- Host/port
- Path
- Query string parameters
パネルの左上にある Submit request をクリック。
Response タブにレスポンス内容が表示される。
- View as XML や View as JSON で整形されたレスポンスが閲覧できる。

プラグイン

プラグインのインストールは環境設定から行えるようになっている。

Preferences/Settings > Plugins にある Browse Repositories をクリック。
インストールしたいプラグインを選択し、Download and Install する(要再起動)。

LiveEdit

Rails の erb ファイルや HTML ファイルの編集をブラウザ(Chrome)でリアルタイムに確認できるプラグイン。

準備

LiveEdit プラグインを Download and Install.
Chrome を開き、Preferences > 機能拡張を選択。
- デベロッパーモードを ON にする。
- "他の機能拡張を見る" をクリックし、"JetBrains IDE Support" をインストールし、有効にする。

使用方法

Rails の場合はアプリケーションを起動。
編集対象ファイルを開き、View > Open in Browser でこれを表示する。
- URL のドメインは localhost でないと動作しないため、0.0.0.0 等になっている場合は修正する。
View > Live Edit を ON にする。

Markdown

Markdown 記法をサポートするプラグイン。
.md ファイルを開くと Editor 下部にタブ Preview が現れるので、どのように見えるか確認できる。

Tips

Editor のフリーカーソルを無効にする

環境設定 Preferences/Settings > Editor を開き、Allow placement of caret after end of line を OFF にする。

Editor で等幅フォントを使用する(Mac)

デフォルトの設定だと日本語フォントが等幅にならない。
また Osaka-mono がなぜかフォント一覧に出てこないため、以下のようにする。

ここから Migu 1M フォントをダウンロードし、インストール。
環境設定 Preferences/Settings > Editor > Color & Fonts > Font を開き、Scheme name を Save As で複製。
フォントセレクタから Migu 1M を選択。

ファイルを素早く開く

Navigate メニュー下にある

Class...
File...
Symbol...

のショートカットを覚えておけば、キーボード操作だけでファイルを開くことができる。

デバッガ起動中に再度 Debug を実行しても、デバッガが再起動しない

デフォルトの設定だと元のデバッグセッションを残したまま新たなデバッガを起動するため、
ポートが押さえられずエラーになってしまう。
以下のように設定すればデバッグセッション 1 つを共有して再利用するようにできる。

Run > Edit Configurations でデバッグ用のコンフィグを選択。
右上にある Share と Single instance only を ON にする。

CoffeeScript のデバッグ

CoffeeScript で書いたコードをリアルタイムで JavaScript に変換し、
変換時に生成したソースマップを利用して CoffeeScript コード上でのデバッグを実現する。

ScreenCast

RubyMine 5.4 以降。
File Watcher プラグインのインストール。
Preferences/Settings > File Watcher で CoffeeScript を追加。
- sudo npm install -g coffee-script
- Program: /usr/local/bin/coffee
- Arguments: --compile --bare --map $FileName$
  - --bare: クラス、メソッドなどをグローバルに定義。
  - --map: ソースマップを生成。
- Output paths: $FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map

ブレイクは body onload 後じゃないと捕捉されないっぽいので、jQuery を使い $ -> 以降に処理を書くとよい。

Dash と連携する

Dash は有料だけどいろいろなリファレンスマニュアルを閲覧できて便利。

ここにある Dash.jar をダウンロードし、プラグインとしてインストールする。
お好みのショートカットキーを設定すれば、Editor のカーソル下にあるキーワードを Dash で検索できる。