0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

URLと画面内容がずれないように設計する

Last updated at Posted at 2024-11-14
1 / 8

ここでいう「URL」は主に画面が対象

  • URLを起点に考える
    「この処理を行うのはどんなURLが相応しい?」
  • URLと画面内容がずれると困ることが多い
    ブックマークがおかしくなる

具体例1:Qiitaの新規記事作成


具体例2:とあるアプリ

  • 一覧画面にて「新規作成」をクリックすると、新しい図が作成され、編集画面が開く
  • みなさんはどう設計しますか?

私が考えた作り

  • 「新規作成」を推すと/diagram/newに遷移
  • /diagram/<diagram-id>のブラウザにて処理:diagram-idが"new"の場合、APIにて新しい図の作成をリクエスト
  • 戻り値の図IDで URLを組み立て、 /diagram/APIの戻り値の図ID にリダイレクト

別解

  • 「新規作成」を推すと/diagram/newに遷移
  • /diagram/<diagram-id>のサーバ側処理にて新しい図を作成、そのIDから組み立てた/diagram/新しい図のIDへのリダイレクト(301)レスポンスを返す

大事なこと

  • /diagram/newをいつまでも表示しない。図にIDが振られた時点でそのURLを使う
  • こうしておくことで、例えばブックマークしたり、他の画面からのリンクが簡単に貼れるようになる
  • 特に後者が重要で、URLへのリンクを張るだけで正しく遷移できる状態を作っておくことはWebアプリの柔軟性を支える重要な基礎技術

最後に

  • URLは外部仕様と考える(画面設計と同レベル)
  • 特に画面のURLはきれいに設計しておくと吉
  • 画面をアドレスバー直で移動できるので開発のスピードアップにも繋がる
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?