はじめに
今更ですが、Rails5.1からwebpackがサポートされてReact, Angular, Vueが簡単にインストールできるようになったので、それぞれ試してみたいと思い、まずはvue.jsを動かしてみました。
実行環境
OS : MacOS X
Ruby 2.4.2
Rails 5.1.4
webpack 3.5.5
vue 2.5.9
yarn 1.3.2
捕捉
事前にyarn（javascriptのパッケージ管理）をインストールしてることが前提となります。
Mac OS x の方はbrewコマンドで一発でインストール可能です。
yarnのバージョンが古いとインストールで失敗します。
$ brew upgrade yarn
# または
$ brew upgrade yarn
プロジェクト作成
$ mkdir vue-sample && cd vue-sample
$ rails new vue-sample --webpack=vue
捕捉
--webpack=vue がvueの指定になります。
angularやreactを使用したい場合はvueの箇所を変更すれば対応可能です。
開発サーバ設定
Railsでは通常rails serverコマンドを使用しますが、webpack-dev-serverコマンドでwebpack用のビルドサーバも起動しないといけないので、両方を一度に起動できるforemanを使用します。
まずはGemfileに追記します。
group :development do
...
+ gem 'foreman'
end
追記が終わったらbundle installを実行してください。
設定用のProcfileをアプリケーションルートに作成し、実行内容を記載します。
rails: bundle exec rails server
webpack: ./bin/webpack-dev-server
実行します。
$ foreman start
http://localhost:5000 にアクセスするとrailsの画面が表示されます。
サンプルファイル実行
app/javascript/の下に以下のサンプルファイルがありますので表示させます。
（hello worldを表示させます。）
.
├── app
│ └── javascript`
│ ├── packs
│ │ ├── hello_vue.js
│ │ ├── application.js
│ └── app.vue
...
HellowWorldを表示させるページの作成
まずはページの作成
$ rails g controller about index
サーバを起動（foreman start）した状態でhttp://localhost:5000/about/indexにアクセスできることを確認してください。
続いてvue関連のファイルを読み込めるようにapp/view/layout/application.html.erbに追記します。
<!DOCTYPE html>
<html>
<head>
<title>VueSample</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_pack_tag 'hello_vue' %>
</head>
<body>
<%= yield %>
</body>
</html>
これでhttp://localhost:5000/about/indexにアクセスしてみて以下のようなページが表示されればOKです。
あとはapp/javascript/app.vue, app/javascript/packs/hello_vue.jsを変更することで表示の調整が可能です。
Vueを編集してみる
今回は既存のhtml/erbテンプレートの要素をターゲットにして、コンポーネントを使いつつ、バインディングの機能を使用したいので、app/javascript/packs/hello_vue.jsに記載されているコメントを参考にサンプルコードを変更します。
まずは、バインディング用のhtmlを追記します。
<h1>About#index</h1>
<p>Find me in app/views/about/index.html.erb</p>
+ <div id='hello'>
+ {{message}}
+ <app></app>
+ </div>
次に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'
+//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'
-// import App from './app.vue'
-//
-// document.addEventListener('DOMContentLoaded', () => {
-// const app = new Vue({
-// el: '#hello',
-// data: {
-// message: "Can you say hello?"
-// },
-// components: { App }
-// })
-// })
+ import Vue from 'vue/dist/vue.esm'
+ import App from '../app.vue'
+
+ document.addEventListener('DOMContentLoaded', () => {
+ const app = new Vue({
+ el: '#hello',
+ data: {
+ message: "Can you say hello?"
+ },
+ components: { App }
+ })
+ })
注意点としてサンプルコードのコメントは import App from './app.vue'となっていますがドットが一つ足りないので import App from '../app.vue'としてください。
整理すると以下のようになります。
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
これで以下のように表示されればOKです！
