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

github: @joe-re
- 名前: じょー
- freeeという会社で働いています
- つい最近までクラウド会計やってました
- 今はクラウド給与やってます
昨今のフロントエンド開発
SPAの台頭
WebAPI全盛期
増える学習コスト
はっきりするサーバサイドと
クライアントサイドの境界線
サーバ側は
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脳で挑むと

かなりのストレス
例えばこんなコード
うむ、分からん
時代はasync/awaitだ!
一気に分かりやすくなった!
٩( ‘ω’ )‫و‬
おわり

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