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を一つのセットとして定義したもの。

<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とは何かを現役エンジニアが解説【初心者向け】
JavaScript DOM操作再入門①
Rails5でのWebpackerによるBootstrapの利用
【Vue.jsにチャレンジ！】単一ファイルコンポーネントを表示してみる