Rails 5.1 + Vue.js で開発を行う - part1 環境構築

  • 11
    いいね
  • 0
    コメント

概要

環境

  • ruby 2.4.1
  • Rails 5.1.1
  • Vue 2.3.4

webpacker のインストール

はじめに webpacker を install します。
※ Rails アプリをすでに作成済みという前提で話を進めます。

webpacker とは

Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to manage application-like JavaScript in Rails.

Ref. Rails/webpacker | Github

gem 'webpacker' をインストール

Gemfile を以下のように編集して、インストールします

Gemfile

gem 'webpacker', github: 'rails/webpacker'

$ bundle install

備考
Rails アプリを初めて作成する場合は、以下で webpack と Vue.js のインストールが可能です。

$ rails new myapp --webpack=vue

詳細は公式ドキュメントをご確認ください。
Rails/webpacker | Github

yarn のインストール

インストールされている場合は必要ありません。
インストールしていない場合は以下のコマンドを実行してください。

$ brew install yarn

# インストールされているか確認
$ yarn -v
yarn install v0.23.2

備考

brew が入っていない人は以下を参考にしてインストールしてください。
Homebrew macOS 用パッケージマネージャー

webpacker のインストール

以下のコマンドで webpacker をインストールしてください。
webpack 関連のファイルが作成・更新されます。

$ rails webpacker:install

# Webpacker successfully installed 🎉 🍰

Vue.js のインストール

$ rails webpacker:install:vue

vue がインストールされて、app/javascript/packs 配下にファイルが作成されたことが確認できると思います。

Rails アプリ上で Vue.js を利用する

Root ページを作成

$ rails g controller Page home
routes.rb
Rails.application.routes.draw do
  root to: 'page#home'
end

Vue.js を Rails View で読み込む

javascript_pack_tagapp/javascript/packs 配下にあるファイルを読み込むことができます。
Sprockets とは異なり、必要なファイルを必要な View で読み込むことができるので、JS の思わぬ挙動に苦しめられることはあまりないかと思います。

app/views/page/home.html.haml

%h1 Page
= javascript_pack_tag 'hello_vue'

app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from './app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue(App).$mount('hello')

  console.log(app)
})

備考

hello_vue.js には layoutheadjavascript_pack_tag を読み込むように書いているのですが、これだとなぜか動きません。
なので、上では View の最後で読み込むようにしています。

app/javascript/packs/hello_vue.js

// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

JS ファイルのコンパイル

JS のファイルをコンパイルすることで hello_vue を開発環境に反映させることができます。
以下のコマンドでコンパイルが完了します。ファイルに変更点があった場合も自動でコンパイルしてくれます。

$ bin/webpack-dev-server

そして http://localhost:3000/ を確認すると以下のような画面になっているかと思います。
スクリーンショット 2017-06-18 17.12.13.png

Rails の View を操作する

今まで見てきたのはあくまで、app.vue を表示しているものにすぎなかった。
ただ、SPA を作るわけでもない限り、一般的には Rails の View を操作することが多いと思われる。
その利用方法をすこし紹介する。

Rails の View つまり html を Vue.js で操作するには、hello_vue.js に記述されているように、以下のように変更しなければならない。

app/javascript/packs/hello_vue.js

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

- document.addEventListener('DOMContentLoaded', () => {
-   document.body.appendChild(document.createElement('hello'))
-   const app = new Vue(App).$mount('hello')

-   console.log(app)
- })

+ import Vue from 'vue/dist/vue.esm'

+ const app = new Vue({
+    el: '#hello',
+    data: {
+      message: "Can you say hello?"
+    }
+ })
app/views/page/home.html.haml

- %h1 Page
+ #hello
+   %h1 Page
+   %p {{ message }}
= javascript_pack_tag 'hello_vue'

以下のように表示されているはず

スクリーンショット 2017-06-18 17.27.21.png

ポイント

html を操作する場合は、vue ではなくて vue/dist/vue.esm を import する必要がある。


- import Vue from 'vue'
+ import Vue from 'vue/dist/vue.esm'

 続き

続きは以下の記事で紹介しています。

Rails 5.1 + Vue.js で開発を行う - part2 Ajax で GET しよう!