Skip to content

Instantly share code, notes, and snippets.

@KOBA789

KOBA789/warning.md

Last active August 29, 2015 14:14
Show Gist options
  • Save KOBA789/599399bba68f9a61e830 to your computer and use it in GitHub Desktop.
Save KOBA789/599399bba68f9a61e830 to your computer and use it in GitHub Desktop.
Download ZIP
JS でフロントエンドを書くときに気をつけること
Raw
warning.md

ポエム

JS でフロントエンドを書くときに気をつけること

  • いかなる時も UI はブロックされず、ユーザーは自由である

    • 押せるボタンはすべて押すものとして設計する
    • フォームの送信ボタンを押した瞬間にフォームの要素は適切に readonly あるいは disabled になるべきである

  • ユーザーの操作を UI だけで制限してはいけない

    • tab キーよるフォーカス移動などによって不可視な要素に対してイベントを発行できる
    • 制限された操作についてはロジック側でもイベントを棄却する
      • 「戻る」操作は棄却できない
    • モーダルダイアログは全く「モーダル」ではない

  • 不要なイベントをハンドリングしない

    • ハンドリングされないイベントがどれなのか UI 上でわかるようにする
      • 要素を disable する
      • リンクの色を変える

  • 常にブラウザは「戻る」を使えるということを念頭に置く

    • 「戻る」操作の際、モーダルダイアログは勝手に閉じるようにする

  • アニメーションには4つの状態がある

    • 状態A
    • アニメーション中(A->B)
    • 状態B
    • アニメーション中(B->A)

  • アニメーション中の振る舞いはアニメーション後の状態を基本とするとよい

感想

イベントのハンドリングはホワイトリストのほうがマシ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment