Rails に Vue.jsの導入 / 初めてのVue.js①

## Vue.jsとは
``Vue.js``とは、``JavaScript``のフレームワークの1種。

JavaScriptのフレームワークやライブラリでで有名なのは``jQuery``があるが、``jQuery``はDOM操作を自分で行わなければならない。

DOM操作は、これまでブラウザで動作するアプリケーションの開発主体がサーバー側だった時はあまり問題にならなかったが、

最近はWebページ自体を遷移させずに1つのページ内で処理を完結させる``Single Page Application``など、フロントエンド側に開発主体が移りつつある。

そこで登場したのが、``Vue.js``や``Angular``、``React``などの``JavaScript``のフレームワーク。

これらフレームワークはDOM操作を自動化するなど、より効率よくフロントエンドの開発が行えるよう考慮されている。中でも``Vue.js``は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いている。

>**DOM操作とは**
DOMとは、Document Object Model の略でHTMLやXMLを取り扱うための**API**。
>
>DOMを利用する事で、HTMLの探索やスタイルの変更・イベントの設定・HTML要素の取得の他に、振る舞いを変えたり、ユーザー操作時の処理を設定することができる。

## Boostrap4導入
今回はRails6以降を使っているので、``boostrap``だけでなく、``jquery``と``popper.js``も``yarn``を使ってインストールしていく。（Rails6からWebpackerが標準で入っているため）

Rails5は、JQueryやBootstrapを導入するには、それぞれのGemをインストールする必要があり、SprocketsというGemによって複数のアセットファイル（JS、CSSや画像）をコンパイル（結合や圧縮）を行うアセットパイプラインという仕組みを実装していたが、

今後はGemではなくyarnにてJSやCSSのパッケージを管理し、WebpackというアセットファイルをJSファイルにまとめて管理するモジュールバンドラをWebpackerで利用するのが主流になっていくそう。

```
% yarn add bootstrap jquery popper.js
```

## view表示するためのルーティングやコントローラーなど
``Vue.js``などのSPA（シングルページアプリケーション）では画面の描画処理やルーティングの制御をクライアント側で行うので、``config/routes.rb``に以下のような記載を追記する必要がある。
```routes.rb
Rails.application.routes.draw do
  root 'home#index'
  get '*path', to: 'home#index'
end
```
```app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index; end
end
```

```app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
```
Webpacker環境でJavaScriptを開発する際は``app/javascript/``配下で作業をすることになる。

下記内容は``app/javascript/app.vue``を読み込んで、それを画面に埋め込む。そのためレイアウトを組むときは``app/javascript/app.vue``にて``view``を作業していくことになる。
```app/javascript/packs/hello_vue.js
  import Vue from 'vue'
  import App from '../app.vue'
+ import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})
```

## ``app/javascript/app.vue``
vueファイルは単一``ファイルコンポーネント``である。

**単一ファイルコンポーネントとは？**
単一ファイルコンポーネントとは、``HTML``・``JavaScript``・``CSS``を一つのセットとして定義したもの。

```vue
<template>
<!--HTMLを書く場所 -->  
</template>

<script>
<!--JavaScriptを書く場所 -->
</script>

<style>

<!--CSSを書く場所 -->
</style>
```

Vue.jsでは、これらを「〇〇〇.vue」という拡張子がvueの一つのファイルにまとめることができ、それを``単一ファイルコンポーネント``と呼ぶ。

```app/javascript/app.vue
<template>
  <div id="app" class="d-flex flex-column min-vh-100">
    <header class= "mb-auto">
      <nav class= "navbar navbar-expand navbar-dark bg-dark justify-content-between">
        <span class= "navbar-brand mb-0 h1">{{ title }}</span>
      </nav>
    </header>
    <div class="text-center">
      <h3>タスクを管理しよう！</h3>
      <div class="mt-4">生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</div>
      <button type="button" class="btn btn-dark mt-5">はじめる</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      title: "タスク管理"
    }
  }
}
</script>

<style scoped>
 h3{
    color: red;
  }
</style>
```
**export default**
``export``とは、JavaScriptをモジュール化して外から呼び出せるようにする記述。

``export``には名前付きエクスポートと、デフォルト(default)エクスポートがある。

通常の``export``は変数や関数毎に一つ一つそれらの名前を指定して呼び出す（名前付きエクスポート）。

これに対して、``export default``とすると、**処理全体を１つのモジュールとして出力**する。

Vueコンポーネントでは``export default``を使用する。そして、``export default``の中がvueの処理になる。

## 参考記事
[Vue.jsとは何かを現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/21456)
[JavaScript DOM操作再入門①](https://qiita.com/tfrcm/items/8173977de75da1b0e5e9#:~:text=DOM%E3%81%AE%E6%93%8D%E4%BD%9C%E3%81%A8%E3%81%AF,%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E4%BA%8B%E3%81%A7%E3%81%99%E3%80%82)
[Rails5でのWebpackerによるBootstrapの利用](https://tamosblog.wordpress.com/2020/10/16/rails5-webpacker-bootstrap/)
[【Vue.jsにチャレンジ！】単一ファイルコンポーネントを表示してみる](https://jeannie-blog.online/vue-js-single-file-component/)