【超初心者】Rails×Vue.jsファイルの内容あれこれ

Railsが学習ひと段落し、Vue.jsの学習をはじめました。
Vue.jsの学習では、Udemyの講座でHTML,CSS,JavaScriptファイルを編集しながら、Vue.jsの理解を深めていきました。終盤では、HTMLファイルのみを使い、コンポーネントという概念を使っています。

ある程度基礎の理解をしたので、既存のRailsアプリを使おうとしますが、Railsで独自で作成されたファイル(app.vueやhello_vue.js)の内容がよくわかりません。

ということで、RailsでVue.jsを利用するための各ファイルは、Vue.js単独で利用するときの場合とどのように関連しているのか、整理していきます。

（前置き）環境構築

環境構築は下記の記事に従い完了。

RailsとVueの取り込み

Rails5.1, Vue.jsで動かしてみる

webpack-dev-serverの起動

【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～

ファイルの役割と構成

app/javascript/packs内のファイル

app/javascript/
└── packs
    ├── app.vue
    ├── application.js
    └── hello_vue.js

app.vue

単一コンポーネントファイルであり、Vue.jsで言う所の「コンポーネント」の理解が必要になる。

ざっくり言うと、HTML,CSS,JavaScript丸ごと1つのファイルにまとめ、機能ごとにファイルを分けられる。

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>

hello_vue.js

hello_vue.jsは上記のapp.vueを読み込んで、Vueのオブジェクトを作成している。

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)
})

Railsファイル

ERB(Slim/Haml)

下記ファイルを追記することで、読み込める。

<%= javascript_pack_tag 'hello_vue' %>

全ファイルで読み込みたい場合はapplication.html.erbだし、個別ファイルで読み込みたい場合は例えばhome.html.erbとなる。

home.html.erb

<h1>Page#home</h1>
<p>Find me in app/views/page/home.html.erb</p>
<%= javascript_pack_tag 'hello_vue' %>

routes.rb

routes.rb

Rails.application.routes.draw do
  root 'page#home'
end

page_controller.rb

page_controller.rb

class PageController < ApplicationController
  def home
  end
end

（応用）複数のコンポーネントを作る場合

下記ファイルを複製し、変更する必要がある。

• app.vue
• hello_vue.jsのapp.vueの読み込み
• html.erbのhello_vue.jsの読み込み

#　参考

Rails5.1＋Vueで何か作る前の基礎勉強