VanillaJSでSuperAgent - bbpink余興

Node.js+Expressでタスク管理アプリを作った時のメモ。
今回はクライアントサイドJavaScript(Vanilla)でSuperAgentを使う話。
bbpink/node-shpapad · GitHub

VanillaJS+SuperAgentを選択した背景

画面の都合上、Ajaxリクエストができるとうれピー
単純なアプリだからライブラリを使うまでもない
JavaScriptできます(jQuery奴)からの卒業
でもAjaxリクエスト処理を生で書くのはメンドイ

使い方

htmlでSuperAgentと本体のJavaScriptファイルを読む、これはいつもどおり
jQueryでは「$(document).ready(function() {}」があって、ドキュメント読み込み後に実行開始できるんですが
Vanillaやるのは結構メンドイらしいのでbodyの最後に本体のJavaScriptを配置しています。

<head>
  <script src="/superagent.js"></script> <!-- SuperAgent本体 -->
</head>
<body>
    ...
    <script src="/shpapad.js"></script> <!-- 使うほうのJavaScriptファイル -->
</body>

本体のJavaScriptではド頭に下記を定義し、requestという変数にSuperAgentをブチ込みます。

var request = window.superagent;

これだけ！

リクエスト & レスポンス

shpapadでは、クライアントサイドJSからの3種類のリクエストが存在しています。

POST (リスト・タスクの追加)
PUT(リスト・タスクの更新)
DELETE(リスト・タスクの削除)

GETはやってないのですがまあ調べたら簡単にできるんじゃないでしょうか(適当)。

//リストの追加(POST)
request.post("/list").type("form").send({value:"リスト名"}).end(function(err, res) {
  //res.okがtrueの場合は成功
  if (res.ok) {
    //res.bodyに返却値が入ってくる、shpapadではapplication/jsonで値が入っています
    alert(res.body.id);
  } else {
    alert("なんか追加できない、オワタ");
    return;
  }
});

//リストの削除(DELETE)
deleteButton.onclick = function() {
  if (confirm("本当に削除してもよろしいですか？")) {
    request.del(op + "?id=" + "リストのID").end(function(err, res) {
      //削除後の画面処理
    });
  }
};

PUTはPOSTほとんど同じです。

ASIDE:POSTとPUTの使い分け

POSTリクエストべき等でなく、サーバサイドにリソースを「新規追加」
PUTリクエストはべき等で、サーバサイドのリソースを「更新」
1回のリクエスト毎にサーバサイドの状態が変わる = べき等でない
何度繰り返してもサーバサイドの状態が変わらない = べき等
shpapadではPOSTリクエストをする度にリストorタスクが増えていきますが、
PUTリクエストをしても変更が行われるだけで、リストorタスクの個数は増えていきません。
POSTでもPUTでもログが書かれる等の状態変化があるので両方べき等でないとかの意見もあるらしいんですが、
私はユーザ(リクエスト主)から見てべき等であればOKだと思っています。
(ここで勉強しました)

続く！(かもかも)