API設計での開発でのジレンマと、フロントエンジニアのサーバー側を実装について #JavaScript

はじめに

API設計での開発を友人の @otukutun としていたときの話です。

予め言っておきますが、 今回の話は割と主観な部分が多いです

(このアドベントカレンダー続くと良いですね笑)

API設計時のジレンマ

API設計にしておくと
* HTMLのコーディングデータのサーバーへの組み込みが発生しない
* フロント側とサーバー側の作業範囲が明確に分類されるためタスク割り振りが行いやすい
* 自分の実装範囲が明確になるので遠隔作業がしやすい

などのメリットがあると個人的には感じています。
(ただ、フロント側の実装量は一気に跳ね上がるイメージもあります苦笑)

今回は、私がフロント開発(Angular.js)、@otukutunがサーバー側開発(Rails)という分担になり、API設計で開発をすることにしました。接続部分のHTTPRequestが上手くいかず、かなり苦戦しました。というのもお互い使う言語やフレームワークにまだ慣れてなく、勉強しつつやっていたので 上手くいかないとお互いに自分の実装を見直す、 ということをしていました。

このときにフロント側でAPIリクエストの処理を変えた -> サーバー側で確認してくれ!という感じで確認する必要がありました。

お互いに不安のある感じの実装だと、どちらに原因があるのか特定しにくいですよね汗

フロントエンジニアだけでAPIレスポンス確認

結局↑のようなやり取りをずっとやる分けには行かないので、localhostでサーバーを立ち上げてそこでレスポンス確認をするっていうのが手っ取り早い感じがしました。

apiaryなんかがけっこう有名みたいですけど、個人的にはJavacriptを書ける人ならNode.jsでサーバー立ち上げてテストするのが早いかなぁと思っています。

モダンなフロント開発をしている方々はNode.jsの環境は通常ではNode.jsでサーバー立ち上げてリクエスト確認すると良いかもしれません。

以下がカンタンにリクエストを確認するサーバーです。

http.js

var sys = require ('sys'),
    url = require('url'),
    http = require('http'),
    qs = require('querystring');

http.createServer(function (req, res) {

    console.log('method:', req.method); //←メソッドの確認

    if(req.method=='POST' || req.method=='OPTIONS') {
        var body='';
        req.on('data', function (data) {
            body +=data;
        });
        req.on('end',function(){
            var POST = qs.parse(body);
            console.log('post:',POST,typeof(POST)); //←POST送信されたデータと型の確認
        });
    }
    else if(req.method=='GET') {
        var url_parts = url.parse(req.url,true);
        console.log(url_parts.query); //←GET送信されたデータの確認
    }

}).listen(1337, "127.0.0.1");

このコードを保存して

$ node http

でサーバー起動して http://localhot:1337 にリクエストを投げれば、ちゃんとリクエストが送れているか分かると憶います。

method: POST
post: { 'email': 'iwate@gmail.com',
  'name': 'n0bisuke',
  'password': 'lig' } object

こうしたほうがストレスフリーで生きれる気がしました笑
結局のところ、遠隔での作業の場合はフロント側はAPIレスポンスを、サーバー側はAPIリクエストをお互いにモックアップを組みながらやる必要はありそうだと改めて感じました。
(頭では分かってましたが実感した気がします笑)

さいごに

今回ハマっていた箇所でPOSTリクエストを送っているつもりがそもそもPOSTが送れていなかった...ということがあったので、詰まったらこんなかんじで進めるのもありだと思います。