Ruby on Rails 6.0のwebpackerを使ってVue.jsと連携してみた(フロントエンド編)

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

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', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

2行目の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フォルダ内にあるJavaScriptファイルはRails側のapp/javascript/packsにコピー
  3. Railsのapp/javascript/packs内にコピーされたJavaScriptファイルのなかで、使いたいものをRailsのViewファイルにjavascript_pack_tagヘルパーを使って指定する。

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

しかも、ここまでのところ、webpacker(又はwebpack)の設定は一切なしで進んでいる。

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク