最近手がけたプロジェクトではクライアントサイドとサーバーサイドのモデルを同期させるときの通信量を削減するために、JSON Patch RFC6902 を採用してみました。JSON Patch の簡単な説明とサーバーサイドの実装方法について、以前に紹介しましたが、今回はKnockout.jsを使ったクライアントサイド用の実装方法と利用パターンをご紹介したいと思います。
JSON Patch とは
簡単に前回の記事を振り返ると、JSON Patch は以下の2つのメイン機能を想定しています。
- モデルに変更を適用するためのオペレーションの定義。
- モデルに変更があったとき、その変更内容の検出と表記方法(オペレーションオブジェクト)。
利用パターン
- サーバーから JSON Patch データを受け取り、モデルを更新
- モデルを更新するダイアログウインドウとメイン画面の間のモデルの差分の通信
- モデルに対する変更の検出
実装方法
キーポイント
- プロパティに対する変更の適用と検出
- モデル(のインスタンス)に対する変更の適用と検出
プロパティに対する変更の適用と検出
機能概要 | 用途 | サンプルコードで の対応メソッド |
変更前の値の保持と現在の値との比較 | 変更の検出 | _getChanges |
変更前の値を現在の値にリセット | 変更の検出の結果を空にする | _resetChanges |
現在の値の変更 | JSON Patch による変更の適用 | _applyChanges |
extender を作成する前に、考慮しなければならない点が一つあります。observable が保持している値のタイプによって、_getChange、 _resetChange、_applyChange メソッドの実装が異なるので、以下の3つのタイプに合わせて、専用の extender を用意する必要があります。
observableの値のタイプ | extender名 |
プリミティブ | track |
モデル | trackObject |
モデルの配列 | trackObjectArray |
- JSON データから新規のインスタンスを生成するために、コンストラクタを使っていること
コンストラクタは extender のパラメータとして渡されます。 - 各メソッドが内部でそれぞれ koPatch.getChanges、koPatch.resetChanges、koPatch.applyChanges というメソッドを呼び出していること
モデルに対する変更の適用と検出をするための専用のメソッドです。このメソッドの実装方法は"モデルに対する変更の適用と検出"で説明します。
- 配列のエレメントの追加、削除、置き換え
- エレメント自体に対する変更の処理
また、_getChanges、_resetChanges、_applyChangesが呼ばれたときに、配列の各エレメントに対して、それぞれkoPatch.getChanges、koPatch.resetChanges、koPatch.applyChanges を呼び出し、2. の処理を行います。
コード2、3、4で定義した extender を登録します。
track、trackObject、trackObjectArray の extenders を利用して、モデルを作成します。
基本的に以下のようにモデルとプロパティの定義ができます。
モデルに対する変更の適用と検出
- getChanges
- resetChanges
- applyChanges
使い方のサンプル
コード9で定義したモデルを利用して、使い方のサンプルを紹介します。
このサンプルでは、ユーザーのプロフィールを編集し、DBに保存する操作をイメージします(実際のAJAXのやり取りは省略)。
終わりに
モデルのフィールドが多く、そのまま送ると転送量が多くなるような場合に、JSON Patch を利用して転送量を減らすことができます。レスポンスタイムの短縮につながりますので、モバイル、デスクトップのウェブアプリケーションのユーザーエクスペリエンスの向上ができます。今回ご説明したように実装は簡単です。皆様もぜひ検討してみてください。
著者について
グリシン キリルは、11年前にロシアから来日し、2013年からエンラプトでウェブアプリケーションの開発に従事する。Functional Reactive Programmingに夢中で、クライアントサイドの開発を簡単に、より確かにするための研究を行う。