vite_railsをRailsに導入してReact/Vite環境を構築

はじめに Rails7になってからjsbundling-rails が使われるようになり、esbuild/rollup/wepackなどJavaScriptをバンドルしてRailsアプリで配信する方法の選択肢は増えました。 これらを使うのも良いですが、より強力なフロントエンドツールであるViteを使うことで効率的なフロントエンド開発を行うことができます。 さらにvite_railsというgemを導入することで以前のwebpackerのようなTag HelperによるJSファイルの読み込みや、Rakeタスクassets:precompile でのViteアプリのビルドを行ってくれるようになります。 今回はvite_railsを使って、Vite + React(TypeScript)環境の構築を目指します。 Railsアプリを作成 まずは rails new でRailsアプリを作成します。