みなさんこんにちわ。
前回、以下の記事を書かせてもらったJJと申します。
とらのあな開発室ご用達の開発ツール紹介 - 虎の穴開発室ブログ
とらのあな開発室ではどのようなツールを使っているのか、
ということで興味を持っていただいたのですが、あるひとつの疑問がTwitterに書かれておりました。
『え、とらのあなってVSCode（VisualStudioCode）使ってないの！？』
そうなんです。
VSCodeを使っている人がこれまでいませんでした。
なぜVSCodeを使っていなかったのか
理由としてはRails経験者は皆RubyMineを使っており、
新しくRailsを始めたばかりのメンバーは他言語でも使っていたAtomをそのまま使っていたからです。
VSCodeを始めようと思った理由
しかし、実はRailsの実装に最適なのはVSCodeであるという話を耳にしまして、
加えて無料の開発ツールなのに使わないのはマズイのではないか！？ と思いAtomからの移行を決意しました。
なにせ、
「ブレークポイントが使える」
とのことで、利用しない手はないと思いました。
今回はRails環境にVSCodeを導入し、ブレークポイントを使えるようにするまでの手順と、
躓いたポイントなどをご紹介いたします。
前提環境
- MacOS
- ruby 2.5.1
- Rails 5.2.1
2. 拡張機能の追加
左にあるサブメニューの四角マークから、拡張機能の追加を行います。
ブレークポイントを使用する上で必要最低限なものとしては、Rubyの拡張機能だけで十分です。
日本語プラグインは僕含め英語が苦手な人に向けてです。
3. Gemの追加
gem 'ruby-debug-ide' gem 'debase'
上記ふたつのGemを追加します。
その後、bundle installを実行しましょう。
$ bundle install
エラーで動かない場合はエラー文をよく読んで解決しましょう。
※yarnやnokogiriのインストールが必要、など様々
4. Railsを選択してVSCodeの設定
最も重要な部分で、構成ファイルの生成時にRubyを選択する必要があります。
一度Rubyを選択せずに構成ファイルである「launch.json」を生成した場合、
useBundlerというオプションが認識されずブレークポイントが止まらない状態になります。
恐らく他にも解決方法はあると思うのですが、
ここでは上記のやり方で解決しました。
5. 構成ファイルの設定変更
手順4で作られたlaunch.jsonの記述を変更します。
Rails serverの部分を以下のように変更しましょう。
{
"name": "Rails server",
"type": "Ruby",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "bin/rails",
"args": [ "server" ],
"showDebuggerOutput": true,
"useBundler": true
},
重要なのはuseBundlerで、Bundlerを用いてるRails環境であれば必須になります。
6. デバック実行
まずはコンソール上で以下を実行します。
$ rdebug-ide --host 0.0.0.0 --port 1234 -- bin/rails s
すると、
Fast Debugger (ruby-debug-ide 0.6.1, debase 0.2.2, file filtering is supported) listens on 0.0.0.0:1234
と出力されると思うので、その後に左のサイドバーにある虫さんアイコンからデバッグタブを開き、
「Rails server」の構成を選択して実行ボタンをクリックします。
これで、ブレークポイントが動くはずです。
問題
上記の手順を踏んでいる間に詰まった部分があるので紹介します。
Gemを追加してbundle installをしたはずなのに、いざデバッグ起動すると以下のエラーが出ました。
rdebug-ide: command not found
追加したはずなのにrdebug-ideを読み込んでくれません。
こういう時は単発インストールしましょう。
$ gem install ruby-debug-ide
これで動くはずです。
終わりに
VusualStudioやEclipseのような統合開発環境と同じように、
ブレークポイントが利用できることに感動したので社内メンバーにもゴリ押ししました。
その布教の成果もあり、今ではVSCodeが増えてとらのあな開発室（Rails開発者のみ）におけるRails開発ツール利用は以下のような割合になりました！
めでたしめでたし！
虎の穴ではJavascriptエンジニアをはじめとして一緒に働く仲間を絶賛募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
www.toranoana.jp
