webpackerを使ってRuby on Rails 6.0とVue.jsを連携する方法【フロントエンド編】

2019.11.10

フロントエンドにVue.jsを使う場合、バックエンドに使うMVC型Webフレームワークは、何がよいのか、いろいろと試してみたところ、Ruby on Rails 6.0から正式に採用されたwebpacker（Railsによるwebpackとyarnのラッパー）による連携が、最も簡単で、連携の効果も申し分ないという結論に達しました。

といっても、 客観的に見れば、Vue.js との連携は、PHPフレームワークのLaravelの方が先を行っているのかもしれません。あとは好みの問題となってしまいますが、以下、webpackerを使ってRuby on Rails 6.0とVue.jsを連携する方法を簡単にまとめてみました。

スポンサーリンク

Rubyの最新バージョンにアップデート

Rails 6.0から、Rubyのバージョンは2.5以上が必須となりました。rbenvやRVMを利用して複数バージョンのRubyが使えるなら、できれば現時点でのRubyの最新版2.6.5をビルドしておくとよいでしょう。
以下、rbenvを使ったアップデート方法。

cd ~/.rbenv 
git pull 
cd ~/.rbenv/plugins/ruby-build 
git pull 
rbenv install 2.6.5 
rbenv global 2.6.5

Rails 6.0のインストールとプロジェクトの作成

Rails 6.0以降はyarnが必須となりましたので、これも前もってインストールしておくとよいでしょう。Ubuntu/Debian系のディストロであれば、以下の一連のコマンドを実行すれば最新版のyarnがインストールできます。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 
sudo apt install yarn

Railsの現時点での最新版は、6.0.1なので、これをインストール。続けて、vue.jsを指定し、Railsプロジェクトを作成します。

gem install rails -v 6.0.1
rails new myApp --webpack=vue

なお、既存のプロジェクトにVue.jsをインストールしたい場合は、そのプロジェクト内で次のコマンドを実行します。

rails webpacker:install:vue

ControllerとViewファイルの作成

今回はあくまでもフロントエンドに限定した話なので、ScafoldではModelは作らず、homeという名前でControllerだけを作っておきます。

rails g controller home

これで、app/controllers内にhome_controller.rbファイル、app/views内にhomeフォルダが作成されます。

続いて、app/views/home内にindex.html.erbファイルを作成。このファイルには次の内容を記述しておきます。

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

上記は、Rails 6.0のインストール時に、app/javascripts/packs内に作成されたhello_vue.jsを呼び込むための記述です。

configフォルダ内のroute.rbでは、index.html.erbをルートに指定します。

Rails.application.routes.draw do
  root to: 'home#index'
end

最後に、railsのビルトインサーバーを起動して、webpackerが正常に動作しているかどうかを確認。

rails server

ブラウザからhttp://localhost:3000にサクセスし、Hello Vue!と表示されていればセットアップは完了です。

Vue.jsの単一ファイルコンポーネントを確認してみる

次に、hello_vue.jsファイルの内容を確認します。

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () =&amp;amp;amp;amp;gt; {
  const app = new Vue({
    render: h =&amp;amp;amp;amp;gt; h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

２行目のimport App from ‘../app.vue’でひとつ上の階層、つまりapp/javascriptにあるapp.vueを読み込んでいるのがわかります。このapp.vueがいわゆる単一ファイルコンポーネントと呼ばれているファイルで、内容は次のとおり。

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

templateとscript、style scopedの3つの部分に分けて記述すれば、webpackがいい感じにJavaScriptにコンパイルしてくれます。

HTMLとJavaScript、スタイルシートの基本が分かっている人なら、何をしているかおおよそ見当がつくだろうというくらい、とてもシンプルな作りになっています。

Vue.js開発環境との相互連携

例えば、先月の投稿「Linux上にyarnとnodenvで作るVue.jsの開発環境」などで開発していたVueコンポーネントをRails側の開発環境を移す手順は、次のとおり、至って簡単です。

  1. Vue.js開発環境側のsrcフォルダ内にある.vueファイル（単一ファイルコンポーネント）は、Rails側のapp/javascriptにコピー
  2. Vue.js開発環境側のsrcフォルダ内にある.vueファイル（単一ファイルコンポーネント）は、Rails側のapp/javascriptにコピー Railsのapp/javascript/packs内のhello_vue.jsの複製（例えばindex.js）を作って、2行目（import App from ‘../app.vue’）のapp.vueをを1番でコピーした.vueファイル名に変更する。
  3. Railsのapp/javascript/packs内にコピーされたJavaScriptファイルのなかで、使いたいものをRailsのViewファイルにjavascript_pack_tagヘルパーを使って指定する。

手順を逆に辿れば、Rails側からVue.js開発環境も移行できます。

しかも、ここまでのところ、webpacker（又はwebpack）の設定は一切なしで進んでいます。

ファイルを適切な場所に置き、javascript_pack_tagヘルパーの文字を変更するだけでVueコンポーネントが利用できるようになります。

webpackerを巡っては批判も多かったようですが、この辺りは、設定より規約を優先するRailsの真骨頂なのかもしれません。

タイトルとURLをコピーしました