動的なUIを作るとき、APIはバッググラウンドで実行しよう

スポンサーリンク
スポンサーリンク

早いは最高のUXだ。

確認画面のない保存をする動的なUIでAPIの返りを待っていたら遅すぎてUX的には最悪になってしまう。

 

今回実装するもの

今回実装するもの

概要:記事にタグをつける機能。

 

テーブル構造:記事とタグとの関係位は1対多

 

仕様:

記事に紐付いたタグがリストで表示されていて、タグを入力するフォームから追加するとリストが更新されていく。

記事にタグ付けするAPIを叩くとtagテーブルと関係テーブルのレコードが作成される。

 

処理の流れ

この仕様を単純に実装すると

1.フォーム入力してボタンを押す

2.APIをリクエスト

3.APIのリクエストが成功したら、タグをリストに追加する。

これだとタグ追加がAPIの速度に依存しますね

 

解決方法

1.フォーム入力してボタンを押す

2.リストに追加する

3.APIをリクエスト

4.APIが正常に返ってきた場合はスルー、エラーの時は追加したタグを削除。

こうすることでボタンを押した即座にタグが設定されたように見える。

 

See the Pen Tag and API DEMO by Masa (@komayuki) on CodePen.

 

 

実装はこんな感じ。

APIの代わりにsetTimeoutで1秒後にエラーを発生させ、アラートを出して追加したタグを削除している。

このコードだとリストの最後の値を削除しているが、厳密に作る場合はリストのindexで削除するものの位置を判定する必要がある。