RailsプロジェクトにVuex-ORMを導入した話

LegalForce社で行われたRuby勉強会にてLT枠で発表した際の資料です。
RailsプロジェクトにてVuex-ORMというライブラリを利用したのでその感想を共有させていただきました。

https://legalforce.connpass.com/event/154895/

Transcript

1. RailsプロジェクトにVuex-ORMを導入した話
 大塚昇
2. 自己紹介
 名前 
 大塚昇
 経歴
 2010.04- 不動産投資物件ポータルサイトのエンジニア
 2019.04- フリーランスエンジニアに転向
 2019.04-10 不動産投家向けの資産シミュレーションツールの開発に従事
 2019.04-12 注文住宅ポータルサイトの開発に従事
 2020.01- GIS関連の会社に転職（予定）
 
 今日はこのPJで利用したライブ ラリについて話します
3. 資産シミュレーションツールの開発
 要件
 • 現年齢や家族構成、年収や養育費、住居の有無や保険・金融資産・年金などを入 力し、将来に渡る収入と支出の推移を可視化する
 システム構成
 • ServerSide：Rails4.2
 • Frontend：VueJS + Webpacker　← New!!
 • Infrastracture：AWS

4. 大変だったところ
 • １画面につき50〜100個あるInput要素
 • ユーザー -> 所有物件 -> 住宅ローンのように階層的なリレーション
 • hamlおよびFormBuilderとVueの共存

5. Vuex-ORMの紹介

6. Vuex-ORMとは
 • Vuex-ORMは Kia King Ishi氏によって開発されたライブラリ
 • フロントエンドにとってのORM
 • 「VuexのStoreをストレージとして使うActiveRecord」のようなイメージ
 • 詳しくは製作者の下記の記事を参照
 Vuexでリレーションを持った複雑なデータ構造を上手く扱うには
 https://qiita.com/kiaking/items/bcd5360fb3106cf22a81

7. Vuex-ORMの基本操作：モデルの作成
 import { Model } from 'vuex-orm' class User extends Model { // Vuexのステートのキー名を指定する。 static entity = 'users' // ユーザデータの構造とリレーションを定義する。 static fields () { return { id: this.attr(null), name: this.attr(''), age: this.number(0), posts: this.hasMany(Post, 'user_id') } } }
8. Vuex-ORMの基本操作：リレーションの設定
 class Post extends Model { static entity = 'posts' static fields () { return { id: this.attr(null), user_id: this.attr(null), title: this.attr(''), body: this.attr(''), author: this.belongsTo(User), comments: this.hasMany(Comment) } } }
9. Vuex-ORMの基本操作：データ更新
 this.$store.dispatch('entities/users/create', { data: { name: "yamada taro", age: 24. posts: [ { title: "title1", body: "body1" }, { title: "title2", body: "body2" }, ] } })
10. Vuex-ORMの基本操作：データ取得
 // 全てのユーザのデータを取得する。 this.$store.getters['entities/users/all']() // 特定の条件にマッチするユーザを取得する。 this.$store.getters['entities/users/query']().where('age', 24).first() // Userに紐付くPostも合わせて取得する。 this.$store.getters['entities/users/query']().with('posts').get()
11. サーバ（AR）-> フロント（Vuex-ORM）へのデータ受 け渡しの実例

12. ARからデータをJSON形式を返すヘルパ関数を定義
 # ユーザ情報をJSON形式で返すヘルパ関数 
 def get_user 
 # 教育費情報 
 data[user'] = User 
 .select("id, name, age") 
 .as_json 
 
 data 
 end 
 

13. Componentの要素にdata属性でデータをセット
 %div{id:"component_root", "data": get_user } 

14. Vuex-ORMによるフロントでのモデル復元の実例
 beforeMount() { const data = JSON.parse(this.$el.getAttribute("data")) , userData = data['user'] // Userモデルを構築する this.$store.dispatch('entities/users/create', { data: userData }) }
15. • Vuex-ORMはActiveRecordに慣れた人にとってが直感的にわかりやすい
 • Vuex-ORMを使うことでフロントエンドのデータモデリングの手間が省けた
 • Vuex-ORMは、フロントエンドでの複雑なリレーションを表現するのに有効
 • 何よりサーバサイドとフロントエンドで共通言語でモデルについて話せるのがよかっ た
 まとめ

16. ご静聴ありがとうございました