Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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.jsapp.vueの読み込み
  • html.erbhello_vue.jsの読み込み

 参考

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

yuki_0920
30歳、WEBエンジニア2年目。前職ではエネルギー業界で決算・財務業務に6年間従事。 趣味は筋トレとインデックス投資
https://muscletech.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away