skillup

技術ブログ

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

画面の制御フローなど

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

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

例として

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

などです。

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

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

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

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

制御フローの整理

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

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

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

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

制御の一元化

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

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

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

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

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

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

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

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

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

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

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

執筆者:


comment

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

関連記事

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5f2d4 …

no image

プログラミングを習得するときに必要な2つの大事なこと

元々私は塾で仕事をしていましたが、いろいろ紆余曲折ありましていまではWEBエンジニアとして仕事をしております。 エンジニアとしてのキャリアは3年ぐらいなので正直あまりないのですが、開発者と平行してプロ …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

オブジェクト指向 プレゼンテーション層

本日も引き続き「現場で役立つシステム設計の原則」を読み進めてます。 本日はプレゼンテーション層、いわゆるMVCのViewにあたる部分。 Contents1 プレゼンテーション層の考え方1.1 要点1. …

no image

オブジェクト指向設計 ダックタイピング

オブジェクト指向シリーズ。ダックタイピング・・読む前は名前は聞いたことあるような気がする・・程度で細かいことは何一つわからない状態でした。今回具体的なコード例があった分イメージを何とかつかむことはでき …