先生と生徒の会話形式で理解しよう

生徒

「Railsの勉強を始めたくて、エディタはVS Codeがいいって聞いたんですが、どうやって準備したらいいんですか？」

先生

「とても良いスタートですね。VS Codeは初心者にも使いやすくて、拡張機能を入れるだけでとても便利になりますよ。」

生徒

「どんな拡張機能を入れればいいんですか？あと、Rubocopとかフォーマッターとかも気になります……」

先生

「では、Railsの開発に必要なVS Codeの基本設定を、初心者向けにひとつずつ解説していきましょう！」

1. VS Codeとは？

Visual Studio Code（ビジュアルスタジオコード）は、無料で使えるプログラミング用のエディタです。初心者でも直感的に操作でき、拡張機能を使えばより便利にカスタマイズできます。

RubyやRailsの開発にも向いており、最初にインストールしておくと非常に役立ちます。

2. Rails初心者におすすめの拡張機能

拡張機能とは、VS Codeに追加できる「便利機能パック」のようなものです。次の拡張機能は特におすすめです。

Ruby：Rubyの文法チェックや補完機能が使えるようになります
Rails：Railsの構文に対応し、ファイルを簡単に見つけられるようになります
Solargraph：コードの候補や説明を表示してくれるAIのようなもの
Rubocop：書き方のルール違反を自動で教えてくれる警察のような機能
VSCode Icons：フォルダやファイルにアイコンをつけて見やすくしてくれる

拡張機能は、左側の四つ葉マークの「拡張機能」アイコンから検索して追加できます。

3. Rubocopとは？自動でコードをチェックしてくれるツール

Rubocop（ルボコップ）は、Rubyのコードがルール通りに書かれているかチェックしてくれるツールです。学校でいうと、先生が「この書き方はちょっと直そうね」と優しく指摘してくれるイメージです。

たとえば、以下のようなコードがあったとします。


def hello 
puts "こんにちは"
end

Rubocopは「インデントがずれてますよ」「スペースが抜けてますよ」と教えてくれます。

4. RubocopをVS Codeで使えるようにする設定

Rubocopを使うには、まずターミナルで次のようにGemを追加します。


bundle add rubocop
bundle install

その後、.rubocop.yml という設定ファイルをプロジェクトのルートに作成します。


AllCops:
  TargetRubyVersion: 3.2
  NewCops: enable
Layout/LineLength:
  Max: 120

これでRubocopがコードチェックしてくれるようになります。

5. フォーマッター（Formatter）とは？

フォーマッターは、コードをきれいに整えてくれるツールです。人によって書き方が違うと、読みづらくなりますよね？フォーマッターを使えば、自動で見やすく整えてくれます。

VS Codeの設定画面で、「フォーマッター」を検索し、rubocopをフォーマッターに指定することで、自動整形できます。

また、保存時に自動で整形する設定もおすすめです。


"editor.formatOnSave": true

6. デバッグ設定とは？

デバッグとは、プログラムの中にある「間違い（バグ）」を見つけて直すための作業です。VS Codeでは、デバッグ用の設定をしておくと、処理の流れを止めたり、変数の中身を確認したりできます。

まず、.vscodeフォルダの中にlaunch.jsonという設定ファイルを作ります。


{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Rails",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": [
        "server"
      ]
    }
  ]
}

これで、左側の「虫マーク」を押してデバッグを開始できるようになります。

7. VS Code全体の設定例（初心者向け）

以下は、初心者向けのおすすめ設定です。settings.jsonというファイルで次のように書いておくと便利です。


{
  "ruby.format": "rubocop",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

これだけで、保存するたびに自動で整形とチェックが行われます。

8. VS Codeで日本語が文字化けするときは？

ファイルの文字コードが合っていないと、日本語が「文字化け」してしまうことがあります。そんなときは、画面右下の「UTF-8」と書かれた部分をクリックし、「エンコーディングを変更」→「UTF-8で再読み込み」を選べば直ります。

9. 拡張機能や設定が反映されないときの対処法

うまく動かないときは、次の点を確認しましょう。

拡張機能が正しくインストールされているか
VS Codeを再起動したか
プロジェクトのルートフォルダを開いているか
Gemfileに必要なgemが入っているか

設定ファイルは、タイポ（スペルミス）でも動かなくなるので注意が必要です。

まとめ

VS CodeをRails開発に最適化するためには、拡張機能の追加、Rubocopの設定、フォーマッターの適切な導入、そしてデバッグ環境の整備といった複数のステップを理解して進めることが大切です。Rails開発ではHTML・CSS・JavaScript・Ruby・データベースなど多くの技術が関わるため、エディタの使いやすさが学習効率にも大きく影響します。VS Codeは初心者でも扱いやすく、拡張機能を追加するだけで高度なコード補完やlint、フォーマット、ファイル探索などが可能になり、学習をスムーズに進められる点が魅力です。とくにRailsでは、モデルやコントローラ、ビューなど複数のファイルが連動して動くため、VS Codeの拡張機能を活用して目的のファイルに素早く移動できる環境を整えておくと開発効率が一気に向上します。また、Rubocopはコードの品質と一貫性を保つために欠かせない存在で、Rubyの書き方の基準を自然に身につけることができます。初心者のうちは多少厳しく感じても、エラーメッセージに従って修正を繰り返すことで、正しいコードスタイルを習得できるというメリットがあります。さらにフォーマッターを設定しておけば、コードを保存するだけで美しい書き方に自動整形され、読みやすさやメンテナンス性が格段に向上します。Railsではコード量が増えてくるため、早い段階からきれいなコードを書く習慣を身につけることが大切です。デバッグ設定も非常に重要で、コードの流れを追いながら問題箇所を発見できるようになると、バグを自力で解決する力が身につきます。VS Codeのデバッガを使えば、変数の中身を視覚的に確認したり、処理を途中で止めたりすることができるため、理解が深まり、初心者でも安心して学習を進められます。最後に、Rails開発環境としておすすめのVS Code設定のサンプルを以下にまとめておきます。自分の環境に合わせてカスタマイズしながら、使いやすい開発環境を作り上げていきましょう。

■ VS CodeのRuby・Rails向け設定サンプルコード


{
  "ruby.format": "rubocop",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.insertFinalNewline": true,
  "editor.tabSize": 2,
  "ruby.lint": {
    "rubocop": true
  },
  "solargraph.diagnostics": true
}

この設定例では、Rubocopをフォーマッターとして利用し、保存するたびに自動でコードが整形されるようになっています。また、Solargraph拡張による高度な補完も有効になっているため、Railsプロジェクトが非常に書きやすくなります。VS Codeは細かい設定が多いですが、少しずつ触って慣れることで自分にとって最適な環境に仕上げることができます。Railsはファイル構成が広く、逐一フォルダを移動するだけでも時間がかかるため、拡張機能と設定を活用して省力化するメリットは非常に大きいです。また、デバッグ設定（launch.json）を使えばRailsサーバーをVS Codeから直接起動し、コードの流れを追いながら問題点を見つけることも可能です。こうしたツールを使いこなすことで、初心者でも効率よく開発を進められるようになります。日本語の文字化け対策なども知っておくと、トラブルに対応できる場面が広がるため、日常的に使う機能として覚えておく価値があります。 Rails学習では環境構築に時間がかかって挫折する人も多いですが、VS Codeを正しく設定しておけばコードを書くことに集中でき、学習効率も驚くほど向上します。今回紹介した拡張機能や設定を使いこなしながら、自分のペースでRuby・Rails開発の理解を深めていきましょう。

先生と生徒の振り返り会話

生徒：「VS Codeってただのエディタだと思っていたんですが、Rails専用にこんなに便利にできるんですね！」

先生：「そうなんです。拡張機能や設定を使うだけで、開発体験がまったく違ってきますよ。」

生徒：「Rubocopのチェックが最初は厳しく感じたんですが、確かに直すとコードが読みやすくなりました。」

先生：「書き方の癖を早いうちに直せるのは大きなメリットです。良いコードを習慣化できますからね。」

生徒：「フォーマッターで保存するだけで綺麗になるのも便利です！手作業で揃えるのは大変でした…」

先生：「効率的に整形できると、コードに集中できますよ。Railsはファイル数も多いので、なおさら役立ちます。」

生徒：「デバッグの設定も使ってみたいです。変数の中身が見られたら理解しやすそう！」

先生：「その通りです。動きを追えるようになると、バグを自分で直せる力がぐっと伸びますよ。」

生徒：「今回教えてもらった設定をそのまま使って、Railsの学習を本格的に始めてみます！」

先生：「良い心構えですね。一緒に良い開発環境を整えて頑張っていきましょう。」