vue.js 2 でお気軽ajax通信(rails)

概要

作成中のRailsアプリケーションで、vuejsを取り急ぎ適用してみたお話です。
お手軽だった！

• vuejsをアプリケーションに組み込む
• jsからrailsのapiを叩いて表示を行う

このあたりの内容になります。

私

• Rails寄りな人
• js強くない

目的

学習コストが少なそうなjsフレームワークをさがしてまして、なんとなくたどりついたのがvue jsでした。ゆくゆくはrails側はAPIに徹してもらって、jsでAPI経由でデータの取得/更新できる形ができれば良いなと考えていました。

• viewの変更が比較的容易にできる
• resourecesが理解できるくらいにはお手軽にできる
• 少し新しい感じのもの
• 名前がなんか良い

上記4つが選定のポイントだった気がします。

環境

やったことを記述する前に使用環境を示しておきます。

• mac os sierra
• vuejs-rails 2.0.5
• rails 5.0.0.1
• ruby 2.3.1

vuejsをアプリケーションに追加

最初、webpackなどのjs環境を整えて管理しようかと思ったんですが、js界隈に疎かったためこれは何やら煩雑な予感がしました。調べていくうちに rails の場合は gem を使用すれば比較的お試しで使うにはお手軽だということがわかりその方法を取ることにしました。

Gemfileに下記を追加し $ bundle install

gem 'vuejs-rails'

これを行うと

• vue
• vue-router (シングルページアプリケーションの構築用) ※今回は利用していない
• vue-resource (ajax通信を担ってくれる)
  • こちらを合わせて呼んだほうが良いかも https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ (vue-resourceの引退について)

が、もれなくついてくるのも私にとって大変好都合でした。

application.js に下記を追加して読み込むようにしています

application.js

//= require vue
//= require vue-resource

参考: https://github.com/adambutler/vuejs-rails

あと、私は上記ページにturbolinksについて言及されている部分があったので、読み込むから外すこととしました。

jsのリクエストを受けるための土台を作成

ここはちょっとrailsの話になります。jsでリクエストが有った際に json の形でデータを返すためにrailsの方の設定を追加していきます。

modelは既存のものが存在するので、すごくざっくりコントローラとルーティングを設定します。

ルーティング

routes.rb

get 'api_test',          to: 'pages#api_test'

コントローラ

pages_controller.rb

    def api_test
      params = Page.where(site_id: @site.id).all # 複数のPageを想定
      render json: params
    end

Pageモデルからデータを持ってきてjsonとしてそのまま渡してしまいます。

js側で受け付けられるようにする

ざっくりといろんなサイトを参考にしながら作成した

html側(haml) はこんな感じで用意してid=helloで取得したデータを利用し
v-forで複数あるデータをテーブルに押し流す感じを想定しています。

page.html.haml

    #hello
       %table
       %tr{ "v-for" => "page in pages"}
         %td
           %a{ href: "{{page.url}}" }
             {{page.name}}
         %td
           {{page.explaination}}

それを可能にするためにjs側で書いたのがこちらです。
ajaxで取得して受け渡し用のところに 複数のデータを順番に追加していきます。

page.js

    window.onload = function () {
      var app = new Vue({
        el: '#hello',
        data: { pages: [] },
        created: function(){
          this.$http.get('/api_test').then(function(response) {
            // success
            for(var i = 0; i < response.body.length; i++) {
              this.pages.push(response.body[i]);
            }
          }, function() {
            // error
          });
        }
      });
    }

これだけで終了です。
もともとデータをもっていたものを表示させることができました。

思っていたよりも早く手軽にできてしまったので、記事が薄いですが、
jsフレームワーク使ったことない人はvuejsから入るの割と良いような気がします。

終わりに

angular1を少し触っていたのでふんわりjsのajaxとかが頭にあったので、vuejsも割とすんなりだったような気がします。
個人的にはangularだったらあの便利なやつがあったなー。みたいなものが時々なかったりしたので、これの他にunderscore.jsを追加したりしました。
jsのフレームワークはフルスタックなものから、view特化なものまで色々あるようなので自分にあったものを探してもらって「とりあえずフォームのバインドだけでもしてみたい」とかならvuejs使って皆よと思う次第です。

明日は @kaorun343 さんです。