🚀

【Vite Rails】RailsアプリにViteを導入したい

2022/08/01に公開

Rails

どうもフロントエンドエンジニアのoreoです。

RailsアプリへのVite導入を調査した際、Vite Railsなるもの出会いました。この記事では、RailsミニアプリにVite Railsを導入してみたいと思います。

1 Vite Railsとは？

Vite Railsは、RailsアプリケーションとViteを統合してくれるライブラリーです。ドキュメントには、👇のように記載されており、Vite Railsは、webpackに対するwebpackerみたいなものとのことです。

vite_rails provides similar functionality as webpacker does for webpack, without all the configuration overhead and dependencies.

参照：https://vite-ruby.netlify.app/guide/introduction.html#introduction

噛み砕くとRailsアプリケーションで簡単にVite.jsを利用できる便利ツールって感じですかね。

Viteに関しては公式(👇)をご確認ください。一言で言うと超絶速いビルトツールです。Vue.js作者のEvan You氏によって開発されました。

https://ja.vitejs.dev/guide/

2 Vite Railsを触ってみる

2-1 環境

ruby 3.1.2
node 14.19.1
Bundler 2.3.18
npm 8.15.0

2-2 簡単なrailsアプリを作成する

プロジェクトフォルダを作成して移動します。

mkdir vite_rails_app
cd vite_rails_app

Gemfileを作成して、bundle installします。

echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '7.0.1'" >> Gemfile
bundle install

railsアプリを作成します。

bundle exec rails new .

railsアプリケーションを起動します。

bundle exec rails s

http://localhost:3000にアクセスすると下のような画面が出てきます。

2-3 Viteのインストール

Gemfileにvite_railsを追加します。

gem 'vite_rails'

続いてvite_railsをインストールします。

bundle install
bundle exec vite install

この段階でアプリケーションに以下変更が加えられます。

・Adds the bin/vite executable to start the dev server and run other commands
・Installs vite and vite-plugin-ruby
・Adds vite.config.ts and config/vite.json configuration files
・Creates a sample application.js entrypoint in your web app
・Injects tag helpers in the default application.html.erb view layout

参考：https://vite-ruby.netlify.app/guide/#setup-📦

2-4 サンプルページ作成

viewファイルの作成などを行います。

rails g controller hello index

railsアプリケーションを起動します。

bundle exec rails s

http://localhost:3000/hello/indexにアクセスするとサンプルページが生成されています。

consoleには、Vite ⚡️ Rubyが出力されています。

2-5 HMR(Hot Module Replacement)を確認する

HMRとは、ソースコード内のCSS/JSに変更があった場合に、フルリロードすることなく、差分をブラウザに適用してくれる機能です。ここでは、ViteでのHMRを確認したいと思います。

まず、CSSを適用させるため、app/javascript/entrypoints/application.cssを作成します。

h1 {
    background-color: gray;
 }

また、app/views/layouts/application.html.erbを以下のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <title>ViteRailsApp</title>
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
    <%= vite_stylesheet_tag 'application' %>
  </head>

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

ここでTag Helpersと呼ばれるvite_railsが用意しているタグをテンプレートファイルに追加しています。ここでは、下記3つのTag Helpersを追加することで、JSファイルとCSSファイルをテンプレートで読み込み、HMRが可能となります。

vite_client_tag
- HMRを可能にしてくれるタグ。
vite_javascript_tag 'application'
- app/javascript/entrypoints/application.jsを読み込みこむタグ。
vite_stylesheet_tag 'application'
- app/javascript/entrypoints/application.cssを読み込みこむタグ。

続いて、テンプレートファイルでHMRを機能させるために、pluginをインストールします。

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 })
  ],
})

それでは、HMRを確認してみましょう！railsアプリケーションを起動します。

bundle exec rails s

また、viteのdev serverを起動します

bin/vite dev

HMRがサクサク機能してます！

jsファイルを編集した時

cssファイルを編集した時

テンプレートファイルを編集した時

2-6 バンドルしてみる

バンドルは、以下コマンドで実行できます。

bin/vite build

実行すると、public/vite-dev/assets配下にバンドルファイルが出力されています。

Vite Railsでは、エントリーポイントがデフォルトでapp/frontend/entrypointsに設定さており、その配下にあるファイルがバンドルされます。Viteで、multiple entrypointsの対応をするには、いくつか設定が必要ですが、Vite Railsはよしなにやってくれるみたいです。

3 最後に

Vite Rails如何でしょうか？気軽にRailsアプリにVite導入試したい場合には、いいツールですね。ただ、本格的に導入するとなると、Vite RailsがViteのどういった設定を肩代わりしているのかを確り理解し、保守性を検討した上で、決めた方が良さそうかと思いました。