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に以下の記述を追加する。
<!-- 略 -->
<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.jsは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を読んでみる。たくさんのコメントが書かれているはずだ。
//いろいろ書かれている
// 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というファイルを作ってしまおう。一部をちょっと修正する。
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