最近、フロントエンドは Vite で開発するのが主流になっていると思いますが、Railsの場合、なあなあでそのまま来ている場合も多いかなと思います。

開発体験の改善ができないかということを考える機会があり、RailsでViteを導入する際の手順を vite_railsを利用して確認してみました。

Viteとは

従来と比較して、より高速に動作するフロントエンドビルドツールです。

以下のような特徴があります。

開発時にはバンドルが不要なので、開発サーバーの起動が早い
Hot Module Replacement（HMR）により、修正を画面の再描画なしで適用できる
HMRの特性により、修正による描画までの速度がモジュール数に依存しにくい

RailsにViteを導入する

RailsにViteを導入する際に、自前で導入するということもできますが、やや煩雑な作業が発生するかと思います。

そこで、諸々をよしなにやってくれる vite_rails というGemを使って導入しようと思います。

vite-ruby.netlify.app

Railsのプロジェクトを作成する

本当は既存のプロジェクトへの適用をしたいところですが、今回は、Railsのプロジェクトを作成します。

ついでに、最近流行りのTypeScriptも導入しておきます。

$ rails new vite_rails_example --webpack=typescript

作成したら、一旦 git commit しておきます。

$ git commit --allow-empty
$ git add .
$ git commit

vite_rails を導入する

次は、 vite_rails gemを導入します。

gem 'vite_rails'

$ bundle install
$ bundle exec vite install

次に、 application.html.erb を書き換えます。
とはいえ、ほぼほぼ適用済みなので、整理だけします。

<!DOCTYPE html>
<html>
  <head>
    <title>ViteRailsExample</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= vite_client_tag %>
    <%= vite_typescript_tag 'application' %>
    <%= vite_stylesheet_tag 'application' %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

p {
  color: red;
}

Hot Module Replacement できるようにプラグインを導入する

次に、Hot Module Replacement（HMR）ができるように、プラグインを導入しておきます。

$ yarn add -D vite-plugin-full-reload

プラグインを適用するために、vite.config.ts を書き換えます。

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from 'vite-plugin-full-reload'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 100 }),
  ],
})

適当なControllerを生成して試してみる

適当なControllerを作成して、試してみます。

$ bundle exec rails g controller home index
$ bundle exec rails s
$ bin/vite dev

以下のような形で、HMRによりブラウザでリロードなどを挟まずにサクッと反映されます。

まとめ

新規作成したRailsプロジェクトに、 vite_rails を用いて Viteを導入して、Hot Module Replacement ができるようにしました。

本番への適用などまで考えると、設定などをしっかり見ていく必要がありそうですが、とりあえず導入するというところまでであれば、かなり簡単にできそうですね。

What is it, naokirin?

Typescript + vite_rails で Rails に Vite を導入してみる（Hot Module Replacementまで）