Zenn
⚙️

Dev Containerで作る Ruby 開発環境（Prettier & Rubocop & RubyLSP対応）

2024/12/07に公開
Ruby
rubocop
devcontainer
tech

はじめに

Dev Containerは、Dockerコンテナ上で開発環境を管理できる仕組みです。
VS CodeのDev Containersを使えば、簡単にセットアップできます。

通常、ローカル環境で開発する際には、ホストOSに必要なGemやライブラリをインストールして環境を構築します。

通常の開発

一方で、Dev Containerを使用した場合の構成は次のようになります。

DevContainerを用いた開発

Dev Containerを使用するメリット

  • Rubyのバージョンをプロジェクトごとに管理
    システムに影響を与えず、プロジェクトごとに必要なRubyのバージョンを切り替えられます。

  • VS Codeの設定や拡張機能を分離
    必要な設定や拡張機能をコンテナ内にまとめ、他のプロジェクトやローカル環境への影響を防ぎます。

これらの仕組みにより、開発環境の再現性が高まり、効率的かつ柔軟な開発が可能になります。

この記事では、Dev Containerを使って以下の環境を構築する手順を解説します。

  • Ruby開発環境
  • コード整形・品質チェック（Prettier、Rubocop、RubyLSP）環境

環境構築手順

準備

ファイルを用意

プロジェクトルートに以下の構成を作成し、必要な設定を行います。

/.devcontainer/
  ├── devcontainer.json
  └── Dockerfile
/.gitignore
/package.json
/yarn.lock
/Gemfile
/Gemfile.lock
devcontainer.json
{
  "name": "Ruby",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind",
    "source=${localWorkspaceFolderBasename}_node_modules,target=/workspace/node_modules,type=volume",
    "source=${localWorkspaceFolderBasename}_bundle,target=/workspace/vendor/bundle,type=volume"
  ],
}
Dockerfile
FROM ruby:3.1

WORKDIR /workspace

RUN apt-get update -qq && apt-get install --no-install-recommends -y \
    curl \
    openssh-client \
    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
    && apt-get install -y nodejs \
    && rm -rf /var/lib/apt/lists/*

RUN npm install -g yarn

COPY ../package.json ../yarn.lock ./
RUN yarn install

COPY ../Gemfile ../Gemfile.lock ./
RUN bundle install --path 'vendor/bundle'

COPY . .
.gitignore
/node_modules
/vendor
package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {},
  "scripts": {},
  "author": "",
  "license": "ISC"
}
Gemfile
source 'https://rubygems.org'

Dev Containerの起動

  1. Dev Containerを起動
    VS Codeの左下「><」アイコンをクリックし、「Remote-Containers: Reopen in Container」を選択して起動します。

  2. コンテナ内で確認
    Node.js、Yarn、Ruby、Bundlerがインストールされていることを確認します。

node -v
v20.0.0

yarn -v
1.22.19

ruby -v
ruby 3.1.6p260

bundle -v
Bundler version 2.3.27

GitHubへのSSH接続設定

コンテナ内からGitHubリポジトリにSSHでアクセスできるよう、Using SSH keys にしたがって設定します。
設定後、コンテナ内のターミナルで ssh -T git@github.com を実行して接続確認を行います。

VS Code設定

VS Codeの基本設定

  1. devcontainer.jsonにVS Codeの設定を追加します。

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "settings": {
        "editor.tabSize": 2,
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
      }
    }
  }
}

  2. Dev Containerを再ビルド（Rebuild Container）して、設定を反映させます。

Prettierの設定

  1. yarn add -D prettier でPrettierをインストールします。

  2. 次に、devcontainer.jsonにPrettierの設定と.prettierrc.jsonを新規作成/設定追加します。

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode"
      ],
      "settings": {
        ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      }
    }
  }
}
    .prettierrc.json
    {
  "semi": true,
  "singleQuote": true
}

  3. Dev Containerを再ビルド（Rebuild Container）して、設定を反映させます。

  4. Prettierの動作確認

    次のコードを保存すると、自動的に整形されることを確認します。

    example.js
    const example=()=> {  
  console.log("Hello");  
}

    ↓

    example.js
    const example = () => {
  console.log('Hello');
};

RuboCopの設定

  1. bundle add rubocop --group "development,test" --require false でRuboCopをインストールします。

  2. bundle add ruby-lsp --group "development" --require false でRuby LSPをインストールします。

  3. devcontainer.jsonにRuboCopの設定と.rubocop.ymlを新規作成/設定追加します。

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "extensions": [
        ...
        "Shopify.ruby-extensions-pack"
      ],
      "settings": {
        ...
        "editor.codeActionsOnSave": {
          "source.fixAll": "explicit"
        },
        "[ruby]": {
          "editor.defaultFormatter": "Shopify.ruby-lsp"
        },
        "ruby.lint": {
          "rubocop": true
        }
      }
    }
  }
}
    rubocop.yml
    AllCops:
  TargetRubyVersion: 3.1
  NewCops: enable
  DisplayCopNames: true

  4. Dev Containerを再ビルド（Rebuild Container）して、設定を反映させます。

  5. RuboCopの動作確認
    次のコードを保存すると、VS Code上で「Naming/MethodName: Use snake_case for method names.」というエラーが出力されることを確認します。

    example.rb
    # frozen_string_literal: true

def testMethod
  puts 'Hello, world!'
end

以上で、Dev Containerを使用したRuby開発環境とコード整形・品質チェック（Prettier、Rubocop、RubyLSP）環境の構築が完了しました。

サンプルコード

以下のGitHubリポジトリで確認できます。
https://github.com/yuuu-takahashi/template-ruby

参考資料

https://envader.plus/article/305
https://future-architect.github.io/articles/20231206a/
https://code.visualstudio.com/docs/devcontainers/containers

Discussion