{extends:gui}

# フロントエンド知識

Webアプリでは、コンポーネントの設計に加えて、URL、HTMLの操作、通信結果の表示を考える。

## URLと画面遷移

RouterはURLに対応する画面を開く。パスやqueryから対象を識別する値を読み取り、対象なし、不正な値、閲覧権限がない場合をそれぞれ表示する。

検索条件をURLに持たせると、リンクの共有や「戻る・進む」で同じ検索を再現できる。入力途中の値やメニューの開閉など、その場だけで使う状態は部品内で持てる。

画面を追加したら、仕様で必要なリンクやメニューから開けることに加え、URLを直接開く場合と「戻る・進む」で移動する場合の表示を確認する。

リンクを使うかボタンを使うかは操作の意味で決める。リンクは別のURLへ移動し、ボタンは現在の画面で操作を行う。見た目だけで要素を選ばない。

## HTML操作とアクセシビリティ

HTMLのボタンやリンクには、キーボード操作やフォーカスの機能が備わっている。操作の意味に合うHTML要素とaccessible nameを選び、その標準の機能を利用する。

操作要素には、支援技術が読み上げる名前（accessible name）を付ける。入力欄とラベルを関連付け、選択・展開・チェック・無効の状態も要素や属性で伝える。モーダルダイアログでは、開いたときにフォーカスを移し、閉じたときに元の操作要素へ戻す。

モーダルダイアログを開いている間は、TabとShift+Tabでフォーカスが背景へ抜けないようにし、背景のクリック、キーボード操作、ショートカットなどのユーザー操作全体を受け付けない。`aria-modal`の指定だけでは背景の操作を止められないため、背景の操作を抑止する仕組みを用意する。

一覧に編集・削除ボタンが並ぶ場合は、対象の行を読み上げる名前や行との関連付けから識別できるようにする。通信結果は必要に応じて読み上げ、失敗時には再試行や入力修正の方法を示す。

UIライブラリは、導入済みバージョンの型と公式資料で使い方を確認する。実際に生成されるHTMLについても、名前、role、状態、キーボード操作を確認する。モックを使ったテストだけでは、ライブラリが生成するHTMLまでは確認できない。

ブラウザのnative DOMイベントは祖先にも伝わる。クリック処理とフォームの送信処理から同じ操作を呼ぶと、二重送信になる。副作用を開始する入口は一つにする。

## 通信中・空・失敗を表示する

画面の通信には、未開始、読み込み中、成功、空、失敗、キャンセルの違いがある。空の配列を返して読み込み中や失敗を隠すと、利用者は待つべきか再試行すべきか分からない。

再試行を提供する場合は、失敗した対象と内容、現在の状態から失敗表示と再試行の可否を決める。再試行は表示した対象と内容に対応させる。仕様上必要な案内や操作を表示できるようにする。表示部品は特定のAPIや画面遷移を呼ばず、取得責務を持つ画面が処理を開始する。再試行を処理する担当も、実行時に対象と内容、現在の再試行可否を確認し、表示している再試行の対象・内容と実際の処理を一致させる。

対象APIのクライアントが既にある場合は、その型、認証、エラー処理を使う。同じ通信処理を画面ごとに作ると、APIの変更が片方にしか反映されなくなる。

## データ取得とキャッシュ

一覧と詳細で同じデータを使うなら、画面で取得して両方へ渡せる。独立した通知パネルなら、そのパネルで取得から再試行まで扱える。取得状態やキャッシュの管理には、フレームワークやデータ取得ライブラリの仕組みも使える。

キャッシュは取得対象を区別するキーで管理する。利用者、tenant、対象の識別子、検索条件、並び順など、結果を変える条件をキーから省かない。

更新や削除の後は、キャッシュを更新するか再取得して表示へ反映する。複数ページをつなぐ一覧では、途中の追加・削除・並べ替えによって項目が重複したり抜けたりしないかも確認する。

小さな固定集合を一度に取得するか、大きくなり得る一覧をページングするかは、実際の件数、応答時間、権限範囲、更新頻度から決める。

## ブラウザとサーバーの役割

ブラウザは、入力中の形式チェック、受信済み一覧の並べ替え、プレビューなどを行う。在庫、決済、権限、保存できる状態かどうかは、サーバーが現在のデータから確認する。

画面で操作を受け付けられる状態でも、通信中に権限やデータが変わることがある。サーバーは実行時にも確認し、画面は成功・権限不足・競合・入力不備に応じた結果を表示する。

## ブラウザへ入出力する値

ユーザー入力をHTMLとして挿入すると、意図しないスクリプトが実行されるおそれがある。文字列はテキストとして表示し、HTMLが必要な場合はサニタイズする。URLやCSSへ埋め込む値も、その用途に応じて検証・エスケープする。

外部への移動先は、許可するURLとスキームを確認する。認証情報をURLやログへ出さず、Cookieの送信条件、Web Storageに保存する情報、別オリジンへの送信先を確認する。Cookie認証で状態を変更する通信には、サーバー側も含めてCSRF対策が必要になる。