Slide 1
Slide 1 text
RailsプロジェクトにVuex-ORMを導入した話
大塚昇
Slide 2
Slide 2 text
自己紹介
名前
大塚昇
経歴
2010.04- 不動産投資物件ポータルサイトのエンジニア
2019.04- フリーランスエンジニアに転向
2019.04-10 不動産投家向けの資産シミュレーションツールの開発に従事
2019.04-12 注文住宅ポータルサイトの開発に従事
2020.01- GIS関連の会社に転職（予定）
今日はこのPJで利用したライブ
ラリについて話します
Slide 3
Slide 3 text
資産シミュレーションツールの開発
要件
● 現年齢や家族構成、年収や養育費、住居の有無や保険・金融資産・年金などを入
力し、将来に渡る収入と支出の推移を可視化する
システム構成
● ServerSide：Rails4.2
● Frontend：VueJS + Webpacker ← New!!
● Infrastracture：AWS
Slide 4
Slide 4 text
大変だったところ
● １画面につき50〜100個あるInput要素
● ユーザー -> 所有物件 -> 住宅ローンのように階層的なリレーション
● hamlおよびFormBuilderとVueの共存
Slide 5
Slide 5 text
Vuex-ORMの紹介
Slide 6
Slide 6 text
Vuex-ORMとは
● Vuex-ORMは Kia King Ishi氏によって開発されたライブラリ
● フロントエンドにとってのORM
● 「VuexのStoreをストレージとして使うActiveRecord」のようなイメージ
● 詳しくは製作者の下記の記事を参照
Vuexでリレーションを持った複雑なデータ構造を上手く扱うには
https://qiita.com/kiaking/items/bcd5360fb3106cf22a81
Slide 7
Slide 7 text
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')
}
}
}
Slide 8
Slide 8 text
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)
}
}
}
Slide 9
Slide 9 text
Vuex-ORMの基本操作：データ更新
this.$store.dispatch('entities/users/create', { data: {
name: "yamada taro",
age: 24.
posts: [
{ title: "title1", body: "body1" },
{ title: "title2", body: "body2" },
]
} })
Slide 10
Slide 10 text
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()
Slide 11
Slide 11 text
サーバ（AR）-> フロント（Vuex-ORM）へのデータ受
け渡しの実例
Slide 12
Slide 12 text
ARからデータをJSON形式を返すヘルパ関数を定義
# ユーザ情報をJSON形式で返すヘルパ関数
def get_user
# 教育費情報
data[user'] = User
.select("id, name, age")
.as_json
data
end
Slide 13
Slide 13 text
Componentの要素にdata属性でデータをセット
%div{id:"component_root", "data": get_user }
Slide 14
Slide 14 text
Vuex-ORMによるフロントでのモデル復元の実例
beforeMount() {
const data = JSON.parse(this.$el.getAttribute("data"))
, userData = data['user']
// Userモデルを構築する
this.$store.dispatch('entities/users/create', { data:
userData })
}
Slide 15
Slide 15 text
● Vuex-ORMはActiveRecordに慣れた人にとってが直感的にわかりやすい
● Vuex-ORMを使うことでフロントエンドのデータモデリングの手間が省けた
● Vuex-ORMは、フロントエンドでの複雑なリレーションを表現するのに有効
● 何よりサーバサイドとフロントエンドで共通言語でモデルについて話せるのがよかっ
た
まとめ
Slide 16
Slide 16 text
ご静聴ありがとうございました