request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい！

request-specを利用して
いい感じにモックデータを作って
フロントエンド開発を楽にしたい！
@joe-re

twitter: @joe_re 
github: @joe-re
- 名前: じょー
- freeeという会社で働いています
- つい最近までクラウド会計やってました
- 今はクラウド給与やってます

昨今のフロントエンド開発

はっきりするサーバサイドと
クライアントサイドの境界線

サーバ側は
REST APIを提供してくれ

そっから先は俺に任せとけ
(最高のユーザ体験を
提供してやんよ！)

ともすれば分業
(するかどうかは現場の
状況や人によるけど)

サーバレスでも
クライアントサイドは動く

そんな状況において
フロントエンド開発を助ける
automock というGemを作りました
• https://github.com/joe-re/automock

Inspired by autodoc!
https://github.com/r7kamura/autodoc

提供する機能
• サーバサイドのrequest-specからレスポンスを
モック用のデータとして抽出する
• 抽出したデータを返却するプロキシーを起動 
(サーバサイドのレスポンスを奪い取る)
• モックデータを適用するかどうかはWebViewで 
操作可能

想定しているユースケース
• サーバのREST APIはもうできてて、 
クライアントも作りたいんだけど、 
サーバ側のデータ作るの面倒だなぁー
• 特定のリクエストの時に、 
クライアントサイドがどう動くか確かめたい
なー

それ、automockを使えば
ボタンぽちぽちするだけで
できますよ(どや)
※ただしテストちゃんと書いている場合に限る

既存のモックサーバツールと
比べた時のメリット

実装とモックデータが 
乖離しない！！

モックデータの 
メンテナンスの必要なし！！

テストを書く 
モチベーションの向上！！

まだまだ全然ダメな点
• request-specから抽出したデータを、少しだけ
変えたい場合もあるよね？
• ファイル内容WebView上で確認できないの 
不便じゃね？
• 同じAPI Pathの違うレスポンスのデータは 
どうするの？

すみません、 
近日中にどうにかします

(時間があれば)
jsの実装の話

使ったFWとかライブラリとか
• フロント 
gulp, browserify, babel6, react, redux
• サーバ 
express, http-proxy, sequelize, babel6
• テスト 
mocka, supertest, power-assert

ノンブロッキングIO、
Rails脳で挑むと 
かなりのストレス

一気に分かりやすくなった！
٩( ‘ω’ )‫و‬

Recommended