kintone API で Promise を使ってみよう！

（著者：サイボウズ北川恭平）

今回は、2015年7月のアップデートより実装された、kintone API におけるPromiseサポートについて紹介します。

kintone APIのPromiseサポートが実装された背景

なぜ、今回この機能が実装されたかというと、理由としては下記2つの問題をどうにかしたい！という想いから生まれました。

理由その1:同期リクエストを標準APIで送信できない問題

これまで他アプリのデータを取得したあとに何か処理をするといった場合などに、XMLHttpRequestを使った同期リクエストを泣く泣く利用するシーンが出てきていたかと思います。なぜならば、kintoneのリクエスト系の標準APIは全て非同期のリクエストとなっているからです。

この同期リクエストですが、下記のようなデメリットがあります。

JavaScriptで同期リクエストを実行すると、実行中に画面がかたまり他の操作ができなくなる。
ブラウザで、非推奨の主旨の警告がでる。(FireFoxでは、将来的に廃止予定。参考。)

非推奨だけれど、使わなければいけないというジレンマに悩んでいる方も多いのではないでしょうか…

理由その2:submit等のイベントハンドラでリクエスト系kintone APIが使えない問題

リクエスト系のkintone API例えば、kintone.apiやkintone.proxyは基本的に非同期リクエストです。つまり、レコード登録ボタンを押したときにkintone.apiやkintone.proxyの実行結果を待たずに保存が実行されていました。

そこで,2015年7月のアップデートで上記の問題を解決する術として、kintone APIのPromiseのサポートが実装されました。

（Promiseについての概念は、この辺のサイトが参考になるかと思います。）

kintone JavaScript API の変更点まとめ

2015年7月のアップデートでは以下のkintone JavaScript APIのイベントハンドラ及び、リクエスト系のAPIでPromiseサポートが実装されました。

Promiseサポートされたイベント

app.record.create.submit
app.record.edit.submit
app.record.index.edit.submit
app.record.index.delete.submit
app.record.detail.process.proceed
app.record.detail.delete.submit
app.record.create.submit.success (※2016年8月のアップデートで追加)
app.record.edit.submit.success (※2016年8月のアップデートで追加)
mobile.app.record.create.submit (※2016年12月のアップデートで追加)
mobile.app.record.edit.submit (※2016年12月のアップデートで追加)

Promiseサポートされたリクエスト系 API

kintone.api
kintone.proxy
kintone.plugin.app.proxy

それでは、具体的にこれまでとどう変わったかというと…

Promiseサポートされたイベントの返り値でPromiseオブジェクトをreturnできる
リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される

といった挙動になります。
うーん…なんだか良く分らない！という人は、これを使えば下記のメリットがあるということを覚えておいてください。

XMLHttpRequestの同期リクエストを使わずに同様の処理を記述できる
イベントハンドラにPromiseを使った任意の非同期処理を記述できる

つまり、冒頭で挙げた同期リクエストにおけるデメリットを回避した記述ができるようになったのです。また、イベントハンドラに任意の非同期処理を挟めることで、レコード登録時に他のアプリの欲しい情報を一緒に登録したりといったことが可能になります。

サンプルを書き換えてみる

今回は例として、自動採番して、レコード登録するのsample.jsをAPIドキュメントに従って、書き換えてみたいと思います。

sample.js(kintone.Promise対応版)

ポイントとしては…

「PromiseがサポートされたイベントハンドラでPromiseオブジェクトをreturnできる」という変更点に対応した点
イベントハンドラでreturnしたPromiseオブジェクトの解決を待つので、kintone.apiによる非同期処理が実行できるようになった点
同期リクエストを書く必要がなくなった点

です。

この記事を執筆している現在(2015年7月)では、通常PromiseオブジェクトはIEでは取り扱えません。しかし、なんとkintone.PromiseはIEでも取り扱えるように実装されているのでブラウザの種類を気にすることなく利用することができます！

また、このサンプルは、kintone.apiのコールバック関数を省略すると、Promiseオブジェクトを返すという仕様に基づくと以下のように書き直すことができます。

sample.js(kintone.api コールバック関数省略版)

ポイントとしては、

「リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される」という変更点に対応した点
kintone.apiやkintone.proxyを使うときに毎回 "new kintone.Promise()" と書いてPromiseオブジェクトを作る必要がない点

です。

※サンプルの挙動自体は、元サンプルと変わらないのでキャプチャは割愛します。

最後に

kintone.Promiseの実装された背景、使い方をすこしでも掴んでいただけたでしょうか？ちょっと複雑な所はありますが、使うとkintoneカスタマイズがより捗りますのでぜひご活用いただければと思います！

デモ環境

(見積書) https://dev-demo.cybozu.com/k/80/

(商品リスト) https://dev-demo.cybozu.com/k/79/

※デモ環境についての説明はこちら