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

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

内容

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

画面のイメージこれもこだわりなし

先に感想

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使わない感じでやってます。

正直一番長時間ハマったのがRailsの本番環境用のファイルの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年は早い（´・ω・｀）