LoginSignup
112
112

More than 3 years have passed since last update.

既存のRailsアプリにVue.jsを導入した

Last updated at Posted at 2020-11-06

Vue.jsというのがカッコいいらしい

 カッコよくしたかった。個人開発中のサイトをカッコよくしたかった。シュッとやったらグイーンとなって、ババーンとなるようなものにしたかった。Vue.jsを導入することにした。

 彼の動作原理はまだわかっていないが、学習コストが低く、ドキュメントが充実しているらしいのでやっていくことにした。

webpackerとyarnの導入

 まずはwebpackerとyarnというのが必要らしい。

 webpackerとはモジュールバンドラーというやつで、複数のjavascriptをひとつにまとめる役割をもっている。なんのことかよく分からない。ただ、ここにいま嵌ってしまうとVue.jsを使ったかっこいいあれはできない。後回し。

yarnとはパッケージマネージャというものらしい。npmの強化バージョンらしい。ライブラリの追加や管理を容易にするようだ。そうか。

 どちらともすでに私のRailsアプリには導入されていた。Gemfileには以下の記述があった。

gem "webpacker", "~> 4.x"

 yarnはすでにインストールされていた。バージョンを確認したら問題なかった。

$ yarn -v

Vueの初期ファイルの作成

 ターミナルで以下のコマンドを実行すると、vueに必要なファイルが作られる。

$ bundle exec rails webpacker:install:vue

 
 いろいろ作られた。

viewファイルへ記述

 application.html.erbに以下の記述を追加する。

view/layouts/application.html.erb
 <!-- 略 -->
 <body>
  <%= javascript_pack_tag 'hello_vue' %>
  <%= stylesheet_pack_tag 'hello_vue'  %> 
<!-- 略 -->

 これを行うとトップページの下に「Hello View!」というものが表示される。表示ができたら成功である。やったね。

Vue.jsを覗くもの

 javascript_pack_tag をつかうとapp/javascript/packs/hello_vue.jsを読み込めるようだ。このhello_vue.jsapp/javascript/app.vueを参照している。
 ちょっと覗いてみよう。

app/javascript/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>

 CSSっぽい記述なので、あまり抵抗がなく読める。どうやらテンプレートの中の{{ message }}のなかに「Hello Vue!」を入れ込んでいるらしい。試しに文字列を変えてみたらそのようになった。

 これをデータバインディングというらしい。かっこいい。

自分でVueファイルをつくろう

 いつまでもハローワールドをやっているわけにはいかないので、もっといじっていこう。自分でVueファイルをつくりたい。そのまえにさきほどのhello_vue.jsを読んでみる。たくさんのコメントが書かれているはずだ。

app/javascript/packs/hello_vue.js
//いろいろ書かれている

// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:

// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>

//下のコード

 ちょっと面倒なので日本語に訳してみよう。

//  上部のコードはコンパイラなしでVueをつかう場合に用いる。こいつは既存のhtmlテンプレートに
// 対してあんたがVueをいじれないときに使用するものだ。
// そう、これはいつでもシングルコンポーネントのあれだ。

// 既存のhtmlになにかしらのコードをほにゃららしたい場合はしたのコードをコメントアウトしよう。
// そしてhtmlに <%= javascript_pack_tag 'hello_vue' %> を追加。
// あとは以下のdivタグを埋め込んでくれ。

 ちょっとわかった。そういうわけで、上部のコードはコメントにしてしまい、下部のコメントになっているコードをコメントアウトしてみよう。

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

 これが出てくるはずだ。あとはapplication.html.erbに記述を追加しよう。

 <body>
 <!--略 -->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
 <!--略 -->

 こうすると"Hello Vue!"が"Can you say hello?"になる。

 なんとなくわかってきた。あとはファイルをコピーして自分でVueファイルをつくってしまおう。さきほどのapp/javascript/packs/hello_vue.jsをコピーして(コメント部分はいらない)新たにapp/javascript/packs/custom_vue.jsというファイルを作ってしまおう。一部をちょっと修正する。

app/javascript/packs/custom_vue.js
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello2',
    data: {
      message: "聞こえますか?これはvue.jsなのです。htmlの書き込みではありません"
    },
    components: { App }
  })
})

あとはapplication.html.erbの記述を一部変更する。

<%= javascript_pack_tag 'custom_vue' %> <!-- ←追加-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

<!--略 -->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
    <!-- 追加↓-->
    <div id="hello2">
      <p>{{ message }}</p>
    </div> 
<!-- 略 -->

 こうなる。

 できたぞ!!!!

おわりに

 Vue.jsは楽しい。よくわからないけど楽しくなるはず。見栄えがぐっと変わるのでわかりやすいからだ。これからも個人開発の進捗を載せながら、詰まったところを紹介していくぞ。

 応援よろしくね!

参考

take off railsの教材
https://freelance.cat-algorithm.com/lp/take-off-rails

112
112
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
112
112