複雑な帳票系アプリではよくあると思うのですが、ある入力値が複数の場所から影響を受けており、制御がなかなか難しいときなどがあります。
例として
- クリアボタンなどでクリアされる
- 他のプルダウンなどで影響を受ける(クリアorグレーアウト)
- 直近のチェックボックスなどの値によりグレーアウトされる
などです。
複数の場所から影響を与えるような場合ですね。
クリアボタンなど単発のイベントの処理はいいのですが、グレーアウトするなど状態を定義する場合は色々と工夫が必要です。
しかも実際に実装をする場合には通常の入力以外に、エラーチェックや確認画面、参照画面から戻ってきたときなどの制御もできていないといけません。
そのときに気をつけなければいけないことを描いてみました。
制御フローの整理
顧客の要望をなんでもかんでも取り入れると要件が錯綜してこのようになるかと思います。
原則としてなるべくシンプルでわかりやすい画面の構図や遷移などを組むのが良いのではないでしょうか。
複数の要望があった場合でも要件をなるべく単純化させた方がユーザーにとってもわかりやすくなるのではないかと思います。
設計段階の考慮になるのですが、あれもこれもでなく、なるべくシンプルな制御にするのが良いのではないでしょうか。
制御の一元化
ある値の状態を定義する場合は全て特定のメソッドを通るようにするなど出入り口を一元化することですね。
これは通常のプログラムの考え方と一緒で通る場所が一箇所であればそこで全ての動きを統一できるのが望ましいです。
JSを使う場合、通常の画面入力をするときと、エラーや確認画面からの戻りなどの場合でケースを分けないほうがよいでしょう。(画面読み込みなどが少し気持ちが悪いのですが・・・)
特定の値から常に状態を参照できるようにする
一般的にはイベントをトリガーにしてある値の状態を定義すると思いますが、必ずそのイベントを通るかはわかりません。
その場合、あるHTML要素の「状態」から参照できるのがベストです。
vueなどですと、特定の値から特定の要素の状態を常に参照しておくことができるのでこのような迷いが少ないかと思います。
また同じDOMの状態を定義するならJSよりもCSSの方が状態から参照をするため、正確です。
JS、特にjQueryなどを使ったイベントベースだと特定の処理に発火するためどうしても考慮漏れがおきてしまう可能性が出てきます。
UI&UXなどを勉強した方がいいのかも・・・
