satake

クライアントサイドのAPI開発を楽にする、WebAPIモックサーバー「stubcell」の使い方

stubcellとは?

サーバーとのjson通信(API)の開発環境を、簡単に提供してくれるモックサーバーです。

stubcell 公式サイト
https://github.com/yosuke-furukawa/stubcell

どんなとき使うの?

クライアントサイドとサーバーサイドに分かれて開発を行うケースはよくあると思います。

例えばモックサーバを利用したい状況とは、
サーバーサイドの開発のスケジュールにズレが生じて構築が間に合わず、
フロントエンドでAPIを利用した開発を先に進めたいケースなどです。

stubcellは、フロントエンドの開発に必要な仮のAPIを提供してくれます。

stubcellのapi

実際にやってみよう

※Node.jsのインストールはここでは省略します。

1.インストール

$ npm install stubcell -g
# Error: EACCES: permission denied… のエラーが出たら、始めに sudo をつけてみよう
# $ sudo npm install stubcell -g

2.entry.yaml作成

APIの設定を行うために、entry.yaml というファイルを作成します。

作業用フォルダ作成

$ mkdir stubcell-project # フォルダを作成する
$ cd stubcell-project # 作成したフォルダに移動

entry.yaml作成

$ touch entry.yaml

entry.yaml

- # sample GET
  request:
    url: /curry
    method: GET
  response:
    status: 200
    body: '{ result: "ゲットカレー" }'

- # sample POST
  request:
    url: /
    method: POST
    body:
      food: "curry"
  response:
    status: 200
    body: '{ result: "ポストカレー" }'

※yamlファイルはインデントをタブではなく半角スペース2文字です。
正しくインデントしないとエラーが起こるので注意が必要です。
スクリーンショット 2015-11-27 17.36.17

3.stubcell立ち上げ

$ stubcell

デフォルトでポート番号8090でサーバーが立ち上がります。
http://localhost:8090
で確認してみましょう。

スクリーンショット 2015-11-27 18.00.36
jsonが返って来ていますね。

POSTのときのレスポンスも見てみましょう。
ターミナルで下記コマンドを打って確認できます。

$ curl -d food="curry" http://localhost:8090

curlの具体的な使い方はこちらをどうぞ。

成功すると
{ result: "ポストカレー" }
というレスポンスが返って来ているのを
確認できます。

お疲れ様でした

無事出来ましたでしょうか?

今回オプションは使用しませんでしたが、
実際には様々なオプションがついており、仕様は公式サイトで確認できます。

stubcellを使用することでクライアントサイドのAPI開発が楽になりました。
是非使ってみてください。

参考URL

「チーム開発に役立つstubcell」ってタイトルでCodeGrid 2周年パーティでLTしてきた。
http://yosuke-furukawa.hatenablog.com/entry/2014/05/11/214022

stubcellを使ってみた
http://qiita.com/unhappychoice/items/b5fadf7e9c7042f69f45

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら