Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

Reactで画面を作る時に気を付けるべきポイントメモ

Last updated at Posted at 2020-09-07

画面表示時

  • 画面の内容とURLが一致していること
  • URLを直接入力した場合でも画面が表示されること
  • 画面タイトルが入っていること

ブラウザのタイムアウト処理

所謂、長時間放置時にセッションが切れたっていう表示をする処理について。

やり方は色々あると思うが、LocalStorageに保持する場合、
セッションタイムアウトの値を暗号化して簡単に操作できないようにすること

イベント

画面遷移時

  • 履歴が追加されること
    • 要はブラウザバックが出来るようになっていること

入力項目への入力時

  • バリデートが実行され、リアルタイムに結果が表示されること

APIコール処理

GET系

画面表示(初期表示)時

リクエスト時
  • Loadingが表示されること(もしくはAPIコールされている雰囲気をだすこと)
  • リクエストがタイムアウトした場合、エラーハンドリングがされること
レスポンス時
  • Loadingが消えること
レスポンス(異常系)時
  • Loadingが消えること
  • エラーハンドリングがされること(エラーメッセージを表示する等)

画面内の一部の表示内容をリフレッシュする時(表示更新ボタン、リスト表示のページ切替時等)

リクエスト時
  • Loadingが表示されること(もしくはAPIコールされている雰囲気をだすこと)
レスポンス時
  • Loadingが消えること
  • 連続でリフレッシュを行った場合、最後のリクエストの結果のみ反映されること
    • リストであれば、1ページ目 > 2ページ目 > 3ページ目 と連続でリンクを押下した場合、3ページ目以外のレスポンスは表示しない
      • 最後にリクエストしたページ番号を覚えておき、レスポンスのページ番号(レスポンスのページ番号は必須)と一致しない場合、結果をスルーする
    • 要は 最初のレスポンス表示 > 次のレスポンス表示 > その次のレスポンス表示 の様に表示内容が段々と切り替わりで表示されないようにすること
レスポンス(異常系)時
  • Loadingが消えること
  • エラーハンドリングがされること(エラーメッセージを表示する等)

POST,PUT,DELETE系

ボタン押下時

ここではボタンを押下した場合を想定して記載する。
ボタンでない場合、随時該当する機能向けに読み替えること。

リクエスト時
  • バリデートが実行され、入力エラーがある場合、リクエストが実行されないこと
    • 「入力項目への入力時」のバリデートエラー処理も実行されること
  • ボタン表示がdisableデザインなっていること
  • ボタンが押下できないこと
  • Loadingが表示されること(もしくはAPIコールされている雰囲気をだすこと)
  • タイムアウトした場合、エラーハンドリングがされること
レスポンス時
  • ボタン表示がenableデザインに戻ること
  • ボタンが押下可能になること
  • Loadingが消えること
  • 自画面遷移の場合、画面の内容を最新状態へリフレッシュするため、画面表示用のGETを実行し反映させること(詳細は"画面表示時"参照)
  • 他画面遷移の場合、画面遷移すること
レスポンス(異常系)時
  • ボタン表示がenableデザインに戻ること
  • ボタンが押下可能になること
  • Loadingが消えること
  • エラーハンドリングがされること(エラーメッセージを表示する等)
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?