「キャンセル」と「クリア」の違い
ここではReactのuseStateを用いたキャンセル機能の実装について紹介します。
様々なアプリケーションにおいて実装されている「キャンセル」機能ですが、「クリア」機能とどのように異なるのでしょうか？大まかに言ってしまえば、以下の違いがあると言えます。
- 「クリア」は初期化
- 「キャンセル」は直前の操作の取り消し
それでは実際の動きを見ていきます。
今回は下のようなUIから、購入したい品物を選択する場面を考えてみます。
各品物の選択状態を管理するためにuseStateを用います（初期条件ではすべてfalse）。
cancel.js
const [selectState, setSelectState] = useState({
rice: false,
meat: false,
fish: false,
vegetable: false,
snack: false,
})
ここで、「決定」ボタンが押された時に、選択されている品物の選択状態がtrueとなるようにします。
例えば「米」と「肉」を選択した状態で「決定」ボタンを押すと、"rice"と"meat"に対する値がtrueに更新されるといった具合です。
では、この状態管理の情報を用いたキャンセル機能の実装について、次の2パターンの場合に分けて考えてみます。
- 「決定」ボタンが1回も押されていない場合
この場合、品物を実際には何も選択していない状態でのキャンセルとなるため、すべてのチェックボックスのチェックを外せばよいことになります。なお、この「すべてのチェックボックスを外す」動きを「決定」ボタンが1回以上押された状態で行うと、それは「クリア（初期化）」となり、後述する「キャンセル」動作とは異なる動作となります。 - 「決定」ボタンが1回以上押されている場合
この場合、直前の「決定」ボタンクリック時の状態を復元することで、キャンセルの動きを実現することができます。
例えば、「魚」と「野菜」を選択して「決定」ボタンを押したとします。このとき、selectStateにおいて、"fish"と"vegetable"に対する値がtrueに更新されます。
その後、「菓子」をチェックして、やっぱりやめたということで「キャンセル」ボタンを押して再度確認すると、「菓子」からはチェックが外れていて、「魚」と「野菜」のみチェックがついている状態となります。
↑この状態で「キャンセル」ボタンを押すと、、
元の状態に戻りました（「クリア」機能では、この場合でもすべてのチェックボックスのチェックが外れることとなります）。
以上が、初期化を行う「クリア」機能とは異なる「キャンセル」機能の基本的な考え方となります。
ご覧いただきありがとうございました。