easymockからstubcellへ移行してみた
「チーム開発に役立つstubcell」ってタイトルでCodeGrid 2周年パーティでLTしてきた。 - from scratch
今までAPIのモック作るのにCyberAgent/node-easymock · GitHubを使っていたんだけど、最近メンテされていないっぽいし、
easymock is so simple, but it depends on sqlite3, and could not write comment in JSON file and could not validate json.
ってやつに感動してstubcellに移行した。
移行手順
installしてentry.yaml書いて終わり。簡単！
$ npm install --save-dev grunt-stubcell $ vi Gruntfile.coffee # edit gruntfile $ mv easymock mock # easymockって名前でディレクトリ作ってたので変えとく $ cd mock $ touch entry.yaml # easymockのコメントをアレする $ find . -type f -name '*.json' | xargs perl -i -pe 's{^(<|>)}{//}' # entry.yamlをカキカキ $ find . -type f -name '*.json' | perl -i -ne 'if ( /^.(.*)_(.*).json$/ ) { my ($url, $method) = ($1, uc($2)); print << "EOM" - request: url: $url method: $method response: status: 200 file: $_ EOM }' > entry.yaml # あとは手作業で:id周りを変換しまくる
雑感
気になる
- entry.yamlいちいち書くのだるそう。easymockで不要だっただけに気になる
- READMEだけじゃrecordがなにか良くわからんかったのであとで読む
- 勝手にjson作られるやつがそう？timestampみたいなレスポンスに無関係のクエリがファイル名に入った状態で生成されるので悩ましかった
- 流れるログだけだと、結局どのファイルの中身を返したのか分からないのでルーティングの確認が面倒？
- devtool見ろや、でもいいけど
- ドキュメント自動生成とかはなさそう？
- 直接ファイルみても良いけど、仕様として使うなら一覧できると嬉しそう
- 変数とか使って楽ちんにリクエストによってレスポンス変えたい、とかは無理そう
jsxをちょこっと触ったので今の感想書いとく
最近Photoshopで画像をバババッってしたくてJSX入門した。
- 基本的にjavascriptだけど、変数宣言とif/else, forだけ使えれば十分っぽい
- Adobe ExtendScript Toolkit ってやつ使うとデバッグが楽
- ただ、エディタとして貧弱
- ESTKでファイルを開きつつ好きなエディタで書いて保存すると、ESTK側で勝手に「変更加わってるけど最新にする？」って聞いてくるので、YES押して再生ボタンをポチるのが楽っぽい
- とりあえずこれさえあれば、大体のことは分かる
- 書き出し系のスクリプトの場合、いろいろ弄くるのでとりあえず
doc.duplicate()して一時ドキュメントであれこれしてtmp_doc.close(SaveOptions.DONOTSAVECHANGES);するのがお手軽で良い - レイヤーをいじくるときは、underscore.jsが使えると大分幸せっぽいけど依存増やすの面倒だなあっていうのが悩みどころ
layers.getByName('hoge')ってやつ、hogeって名前のレイヤが無いとエラー吐いて落ちるので、あるかないか分からないやつ取ってくるときは、独自でループ回すのが面倒
慣れてくれば、いろんな作業を書き捨てでサクッと書けて便利そうだなあ、という印象でした。
ui.routerとdecorator
書いてみたけど使うか分からないのでメモるだけメモっとく。
ui-viewのautoscrollのスクロール位置を固定する
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscroll
ui.routerではui-viewが切り替わった時にautoscrollって属性をつけてあげないとスクロールしてくれない。
$uiViewScrollでは、viewの要素と関係ない位置にスクロールできないので、decoratorでごにょごにょしてやる。
具体例として、ヘッダーをfixedで表示しているとautoscrollを指定したときにそのui-viewの上部にスクロールしてしまうので上のほうがヘッダーに隠れてしまうので、強制的に一番上までスクロールさせたい。
app.config ['$provide', ($provide) -> $provide.decorator '$uiViewScroll', () -> (uiViewElement) ->window.scrollTo(0, 0) ]
$state.goのreloadを常にtrueにしてやる
同じstateに移動できないのやだなーみたいなとき。
app.config ['$provide', ($provide) -> $provide.decorator '$state', ($delegate) -> state = $delegate state.superGo = state.go state.go = (to, params, options) -> options = options || {} if angular.isUndefined options.reload options.reload = true this.superGo(to, params, options) return $delegate ]
javascriptのreplaceでまとめて置換する
たとえば、
/path/to/:category/:typeみたいなのがあったときに{ category: 'hoge', type: 'fuga' }をわたしてあげると/path/to/hoge/fugaにして欲しいなってとき。
replaceの引数にfuctionが使えるので、
var path = '/path/to/:category/:type' var params = { category: 'hoge', type: 'fuga' } path = path.replace(/\:([^\/]*)/g, function(all, group) { return params[group]; });
みたいなことができる。
backboneを使っていてのっぴきならない理由で/path/to?category=hoge&type=fugaのようにparamsを使えない時に/path/to/hoge/fugaさせるために使った。
fetch: function(options) { options = options ? _.clone(options) : {}; var data = options.data; delete options.data; this.url = this.url_tmpl; if (data) { this.url = this.url.replace(/\:([^\/]*)/g, function(all, group) { return data[group]; }); } return Backbone.Collection.prototype.fetch.call(this, options); },
