skillup

技術ブログ

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

画面の制御フローなど

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

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

例として

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

などです。

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

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

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

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

制御フローの整理

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

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

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

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

制御の一元化

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

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

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

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

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

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

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

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

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

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

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

執筆者:


comment

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

関連記事

no image

emptyの扱いに関して

PHPで空白や存在確認として便利なemptyですが、乱用すると意図しない動きをすることがあるケースが多々あります。 Contents1 emptyの挙動に関して2 数値の03 検索などの全判定と値のな …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

命名規則について

リーダブルコードシリーズ第2段、名称について。 コードにおいては名称がとても大切で、正しい命名づけなどはなかなか難しいです。 以下に大事で重要だと思ったポイントを。 Contents1 具体的でわかり …

no image

新しいプロジェクトに入った時にやること

新しいプロジェクトに入った時に最初にすべきことややっておくことなど Contents1 仕様理解編1.1 ユーザーの行動遷移の理解1.2 キー系のデータの理解1.3 データグルーピング1.4 サンプル …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

アーカイブ