SPAでのリスト表示の実装について教えてください

Question

やりたいこととしては、Web APIから取得したデータをリスト表示するだけの画面なのですが、リストから詳細画面へ遷移して何か操作してからリスト表示の画面に戻る際に、詳細画面の内容を反映したいということになります。

無限スクロールしているので、リロードはしたくないです。
angularだとservice？とかにリストのデータをすべて保持しておき、リストにはその内容を表示。詳細画面での画面操作はserviceを更新。みたいな感じだとやろうと思えばやりたいことはできるとは思うのですが、詳細画面の操作でリストにデータを追加する場合などを考えると、仮にリストにソート条件とかがあるとかなり複雑になる気がします。。

みなさんどのような実装をされているのでしょうか？アドバイスいただきたいです。

Answer 1

ケースバイケースですが、僕の場合、
①serviceに保持するデータ
-> ソート・フィルタを行なっていないもの
②リストでの表示
-> angularのfilterやorderByディレクティブで①の内容を加工して表示。これなら追加、削除にも簡単に対応できる
③詳細画面での更新、追加、削除
-> ①のリストを直接更新

としています。

マッチするケースとしては、①に保持する件数が限定的な場合ですね。
データ構成にもよりますが、1000件くらいまでなら問題なくいけるんじゃないでしょうか。
逆に、それを超えてくる場合は無限スクロールにも要注意です。
特にangularの場合はデータバインディングなど気をつけないと、簡単にメモリ圧迫していきますよ。

上記のケースにマッチしない場合、一気に難易度があがります。データを３階層で捉える必要があり、
①サーバーに保持する全データ
②Serviceに保持するデータ
③Viewで表示されるデータ（無限スクロールで追加取得）
となると思います。この場合は、基本的にはリロード前提に組んだ方が良いかと。
例外ケースとしては、追加 / 削除時のフィルタ・ソート動作をそれほど気にしなくて良いケースですね。
たとえば、作成されたデータは必ずリストの最上部にくる場合など。

具体的なデータ内容を教えてもらえれば、もう少し具体策があつまるかもしれませんよ。

Comments

[yoppy0066]

なるほど、ありがとうございます。できたら別の方のやり方も聞いてみたいのでしばし受付中とさせてください。

Answer 2

AngularJSを使用しています。
あくまで個人的な意見となりますが、このような場合、リストの表示は逐一更新することを前提に考えます。
そのために、リストに表示する件数はある程度絞ります。（リストへの表示は30～300件に限定することが多い）

その上で、詳細画面からリスト画面に戻ったときには逐一リストデータの再取得をかけています。
最もシンプルで開発効率も良く、処理速度も気になりません。

こういった方式にしているのは以下の理由によります。

１．データバインディングが多量になると速度面でデメリットがある（その件を考えたくもない）
２．私がSPAを開発する主なプラットフォームが現状スマートフォンである（画面が小さいため、リスト表示が多くなることによるデメリットがある）
３．多量なデータを表示すべきであるということ（要件）自体に対して見直しをかける契機とする（本来はもっと絞ったデータが表示したいのではないか。大体の場合、要件定義者からできるなら階層化したり絞ったりしたいという回答が返ってきます。）
４．どうしても多量なデータが必要な場合、読み込み対象のデータはある程度で切り捨てて読み込む仕様とし（例えば対象データをキーで並び替えて上から300件を取得）、必要に応じて画面表示対象のデータを絞る機能を提供する

やろうと思えば確かにAngularJSのserviceを上手く利用してやれなくもなさそうですが、上記３．の「要件自体に対して見直しをかける」というのが結構重要で、そもそも多量なデータリストを目にして何かをするということ自体を見直してあげると喜ばれることが多いです。
更に開発もシンプルになりますので保守性や拡張性も高く、良いことづくめです。

ご参考となれば。

Comments

[yoppy0066]

ありがとうございます！
ちなみに要件を落とせない場合、ローカルのデータベースを使ったりの実装もしたりするものなのでしょうか？

[akabee]

ローカルのデータベースというのは、物理的に異なる場所にある、ネットワーク接続しているDBサーバー上のデータベースと区別して、WEBサーバ上に独自で作成するデータベース（的なもの）、ということですかね？
私はしませんが、検討中なのですか？
メリットとして処理速度は得られる気がしますが、それに勝るデメリットが色々と思い浮かび、現状提供されている情報だけではなんとも言えないところです。

[yoppy0066]

いえ、WebDB？等でServiceで管理している内部DBでストレージにおくような実装を行うようなことはあるのかなと少し思いました。