毎日温泉に入りたい♨︎

見た物や買った物、投資についてを書いてますヽ(* ॑꒳ ॑* )ノダァーッ!!

Railsとvue.jsでちょっとしたSPAアプリ開発

カウントするためのちょっとしたアプリが必要だったので
サクッと作成した時の所感になります

内容

  • モンストの神殿周回時の実の等級とその内容をカウントする
  • 画面に選択項目を設けvue.jsで非同期でRailsapiを呼ぶ
  • 非同期はaxiosを使いRailsは登録処理はpostを受けられるようにしておく
  • カジュアルアプリという名目なのでこだわり無し

画面のイメージこれもこだわりなし
f:id:peko-the3rd:20180105104341p:plainf:id:peko-the3rd:20180105104831p:plain

先に感想

vue.jsのコンポーネント、特にdataが非常に便利だった、データの受け渡しをコンポーネント間でやるのが便利、methodsもしかり
htmlとのbindも簡潔な記載で連携できるため良かった、慣れるまで通常のjsとvue.jsで所作が逆転していて作りながら修正していた(笑)
個人的によくなかった点は標準関数が分かりにくかったこと、加えてマニュアルがhow toベースになりすぎているためハマった時逆にわかりにくい、正直機能一覧が欲しい…とおもっていたらcheatsheet見つけた
Vue.js 2.3 Complete API Cheat Sheet

完成物はherokuにあげてるけどRailsは相変わらずasset pipelineの本番環境での動きが〇〇としか言いようがない
どう考えてもファイル有るのにfile not foundってなんだよwと、カジュアルに作る時はasset pipeline使わない感じでやってます
正直一番長時間ハマったのが本番環境用のファイルのjsとcss読み込み問題だったorz

Developing

RailsをRESTで受けられるようにしてvue.jsからaxiosで非同期でデータを登録/取得
↓みたいな形でアクセス出来る 結局自分用なので処理結果は超適当
n+1に気をつける RailsのN+1問題と解決策 - Qiita

    def recode
        json_request = JSON.parse(request.body.read)
        @uuid = SecureRandom.uuid
        @ua = request.env['HTTP_USER_AGENT']
        @ym = Date.current.strftime('%Y%m')
        @ymd = Date.current.strftime('%Y%m%d')
        begin
            Seed.transaction do
                @seed = SeedHead.new(uid: @uuid, kinkaku: json_request['kinkaku'].to_s, shinden_type: json_request['shinden_type'].to_s, ua: @ua, target_month: @ym, target_date: @ymd)
                @seed.save
                @response = { code: '200', content: { message: "ok" } }
            end
        rescue ActiveRecord::RecordInvalid => e
            @response = { code: '500', content: { message: "ng" } }
        end
        render json: @response
    end

vue.jsから呼ぶ

axios.post('/api/v1/seeds/grade', json_params).then(response => {
    if (typeof response.data.code !== 'undefined' && response.data.code == '200') {
       //処理
    } else {
       //想定エラー処理
    }
}).catch(e => {
    console.log(e);
});

取得時は

    def grade
        begin
            con = ActiveRecord::Base.connection
            @result = con.select_all("SQL ...etc...")
            @message = "ok: " + @result.length.to_s
            @code = '200'
            @result_data = @result.to_json
        rescue ActiveRecord::RecordInvalid => e
            @message = "ng: " + e.record.errors.to_s
            @code = '500'
            @result_data = ''
        end
        render json: @response = { code: @code, content: { message: @message }, data: @result_data }
    end


まとめ

この辺りの記事を見てやっぱりvue.js作りやすくて良いなと思ったり、、、
選定する時こそ自分が普段行っていることを少し便利にするためのツール作成が一番良いなと
https://qiita.com/c-su/items/266552f444489f254e85

本当に1年は早い(´・ω・`)