RailsアプリにVue.jsをモノリシックに導入するための準備

Vue.jsをRailsアプリケーションに統合するプロセスは、効率的なフロントエンド開発とリッチなユーザーインターフェースを実現するための重要なステップです。このガイドでは、Railsプロジェクトの作成からVue.jsの導入までの一連のステップを丁寧に解説します。特に、jsbundling-railsのセットアップ、Viteの導入、Node.jsバージョンの管理、そしてapp/javascriptディレクトリの活用に焦点を当てて説明していきます。
なお、以下の完全版も参考にしてください。

1. Railsプロジェクトの作成

まずは新しいRailsプロジェクトを作成します。ターミナルで以下のコマンドを実行してください。

rails new myapp --database=postgresql
cd myapp

ここではPostgreSQLをデータベースに選択していますが、プロジェクトの要件に応じて変更してください。

2. jsbundling-railsのセットアップ

jsbundling-railsは、JavaScriptのビルドシステムをRailsに統合するためのGemです。このGemを使って、Railsアプリケーション内でJavaScriptのビルドプロセスを管理します。

Gemfileに以下の行を追加してください。

gem 'jsbundling-rails'

変更を保存した後、ターミナルで以下のコマンドを実行し、Gemをインストールします。

bundle install

3. ViteとVue.jsのインストール

a. Viteの導入

Viteは、現代的なフロントエンドツールで、Vue.jsプロジェクトの開発において高速なホットリロードやビルド最適化を可能にします。
Gemfileに以下の行を追加してください。

gem 'vite_rails'

次に以下のコマンドを実行してください。

bundle exec vite install

※以下のコマンドではエラーが出るので注意してください。

bundle exec rails vite:install

b. Vue.jsのインストール

Vue.jsのインストールには、プロジェクトのルートディレクトリで以下のコマンドを実行します。ここでは、Vue 3を指定するためにnpm install vue@3を使用します。

npm install vue@3

c. 補足1: 別のコマンド

以下のコマンドでも大丈夫な場合はあるようです。

npm install vue@next

ただ、私は以下のエラーログが出たためバージョンを指定しました。

npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in: /home/kengo/.npm/_logs/2024-03-07T02_47_02_927Z-debug-0.log

d. 補足2: 警告メッセージ対処

npm install vue@3を実行すると、以下のような警告メッセージが表示されるかもしれません。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.12.1',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.1', npm: '9.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.1.5',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.1', npm: '9.8.0' }
npm WARN EBADENGINE }

added 16 packages, and audited 49 packages in 3s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これはNode.jsのバージョンが一部のパッケージの要求と一致しないためです。Vueはインストールされていますが、最適な開発体験を得るためにはNode.jsのバージョンを更新することが推奨されます。

4. Node.jsのバージョン管理

Node.jsのバージョンが要求と一致しない場合、NVM（Node Version Manager）を使用してバージョンを管理し、アップグレードすることができます。NVMのインストール方法は、NVMのGitHubページに詳しい指示があります。

Node.jsの最新バージョンをインストールするには、以下のコマンドを実行します。

nvm install node # 最新バージョンをインストール
nvm use node # 使用するバージョンを切り替え

5. app/javascriptの使用

もしapp/frontendディレクトリが自動で作成されていない場合、app/javascriptディレクトリをそのまま使用することができます。このディレクトリ内にVueコンポーネントを配置し、Railsのビューから参照することによって、Vue.jsを利用することが可能です。

a. エントリポイントの設定

app/javascript/packs/application.jsファイル（またはViteを使用している場合は適切なエントリポイントファイル）にVueアプリケーションのインスタンスを作成し、Vueコンポーネントをマウントします。

import { createApp } from 'vue';
import App from '../components/App.vue';

const app = createApp(App);
app.mount('#app');

b. RailsビューからのVueコンポーネントの呼び出し

Railsのビューファイル（例えば、app/views/layouts/application.html.erb）に以下のように記述して、Vueアプリケーションを読み込みます。

<div id="app"></div>
<%= vite_javascript_tag 'application' %>

※Vue.jsのような大きめのライブラリをimportmapで直接扱うことは推奨されていません。これは、importmapが主に小規模なライブラリや直接ブラウザで実行可能なJavaScriptモジュール向けに設計されているためです。

ここまでの準備が整えば、Railsアプリケーション内でVue.jsを活用する準備は完了です。開発プロセス中にVueコンポーネントを追加または更新することで、リッチなフロントエンドの構築が可能になります。

c. 補足: エントリポイントの選定

エントリポイントの設定時点で、私のアプリにはapplication.jsが以下の3種ありました。
app/javascript/entrypoints/application.js
app/javascript/application.js
app/javascript/controllers/application.js
結論から言うと、app/javascript/entrypoints/application.jsを使用することが一般的です。ここでは、Vue.jsのセットアップにおけるエントリポイントの選択について説明します。

c-1-1. app/javascript/entrypoints/application.js

このファイルが存在する場合、それはViteやWebpackなどのビルドツールが特定のエントリポイントを想定している可能性があります。特にViteやjsbundling-railsを使用している場合、このentrypointsディレクトリがVue.jsアプリケーションや他のJavaScriptフレームワークのエントリポイントの標準的な場所となることが多いです。

c-1-2. app/javascript/application.js

これは、RailsがWebpackerを使用していた時代の標準的なエントリポイントファイルです。Rails 7以前でWebpackerを使用しているプロジェクトでは、このファイルがJavaScript（またはフロントエンドフレームワーク）のエントリポイントとして機能します。

c-1-3. app/javascript/controllers/application.js

このファイルは、StimulusJSなどのフレームワークで使われることがあります。StimulusJSは、Railsとよく組み合わせて使用される小規模なJavaScriptフレームワークで、ページ内の動的な振る舞いを制御するために使われます。このファイルは、Vue.jsのエントリポイントとしては一般的ではありません。

c-2: Vue.jsのエントリポイントとして推奨される選択

Vue.jsをRailsアプリケーションに統合する場合、一般的にはapp/javascript/entrypoints/application.jsをエントリポイントとして使用することを推奨します。この方法は、Vueコンポーネントやその他のJavaScriptライブラリを効率的に管理し、ビルドするためのクリアな構造を提供します。

参考リンク

次回記事: