新規作成画面をなくすと考慮事項が激減して嬉しい

例えば CMS の管理画面を考えます。

/posts に記事一覧画面、/posts/new に新規作成画面、 /posts/:postId に記事更新画面を置くような URL の設計はあるあるかと思います。

今回は /posts/new の画面はないほうが色々嬉しいと思った話をします。

新規作成画面があることで増える考慮事項

まず新規作成画面があると、どんな煩わしさがあるかを考えます。

下書き保存した時、どうする？

新規作成画面で下書き保存をすると、内部的にはリソースの ID が採番されます。つまり下書き保存した段階で、それは記事更新画面になるはず。

その ID で URL を /posts/:postId に書き換えるかどうかを検討します。

筆者は React 一辺倒人間なので React 寄りの話にはなりますが、Next.js や React Router などでは /posts/new, /posts/:postId それぞれにページコンポーネントを割り当てることになります。その時、URL を書き換えると当然ページ遷移として別のコンポーネントをマウントしようとします。そのコンポーネントの変更によってユーザーに違和感を与えないようにステートを維持することは難しく表示バグの原因にもなり得ます。

/posts/new と /posts/:postId を同じコンポーネントで扱うことも考えられます。つまり、 postId===”new” の時、新規記事とみなすような設計です。

想像しやすいですが、コードに分岐が増えて煩雑になり、可読性の低下やバグの原因になるでしょう。またステートとしての postId が変化することになるため、swr や tanstack-query などで記事データをフェッチしていると、余計なフェッチが走ります。それを抑制しなきゃ…とまた煩雑なコードが生まれます。

では URL の遷移を諦めて、新規作成画面での下書き保存後も引き続き /posts/new で編集をしてもらうとしたらどうでしょうか。

URL を変更しないとしても、下書き保存後は ID が採番されてその ID をもってリソース更新を行う必要があります。つまり、下書き保存時の ID を内部ステートとして保持しておき、2 回目以降の保存でそれを使うようなロジックを組む必要があります。大変そうですね。

また、ユーザーがブラウザリロードした場合はどうすればよいでしょうか。下書き保存しているので、リロードしてもそのままその記事の編集画面が表示され続けるのが良い気がします。しかしブラウザは JavaScript の記憶を抹消した上で /posts/new をリロードするわけで、またまっさらな新規作成画面が表示されます。

コンポーネント分けるか問題

新規作成画面と記事更新画面でコンポーネントを共有するかどうかも悩みポイントになります。新規作成だろうが既存更新だろうが入力要素に変わらないでしょう。ですので、共通化して良さそうに思います。しかしところどころ、新規作成画面なのか記事更新画面なのかで分岐が出てきます。ラベルの表示だけでなく、保存ロジックなどでもいくつも分岐が出てくるでしょう。

新規作成画面を作らない場合

では新規作成画面を用意しない場合、どれだけすっきりするか考えましょう。

新規作成画面がなくなると言っても、どこがでリソースの作成を行う必要はあります。その役目は、記事一覧画面の(/posts) の新規作成ボタンに任せます。ボタンがクリックされたら下書き状態の記事リソースを作成し、その ID で /posts/:postId に遷移するのです。

こうすることで、その記事投稿画面が新規作成用なのか既存更新用なのか区別する必要がなくなり、ステート管理が非常に楽になります。

もはや /posts/new は存在しません。存在しないので、下書き保存されたら遷移すべきかとか、リロードされたらどうするとか考える必要がなくなります。嬉しいですね。

操作と画面が一致する

「新規作成」はリソースを追加する操作ですね。じゃあどこに追加するかというと、記事一覧(記事の集合)に対して追加します。

一方で「更新」はリソースそのものに対して行う操作です。

「追加」と「更新」では操作の対象がそもそも違うわけで、操作対象の画面で行うことで余計なステート管理がなくなります。

操作性の観点

記事一覧の新規作成ボタンでいきなり記事が作成されるのは、ユーザーの意図に反するかもしれません。

しかし、記事は下書き状態で作成されるのでユーザーの記事が勝手に公開されることはありません。なので何度か使用するうちに慣れてもらうだけでよいです。

Qiita や note は /post/new に URL を持ちますが、notion は記事作成ボタンクリックですぐ記事を作成します。すでに有名サービスでも使われているデザインのため、それほど違和感も大きくないはずです。

まとめ

新規作成画面をなくすと色々嬉しいという話をしました。

新規作成画面をなくして、記事一覧ページの新規作成ボタンのクリックで空の下書き記事を作成するようにします。そうすることで、余計なステート管理がなくなり、分岐も減るので開発が楽になります。単純に実装する画面も 1 つ減ることになりますしね。

それではまた。