[React] 新規作成画面と編集画面の実装で気をつけていること

BRANK

SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。!今回の記事は JSConf で @Wakeupsloth さんが発表していた内容が個人的に気をつけていることとかなり似ていたので、自分なりの整理として記事にまとめました。@Wakeupsloth さんの発表では様々な観点からコンポーネント設計についてまとめられていますが、本記事では新規作成画面と編集画面の実装についてのみ触れていきます。 ここを別に実装してしまうと仕様が変わったときに変更する箇所が多くなってしまいます。なのでフォーム部分(入力とバリデーション)は共通化しておきたいです。そこで以下のようなコンポーネント構成にします。共通の Form をコンポーネントに切り出して、新規作成と編集コンポーネントがそれぞれ Form コンポーネントを子に持つ構成です。Form コンポーネントに共通の処理を書き、新規作成と編集コンポーネントのそれぞれに独自の処理を書きます。このとき F…