skillup

技術ブログ

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

画面の制御フローなど

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

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

例として

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

などです。

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

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

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

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

制御フローの整理

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

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

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

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

制御の一元化

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

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

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

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

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

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

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

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

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

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

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

執筆者:


comment

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

関連記事

no image

Observeパターンについて

Contents1 Observeパターン2 他の対策2.1 プログラムで頑張って制御2.1.1 メリット2.1.2 デメリット2.2 Databaseのtirggerを使う(DB更新系のみ)2.2. …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

コードレビュー時のポイント

コードレビュー(仕様的な点ではなくて規約的なところのチェック)などで気をつけることなど。 ポイントとしては検知ツールで確認するコストを減らすことが一番大事(カスタマイズの方法について調べておく)、ある …

no image

OSコマンドインジェクション

Contents1 OSコマンドインジェクションとは?2 被害3 対策4 参考リンク OSコマンドインジェクションとは? OSに対する命令文を不正に紛れ込ませて攻撃させる手法。 被害 サーバー内のファ …

no image

アクセストークンの分類について

認可情報を取得する際に、ID &パスワードではなく、アクセストークンで認証を行うサービスは多いと思うのですが、アクセストークンにも色々ありますので、再度まとめておこうと思います。 以前まとめた …

アーカイブ