既存のWebアプリケーションのデータをmBaaSに置き換えてみよう（カンバン編）

Webアプリケーションが高機能化するのに伴って、ちょっとしたシステムであれば自分のローカルコンピュータだけで動かせるようになっています。しかし、一人で使う場合にはよくとも、社内のチームで使いたいとなったら途端に面倒になります。例えばデータベースが必要になったり、システムをホスティングするサーバもいるでしょう。

mBaaSであればHTTPサーバは個人のローカルにインストールされているものを使いつつ、データだけ共有できるようになります。なお、Webアプリケーションでそのまま使うとアプリケーションキーとクライアントキーが漏洩してしまうので注意が必要です。今回は社内利用を前提としています。

カンバンシステムを立ち上げよう

今回から何回かに分けてmBaaSを使ったカンバンシステムを作っていきます。といってもゼロから作るのではなくrafaelodon/kanban: A simple Kanban for daily tasks based on HTML5/JS with local storage.をベースにします。こちらはlocalStorageをデータ保存先にして作られていますので、その部分をまるっとmBaaSに置き換えるのを目標としています。

今回はまず、そのための注意点をいくつか紹介します。

localStorageは同期、mBaaSは非同期

まず注意して欲しいのは localStorage は同期でデータ操作ができるのに対して、mBaaSは非同期処理になってしまうということです。JavaScriptの最新APIであるawait/asyncを使えば改善できますが、今回はPromiseで作っていきます。例えば処理が次のようになります。

ワークスペースを削除する処理です。元々は次のようになっています。

function onClickRemoveWorkspace(){
  if(confirm(message("confirm_workspace_remove",workspaces[currentWorkspace]))){
    //remove old workspace
    removeWorkspace(currentWorkspace);
    renderWorkspacesMenu();
    switchToWorkspace(KANBAN_DEFAULT_BOARD_ID);
  }
}

これをmBaaSに置き換えると次のようになります。削除を実行する部分が Promise になるので、処理完了を then で受け取る必要があります。

function onClickRemoveWorkspace(){
  if(confirm(message("confirm_workspace_remove",currentWorkspace))){
    //remove old workspace
    currentWorkspace
      .delete()
      .then(() => {
        renderWorkspacesMenu();
        switchToWorkspace(KANBAN_DEFAULT_BOARD_ID);
    })
  }
}

そして関数でも非同期処理が必要なもの（保存処理など）はPromiseで囲んでおきます。このようにPromiseで囲んでおくだけで非同期処理は簡単に対応できるでしょう。

function saveWorkspaces(){
    return new Promise((res, rej) => {
        var promises = [];
        for (var id in workspaces) {
            var workspace = workspaces[id];
            var method = typeof workspace.objectId === 'undefined' ? 'save' : 'update'
            promises.push(workspace[method]());
        }
        Promise.all(promises)
            .then((results) => {
                workspaces = {};
                for (var i = 0; i < results.length; i += 1) {
                    var workspace = results[i];
                    workspaces[workspace.id] = workspace;
                }
                res();
            })
    });
}

データ構造を考える

localStorageはKVSです。データはJSONを文字列として保存される形式になっています。特にタスクについてはワークスペース（ボード）ごとに保存できるようになっています。これをこのまま再現することもできますが、いいデータ構造ではありません。そこで今回は次のクラスにデータを保存することにしました。

• Workspace
• Task

そしてWorkspaceとTaskはリレーションで結びます。これによって、ワークスペースから関連するタスクを簡単に取得できるようになります。mBaaSはKVSではありませんので、その特性に合わせたデータの持ち方を考えなければなりません。

まとめ

JavaScriptでのmBaaS利用については非同期処理を押さえれば簡単に使いこなせるようになります。では次回からカンバンシステムをmBaaS化していきます。

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。