Skip to content

RailsのフロントエンドにVueを使う。#

VueはReact,Angularに並ぶ3大フロントエンドフレームワークといえます。

Vueの役目はHTMLをユーザの操作に応じて適切に書き換えることです。

早速、Vueを始めていきましょう。

前提#

Railsプロジェクト(rails new で作成されたディレクトリ構成)をお持ちでなければ、こちらの手順でRailsプロジェクトを用意しておいてください。

npm i -g yarn

Vueおよび開発ツールのインストール#

yarnコマンドででVueの開発ツールをインストールします。

まずはVueをインストールします。

以下のコマンドをターミナルで実行してください。$ は覗いて実行してください。

$ yarn add vue

次に、開発ツールをインストールします。 長いですが、一行で入力してください。

$ yarn add -D vue-loader vue-template-compiler webpack webpack-cli terser-webpack-plugin optimize-css-assets-webpack-plugin copy-webpack-plugin node-sass css-loader babel-loader @babel/core @babel/preset-env typescript ts-loader

次に webpack.front.config.js というファイルを作成します。

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/front/ts/index.ts',
    output: {
        path: path.resolve(__dirname, 'public', 'js'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    watchOptions: {
        poll: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

TypeScriptの設定#

以下コマンドを実行してください。

npx tsc --init

tsconfig.json というファイルが自動で生成されます。

これでVueの開発環境が整いました。

VueでWebページを作成する。#

VueでWebページを作成していきます。 まず、ベースとなるHTMLを返却するControllerを作成します。 app/controllersに、index_controller.rbを作成してください。 内容は以下です。

class IndexController < ApplicationController
  def index
  end
end

続いて、app/views/index ディレクトリを作成するために、以下のコマンドをターミナルで実行します。

mkdir -p app/views/index

app/views/index に index.html.erb を作成します。内容は以下です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My App</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="/js/bundle.js"></script>
    </body>
</html>

IndexControllerをRailsのルートパスに割り当てるために、config/routes.rb を編集します。

Rails.application.routes.draw do
  root 'index#index'
  # 省略
end

index.html.erbがブラウザに表示されるアプリケーションのベースになります。index.html.erb によりjs/bundle.jsがブラウザにダウンロードされ、js/bundle.jsでVueアプリが構築されます。

次に、読み込まれる js/bundle.js のもととなるTypeScriptファイルを作成します。 src/front/ts というディレクトリを作成するために、ターミナルで以下のコマンドを実行します。

mkdir -p src/front/ts

src/front/ts/index.tsに以下の内容のファイルを作成します。

import Vue from 'vue'
import App from '../components/App'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})

index.tsはVueの起動を行います。 src/front/components/App.vueを読み込んで、index.htmlに埋め込む、ということが書かれています。

App.vueを配置するディレクトリを作成します。

mkdir -p src/front/components/

src/front/components/App.vueに以下の内容のファイルを作成します。

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      message: "Vue動いたよ！"
    };
  }
});
</script>

App.vueはVueのコンポーネントと呼ばれるものです。 \<template>\<\/template>に囲まれている部分がHTMLで画面を書く部分です。 \<script \<\/script>に囲まれている部分がTypeScriptで処理を書く部分です。 data()でreturn するデータをHTML部で使うことができます。

これでVueアプリの作成が完了しました。 Vueアプリが動くようにビルドしてみましょう！

ターミナルで以下のコマンドを実行します。

npx webpack --config webpack.front.config.js

これで public/js にbundle.jsが自動的に作成されます。 後はRailsを起動し

rails s

http://localhost:3000に、ブラウザでアクセスすると、 Vue動いたよ！と表示される このように表示されたら完成です！

編集時に自動的にビルドされるようにする。#

今の所、画面を編集するたびに webpackコマンドを実行しなければなりません。

自動的にビルドするためには webpackに--watchオプションを設定して実行します。

npx webpack --config webpack.front.config.js --watch

終了するにはターミナルでControl(もしくはCtrl)を押しながらCキーを押します。 また、エラーが出ているので、

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

内容を読んで、webpackのオプションを追加します。

npx webpack --config webpack.front.config.js --watch --mode development

ちょっと長くなったので、コマンドをpackage.jsonに追加して、コマンドを実行しやすくします。

package.jsonの一番最後の } の 前 に、

  ,"scripts": {
    "watch:front": "webpack --config webpack.front.config.js --watch --mode development"
  }
}

と追加します。 これで、

npm run watch:front

と実行して、ファイルを変更すると、自動的にコンパイルがなされます。 開発するときは、一つターミナルを開いて、Railsプロジェクトのディレクトリにcdし、npm run watch:frontを実行しておくと楽です！

続けて、画面とサーバの通信を行いましょう。