ことはじめ

実験したり勉強したり。

RailsとVue.jsを合わせて使ってみる2

rails Vue.js

やったこと

サンプルアプリを作ったので自分でアプリを作ってみたい。 （今回完結しない）

開発手順

Rubyをインスコ

* `rbenv local 2.4.2`

Railsプロジェクト作成

$ rails new scalping_tester --webpack=vue

--webpack=vueを書いておくとそれごとインストールされる

画面を作る

$ rails g controller home index

devサーバーの設定

  • Webpack関連のファイルは変更したらコンパイルする
  • コンパイルにはbin/webpackというコマンドを使用するが、毎度押すのは大変面倒

foremanのインスコ

ForemanはProcfileから複数のプロセスを管理する Gemfileにイカを記載

gem 'foreman'

変更されたらbin/webpackの実行を行う

以下を作成

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev
web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server

bin/serverのパーミッションを変更

$ chmod 777 bin/server

これでbin/serverするとlocalhost:5000にサーバーが立ち上がる。

HTMLを作る

index.html.erbにとりあえずhtmlを作る

コンポーネント化する

<div id="app">
<div class="container">
    <navbar></navbar>
<!-- 設定 -->
    <div class="row">
        <setting></setting>
        <div class="viewer col-md-9">
            <!-- 最終結果 -->
            <result></result>
            <!-- 表 -->
            <chart></chart>
            <!-- 履歴 -->
            <history></history>
        </div>
    </div>
</div>
</div>
<%= javascript_pack_tag 'scalping' %>

ここではscalping.jsを読みに行くように設定する（一番下の行）

import Vue from 'vue/dist/vue.esm.js'
import Header from './components/header.vue'
import Setting from './components/setting.vue'
import Result from './components/result.vue'
import Chart from './components/chart.vue'
import History from './components/history.vue'

var app = new Vue({
  el: '#app',
    components: {
        'navbar': Header,
        'result': Result,
        'chart': Chart,
        'history': History,
        'setting': Setting
    }
});

それぞれの.vueファイルに内容を書く

<template>
    <div class="result">
        <h2 class="text-primary">シミュレーション結果</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>取引期間</th>
                    <th>取引回数</th>
                    <th>開始資産</th>
                    <th>終了資産</th>
                    <th>総利益</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2017/11/11 ~ 2017/12/12</td>
                    <td>10000回</td>
                    <td>12345円</td>
                    <td>876543円</td>
                    <td>3000円</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

できたこと

  • webpackを使ってWebコンテンツを構成するファイルをひとまとめにする
  • htmlのガワを作成

次にやること

  • グラフ表示
  • API開発
    • 外部のAPIラッパー開発
    • カスタムのAPI開発