skillup

技術ブログ

デザイン プログラミング全般

画面の制御フローなど

投稿日:

複雑な帳票系アプリではよくあると思うのですが、ある入力値が複数の場所から影響を受けており、制御がなかなか難しいときなどがあります。

例として

  • クリアボタンなどでクリアされる
  • 他のプルダウンなどで影響を受ける(クリアorグレーアウト)
  • 直近のチェックボックスなどの値によりグレーアウトされる

などです。

複数の場所から影響を与えるような場合ですね。

クリアボタンなど単発のイベントの処理はいいのですが、グレーアウトするなど状態を定義する場合は色々と工夫が必要です。

しかも実際に実装をする場合には通常の入力以外に、エラーチェックや確認画面、参照画面から戻ってきたときなどの制御もできていないといけません。

そのときに気をつけなければいけないことを描いてみました。

制御フローの整理

顧客の要望をなんでもかんでも取り入れると要件が錯綜してこのようになるかと思います。

原則としてなるべくシンプルでわかりやすい画面の構図や遷移などを組むのが良いのではないでしょうか。

複数の要望があった場合でも要件をなるべく単純化させた方がユーザーにとってもわかりやすくなるのではないかと思います。

設計段階の考慮になるのですが、あれもこれもでなく、なるべくシンプルな制御にするのが良いのではないでしょうか。

制御の一元化

ある値の状態を定義する場合は全て特定のメソッドを通るようにするなど出入り口を一元化することですね。

これは通常のプログラムの考え方と一緒で通る場所が一箇所であればそこで全ての動きを統一できるのが望ましいです。

JSを使う場合、通常の画面入力をするときと、エラーや確認画面からの戻りなどの場合でケースを分けないほうがよいでしょう。(画面読み込みなどが少し気持ちが悪いのですが・・・)

特定の値から常に状態を参照できるようにする

一般的にはイベントをトリガーにしてある値の状態を定義すると思いますが、必ずそのイベントを通るかはわかりません。

その場合、あるHTML要素の「状態」から参照できるのがベストです。

vueなどですと、特定の値から特定の要素の状態を常に参照しておくことができるのでこのような迷いが少ないかと思います。

また同じDOMの状態を定義するならJSよりもCSSの方が状態から参照をするため、正確です。

JS、特にjQueryなどを使ったイベントベースだと特定の処理に発火するためどうしても考慮漏れがおきてしまう可能性が出てきます。

UI&UXなどを勉強した方がいいのかも・・・

-デザイン, プログラミング全般

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

オブジェクト指向 ドメインモデル

本日も引き続き「現場で役立つシステム設計の原則」を読み進めてます。 本日は主にドメインモデルの考え方について。 Contents1 ドメインモデルの考え方1.1 要点1.2 感想 ドメインモデルの考え …

no image

データ構造の基礎知識 前編 メモリとポインタ、配列と連結リスト

WEB+DB(vol91)で使えそうな連載記事がありますのでブログにメモリます。 テーマはデータ構造です。 Contents1 データ構造とは?2 計算量3 プログラムとメモリ4 配列について4.1 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

短いコードを書く

私が普段コードを書くときに考えていることは常にいかに短くかけるか、ということといかにバグを生み出さないかということです。 基本的にはできるだけ、短くシンプルに書くようにしています。 そうすることであと …