カテゴリー内の他の記事

Promiseを利用したモダンなアプリの全レコード取得の書き方

フォローする

(著者:サイボウズ 北川 恭平

今回は、kintone API で Promise を使ってみよう!で紹介した、Promiseを使ってアプリに登録された全レコードを取得したいと思います。

はじめに

kintone API で Promise を使ってみよう!でも紹介した通り、7月のアップデートにて、kintone REST API リクエストの返り値が下記のように変更されました。

<変更前>

 

<変更後>

この変更によって、今までXMLHttpRequest(以下 XHR)で同期リクエストを書いていた処理を書き直すことができます。(XHRの同期処理をおすすめしない理由については、kintone API で Promise を使ってみよう!をご参照ください。)

そういえば、本件に関してはコミュニティでも話題になっていました。

同期処理時のxmlHttpRequestについて

cybozu developer networkにはXHRの同期処理を使ったTipsとして下記があります。

そこで今回は、

について処理を書き直して同じ動きになるか確認してみたいと思います。

準備

まずは、100件以上データのあるアプリを作成します。
そこに、元のTipsを参考にして作成したgetAllData.jsにてレコード一覧イベント時に、console.logで全件のレコードを出力してみました。(レコードは200件登録)

200件の登録したデータを取得できました。余談ですが、7月のアップデートで500件までの指定が可能になりましたが、このサンプルでは上限100件として指定しています。
また、ブラウザはGoogle Chromeを使用しましたが、よく見ると下記のような警告がでています。

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

直訳すると、同期処理は、ユーザーのエクスペリエンスに影響を及ぼすので、推奨されません。……と書いてあります。そう、推奨されていないのです。
推奨されないものを使うのは気持ち悪い。。と少しでも感じた方は、本Tipsをこのまま読み進めていただけると幸いです。

下記は、getAllData.jsのソースコードです。

getAllData.jsソースコード

kintone.Promiseオブジェクトを使った方法に書き換える

それでは、さっそく7月のアップデートから利用可能になった実装方法でgetAllData.jsを書き換えます。分りやすいように、ファイル名は「getAllDataNew.js」とします。

getAllDataNew.jsソースコード

ポイントは、kintone.apiのコールバックを省略すると、kintone.Promiseオブジェクトを返すという機能を利用して、再帰的に全レコードを取得している点です。
このソースコードを、アプリに適用してブラウザのコンソールをみてみましょう。

無事に、200件のレコードデータが取得されていますね。非推奨の警告もでていません。

また、kintone API で Promise を使ってみよう!でも触れましたが、レコードの件数が大量にある場合、XHRの同期処理を書いた場合、画面が固まりクリックなどができなくなります。一方、kintone.Promiseオブジェクトを使った方法では、スクリプトの実行中でも問題なく他の操作ができるというパフォーマンスの観点でのメリットもあります。

最後に

今回は、kintone.Promiseオブジェクトを使って全レコードを取得しました。
kintone.Promiseオブジェクトの別の利用シーンとしては、例えば他のアプリのデータを取得して、データをマージするといったアプリ間の連携などでも役立ちそうです。
この機会にぜひお試しいただければと思います。

関連Tips

このTipsは、2015年7月版で確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/89/

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
のら

北川さま。
久しぶりにcybozudevを訪れた者で、このような機能がリリースされていたの知りました。 すみませんが、何点か質問お願いします。
1) 10行目の getAllDataNew.jsの=== ですが、これは単純な間違いという事でよろしいでしょうか? jsに詳しくなく、このような表記があるのか?と思ってしまいましたが、==に変更しないと動作しないようですが・・・
2) どうしてイベントの登録を行っていないのに、動作するのでしょうか? getAllData.jsでは、'app.record.index.show'を設定していますが、どうしてgetAllDataNew.jsでは省略できるのかをおしえてください。
3) app.record.index.showでも、promiseは動作するのでしょうか? Promiseサポートされたイベントには、app.record.index.showは入っていませんが・・
質問ばかりで申し訳ありませんが、Promiseを理解したいので、よろしくお願いいたします。

のらにより編集されました
Avatar
Ryu Yamashita

(1) の比較演算子については 結論から申し上げますと間違いではありません。JavaScriptのお話ですので、こちら等チェックしてみてください。ちなみに、動作しないケースはどのようなケースだったでしょうか?ちなみに、limitに500以下の数値が指定された時にちょっと勿体無い動きはしそうですが、恐らく問題とはならないと思います。

 

(2) イベント登録ですが、kintone.events.on() はどの画面で発火するかのイベントですが、それを外したとするとどの画面でも実行されるということになります。全件取得というフォーカスからすると本質ではないため、2つのサンプル間でのイベント登録の有無にはあまり意味を持たせていないのではないかと思います。

 

(3) app.record.index.show の中でも kintone.Promise は使えるか。については、使えます。対応と仰っているのは、こちら にあるようなお話かと思いますが、ここで言っているのはkintone.Promiseオブジェクト をreturn 出来るということです。つまりreturnしなければ他のイベントの中でも使えるということになります。

Ryu Yamashitaにより編集されました
Avatar
のら
早速コメントありがとうございます。私の勉強不足のようです。今後も精進を重ねます。
(1)に関しては、私が使っているChromeのDeveloper ToolsのSourcesにjsが出てこなかったので、てっきりシンタックスエラーだと判断してしまいました。
失礼しました。これからもよろしくお願いします。
Avatar
Ryu Yamashita

ちょうど書きかけの記事を仕上げていた最中だったのですが、こちらもちょっと長めですが、今回のトピックに関連していると思いますので、ご参考までに。

Ryu Yamashitaにより編集されました
ログインしてコメントを残してください。
Powered by Zendesk