［優れたUXを目指して］アプリの性能について：第１回

これまでGUIの歴史やUXについて記事を書いてきましたが、どんなに優れたUIや機能を提供してもアプリの動作が遅いと、それ以前の問題となってしまいます。そこで今回はアプリの性能について解説したいと思います。

私は業務として証券取引関係のアプリに関わることがあります。それらのアプリでは株価を表示するのですが、株価は秒間何度も値が変わり、かつ同時にたくさん表示する必要があるため、アプリにはそれなりの性能が求められます。

このシリーズではそんなアプリ開発の経験から得た知識について書いてます。

これから以下のことについて触れていきたいと思います。
今回は 「1. 環境を知る」「2. 実行回数を知る」についてです。

// computed なメソッド 　ランキング取得() { 　　const 種別 = Get選択されたランキング種別();　 　　const 市場 = Get選択された市場(); 　　const 期間 = Get選択された期間(); 　　ランキング取得API呼び出し(); 　}

1. ランキング種別を変更する 　2. ランキング取得のメソッドが実行される　 　3. 市場がデフォルト値に設定される 　4. ランキング取得のメソッドが実行される　 　5. 期間がデフォルト値に設定される 　6. ランキング取得のメソッドが実行される

なんとcmputedなメソッドが３回も実行されてしまいました。その結果、アプリの描画が遅くなるだけでなくサーバーの呼び出し回数が増えてしまうのでサーバーサイドにまで負荷をかけることになります。しかも最終的な表示結果は正しいものになりますので機能テストでは正常と判断されてしまいます。

こういった自動的な再評価機能は非常に便利なのですが実行回数は気にしておきましょう。ロジックをちゃんと考えれば回避できるかもしれませんし、遅延評価の仕組みがフレームワークに準備されているかもしれませんし、なければ debounce/throttle といったイベント間引きの機能の検討をしましょう。

こうした実行回数の問題は他にも、マウスやスクロールの検知イベントなどの処理、.NETのEventHandlerや RxJSのSubscribeなど、イベント駆動の処理を書くと発生する可能性があります。いろんなケースがあるのでイベント駆動の処理を書く際には何回実行されているのか注意してください。

性能の話とは直接的には関係ありませんが computed なメソッドは　 　いったいどうやって作られているのでしょうか？ 　そういったことも考え、想像することも重要だと思います。 　仕組みが想像できればメリット・デメリットや注意点も見えてきます。

実行回数と似たような話で、画面への反映回数もあります。変数の値が変わると自動的に画面を再描画してくれるような仕組みは多くのフレームワークで存在すると思います。描画も同じ話で、一連の処理で１回だけ描画すれば良いところを何度も描画してしまうケースがあります。描画についてはあまり意識しないかもしれませんが、重たい処理なので再描画が繰り返されると性能に影響を与えてしまいます。

例えば、リストを画面に表示しているケースを考えます。このリストには配列要素の変更を検知し、自動的に画面を再描画する機能があったとします。

この結果、何が起きるでしょうか？

このリストは100回変更を検知するため、画面は100回再描画されてしまいます。

1. リストに要素が追加される 　2. リストは要素が追加されたことを検知する　 　3. 画面を再描画する 　4. リストに要素が追加される 　5. リストは要素が追加されたことを検知する　 　6. 画面を再描画する 　・ 　・ 　以下繰り返し

この場合はどうするべきでしょうか。

よくあるのは、AddではなくAddRangeのように配列を追加するメソッドが用意されてないか確認してください。ない場合は自分で拡張するしかありません。変更通知は .NETであればCollectionChangedやPropertyChangedといった機能で実現されてますので、その通知を抑止することができる自作のCollectionを作成して対応します。

Angularであれば、コンポーネントに対してChangeDetectionStrategy.OnPushを設定して ChangeDetectorRefを利用することで、変更通知を手動にすることができます。さらにZone.jsの仕組みを理解して工夫したり、trackByという機能を使えば効率的に画面の再描画ができる可能性もあります。

この辺りの動きはフレームワークが隠蔽していることもあるので気づくのが難しく、手軽な回避手段が用意されていないこともあります。開発生産性を下げずにどういう仕組みで実現させるのか考えて取り組む必要があります。