Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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, ...
ノンブロッキングIO、
Rails脳で挑むと

かなりのストレス
例えばこんなコード
うむ、分からん
時代はasync/awaitだ!
一気に分かりやすくなった!
٩( ‘ω’ )‫و‬
おわり
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
Upcoming SlideShare
Loading in …5
×

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

2,608 views

Published on

gotanda.js #2 のLT資料です。

Published in: Engineering
  • Be the first to comment

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

  1. 1. request-specを利用して いい感じにモックデータを作って フロントエンド開発を楽にしたい! @joe-re
  2. 2. twitter: @joe_re
 github: @joe-re - 名前: じょー - freeeという会社で働いています - つい最近までクラウド会計やってました - 今はクラウド給与やってます
  3. 3. 昨今のフロントエンド開発
  4. 4. SPAの台頭 WebAPI全盛期
  5. 5. 増える学習コスト
  6. 6. はっきりするサーバサイドと クライアントサイドの境界線
  7. 7. サーバ側は REST APIを提供してくれ
  8. 8. そっから先は俺に任せとけ (最高のユーザ体験を 提供してやんよ!)
  9. 9. ともすれば分業 (するかどうかは現場の 状況や人によるけど)
  10. 10. サーバレスでも クライアントサイドは動く
  11. 11. そんな状況において フロントエンド開発を助ける automock というGemを作りました • https://github.com/joe-re/automock
  12. 12. Inspired by autodoc! https://github.com/r7kamura/autodoc
  13. 13. 提供する機能 • サーバサイドのrequest-specからレスポンスを モック用のデータとして抽出する • 抽出したデータを返却するプロキシーを起動
 (サーバサイドのレスポンスを奪い取る) • モックデータを適用するかどうかはWebViewで
 操作可能
  14. 14.  デモ
  15. 15. 想定しているユースケース • サーバのREST APIはもうできてて、
 クライアントも作りたいんだけど、
 サーバ側のデータ作るの面倒だなぁー • 特定のリクエストの時に、
 クライアントサイドがどう動くか確かめたい なー
  16. 16. それ、automockを使えば ボタンぽちぽちするだけで できますよ(どや) ※ただしテストちゃんと書いている場合に限る
  17. 17. 既存のモックサーバツールと 比べた時のメリット
  18. 18. 実装とモックデータが
 乖離しない!!
  19. 19. モックデータの
 メンテナンスの必要なし!!
  20. 20. テストを書く
 モチベーションの向上!!
  21. 21. まだまだ全然ダメな点 • request-specから抽出したデータを、少しだけ 変えたい場合もあるよね? • ファイル内容WebView上で確認できないの
 不便じゃね? • 同じAPI Pathの違うレスポンスのデータは
 どうするの?
  22. 22. すみません、
 近日中にどうにかします
  23. 23. (時間があれば) jsの実装の話
  24. 24. 使ったFWとかライブラリとか • フロント
 gulp, browserify, babel6, react, redux • サーバ
 express, http-proxy, sequelize, babel6 • テスト
 mocka, supertest, power-assert
  25. 25. ノンブロッキングIO、 Rails脳で挑むと
 かなりのストレス
  26. 26. 例えばこんなコード
  27. 27. うむ、分からん
  28. 28. 時代はasync/awaitだ!
  29. 29. 一気に分かりやすくなった! ٩( ‘ω’ )‫و‬
  30. 30. おわり

×