skillup

技術ブログ

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

画面の制御フローなど

投稿日:2020年3月14日 更新日:

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

例として

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

などです。

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

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

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

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

制御フローの整理

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

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

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

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

制御の一元化

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

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

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

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

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

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

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

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

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

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

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

執筆者:


comment

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

関連記事

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

Excelでのテストデータ作り

ExcelVBAでテストデータを作るときに役に立った関数などを紹介させていただきます。 user_id time 2143 2017/1/16 3:35 6724 2017/1/2 6:05 4528 …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

テストコードの考え方

一般的なプログラマにとって日々の業務で何がいやかというと、 理不尽な納期 むちゃくちゃな仕様変更 頻発するバグ・不具合 であることは異論がないでしょう。仕様変更や納期などは自分で何とかしがたい部分もあ …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

アーカイブ