ここでいう「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はきれいに設計しておくと吉
- 画面をアドレスバー直で移動できるので開発のスピードアップにも繋がる