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

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

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

# webpackerとyarnの導入

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

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

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

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

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

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

```terminal
$ yarn -v
```

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

```terminal
$ bundle exec rails webpacker:install:vue
```
　
　いろいろ作られた。

# viewファイルへ記述

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

```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.js`は`app/javascript/app.vue`を参照している。
　ちょっと覗いてみよう。

```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`を読んでみる。たくさんのコメントが書かれているはずだ。

```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タグを埋め込んでくれ。

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


```js
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に記述を追加しよう。

```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`というファイルを作ってしまおう。一部をちょっと修正する。

```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`の記述を一部変更する。

```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> 
<!-- 略 -->
```

　こうなる。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104211/4c4337ab-1c06-b2d6-10ff-32ad6a93c7a1.png" width = "400"> 

　できたぞ！！！！

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

　応援よろしくね！

### 参考
https://github.com/rails/webpacker/blob/master/docs/integrations.md#vue

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