§09-01
マルチステップ wizard
長い入力を複数の画面に分け、進捗を示す。
項目の多い申し込みや設定を一度に見せず、段階的に進めさせる。長いフォームを見て離脱されるのを防ぎ、残りの量を把握させる。
実装のポイントステップごとに部分スキーマで検証し、通過しないと次へ進めないようにする。入力値は全ステップで 1 つの state に持ち、戻っても消えないようにする。
- フォーム
- 状態管理
§09
入力・フォーム
Forms
- Patterns
- 27
- Demos
- 27
§09-02
Autosave (status 表示)
入力を自動保存し状態を表示する。
保存ボタンを押し忘れても入力が失われず、保存されたかどうかを常に確認できる。長文編集や複数項目の設定画面で安心感を与える。
実装のポイント入力が止まってから保存するデバウンスにし、「未保存」「保存中」「保存済み」を区別して出す。保存失敗時は再試行とローカル退避を用意する。
- タイマー
- 非同期
§09-03
Inline validation
入力欄ごとに正誤をその場で表示する。
送信を待たずに入力の誤りをその場で知らせ、まとめて差し戻される手戻りをなくす。項目が多い登録フォームや形式の厳しい入力で効く。
実装のポイント検証は入力中ではなく blur 後か一度送信した後から出すと、打ち始めで赤くならない。エラー文は aria-describedby で入力欄と結び付ける。
- フォーム
- アクセシビリティ
§09-04
Autocomplete (タグ/型)
入力に合わせて候補を出し選択で確定する。
長い名前や正確な表記を覚えていなくても入力できる。タグや住所、ユーザー名など、候補が決まっている入力欄で誤入力を減らす。
実装のポイントrole=combobox と aria-activedescendant で候補を伝え、上下キーで移動・Enter で確定できるようにする。リモート検索は入力をデバウンスし、古いレスポンスを捨てる。
- キーボード操作
- アクセシビリティ
§09-05
ドラッグ&ドロップ upload
ファイルをドラッグして置く領域でアップロードする。
ファイル選択ダイアログを開かずに直接ファイルを渡せるようにする。複数ファイルや画像をまとめて送る場面で手数を減らす。
実装のポイントdragover で preventDefault しないと drop が発火しない。ドロップ領域は隠した input type=file と連動させ、クリックとキーボードでも選べるようにする。
- ブラウザ API
- ジェスチャー
§09-06
ペースト upload
クリップボードの画像を貼り付けてアップロードする。
スクリーンショットをファイルに保存する手間なく、そのまま添付できる。チャットや不具合報告のように画像を頻繁に添える場面で効く。
実装のポイントpaste の clipboardData.items から image/* を拾い getAsFile で File 化する。プレビューは createObjectURL で作り、不要になったら revoke する。
- ブラウザ API
§09-07
リッチテキストエディタ (block)
ブロック単位で編集し「/」でブロックを挿入する。
見出しや画像などを段落単位で組み合わせ、書式を意識せずに文書を組める。ノートや記事の執筆で、キーボードから手を離さずに要素を足したいときに向く。
実装のポイントcontentEditable を直接扱うと選択範囲と IME の扱いが難しいため、ドキュメントモデルを持つエディタ基盤に任せる。「/」メニューはキャレット位置に出す。
- キーボード操作
§09-08
Markdown editor (split/preview)
Markdown を書きながら結果を並べて確認する。
記法の結果をすぐ確かめられ、書き上がりの不安が減る。ドキュメントや記事の執筆で、記法に慣れていない人にも書いてもらうときに向く。
実装のポイントプレビューは Markdown パーサーで生成し、HTML はサニタイズしてから描画する。分割表示ではスクロール位置を同期すると対応箇所を追いやすい。
- 状態管理
§09-09
Code editor (Monaco/CodeMirror)
構文ハイライトと補完付きでコードを編集する。
利用者にコードや設定を書かせる画面で入力の誤りを減らす。テンプレートや数式、スクリプトを扱う管理画面に向く。
実装のポイントハイライトや補完は textarea の上に重ねるより、専用エディタを動的 import で遅延読み込みする方が確実。Tab キーの扱いとフォーカス脱出の手段を決めておく。
- キーボード操作
§09-10
Mention picker
@ の入力で候補を出し相手を選ぶ。
名前の一部を打つだけで正しい相手を選べ、表記ミスで通知が届かないことを防ぐ。コメントやチャットの入力欄に組み込む。
実装のポイントキャレット直前の「@語」を正規表現で検出し、候補を上下キーで選んで Enter で置換する。確定後は表示名ではなくユーザー ID を本文データに埋め込む。
- キーボード操作
- フォーム
§09-11
Emoji picker
絵文字を検索して選べるパネルを開く。
絵文字を名前で探して素早く挿入でき、OS のキーボードに頼らずに済む。チャットや反応機能で、表現の幅を手軽に広げたいときに使う。
実装のポイント絵文字は名前とキーワードのデータを持たせて検索し、最近使ったものを先頭に出す。グリッドは矢印キーで移動でき、各ボタンに絵文字名のラベルを付ける。
- キーボード操作
§09-12
日付 picker (single/range)
カレンダーから日付や期間を選んで入力する。
曜日や前後の日付を見ながら選べて、形式の入力ミスがなくなる。予約や期間指定の絞り込みなど、日付を正確に取りたい入力欄で使う。
実装のポイント日付は「年-月-日」の文字列か UTC 0 時で持ち、タイムゾーンによる日ずれを防ぐ。範囲選択では開始と終了の 2 クリックとホバー中の仮範囲表示を用意する。
- 状態管理
§09-13
時刻 picker (タイムゾーン)
タイムゾーンを自動検出して時刻を選ぶ。
地域の異なる相手と予定を合わせるときに時刻のずれを防ぐ。会議予約や配信予約など、利用者が複数の国にまたがる場面で効く。
実装のポイントタイムゾーンは Intl.DateTimeFormat().resolvedOptions().timeZone で検出し、保存は UTC と IANA タイムゾーン名の組で持つ。
- ブラウザ API
§09-15
スライダー / レンジ
つまみを動かして数値や範囲を選ぶ。
下限と上限をつまみで選び、数値を打たずに範囲を絞れる。価格帯や期間など、厳密な値より大まかな幅を素早く指定したい絞り込みに向く。
実装のポイント2 本の input type=range を重ね、つまみだけ pointer-events を有効にする。最小値と最大値が交差しないよう、更新時に互いの値でクランプする。
- 状態管理
§09-16
ステッパー / spinner
+/− ボタンで数量を一つずつ増減する。
小さな数をキーボードなしで素早く調整できる。カートの個数や人数など、取り得る値が少ない数量入力に向き、大きな数には向かない。
実装のポイント+/- ボタンと数値入力を同じ値で同期させ、最小値・最大値でクランプする。直接入力は blur 時に正規化し、ボタンには「数量を増やす」などのラベルを付ける。
- 状態管理
- フォーム
§09-18
セグメント control
排他的な選択肢をボタンの並びで切り替える。
表示モードや期間など、少数の選択肢をその場で切り替えたいときに使う。全選択肢が見えるので、現在の選択と他の候補が同時に分かる。
実装のポイント実体は単一選択なので role=radiogroup と role=radio(または aria-pressed)で状態を伝える。選択肢は 2〜5 個程度に抑え、矢印キーで移動できるようにする。
- キーボード操作
- アクセシビリティ
§09-19
クエリ式 builder (if-then UI)
条件とアクションを組み合わせてルールを作る。
「もし〜なら〜する」の形で条件を組み立て、コードを書かずに自動化や絞り込みを定義できる。通知ルールや高度な検索条件の設定に使う。
実装のポイント条件はフィールド・演算子・値のツリー構造で持ち、フィールドの型に応じて使える演算子と入力 UI を切り替える。保存前にプレビュー件数を見せると誤設定に気付ける。
- フォーム
- 状態管理
§09-21
タグ入力 (chip 入力)
入力した語を Enter でチップに変えて並べる。
複数のラベルや宛先を自由入力で追加する。候補が決まっていない語を付けたいときや、入力済みの項目を個別に外したいときに向く。
実装のポイントEnter とカンマで確定し、空欄での Backspace は直前のチップを消す。IME 変換中の Enter は isComposing で除外し、重複タグは追加前に弾く。
- キーボード操作
- フォーム
§09-22
ファイルクロップ / 画像編集
アップロードした画像をその場で切り抜く。
アバターやサムネイルの表示枠に合わせて、別アプリを使わず構図を調整できる。固定比率の画像が必要な場面で使う。
実装のポイント表示用の拡大率と位置から元画像上の切り抜き矩形を逆算し、canvas の drawImage で書き出す。ドラッグでの位置調整とアスペクト比固定をセットで用意する。
- 状態管理
§09-23
署名 (canvas)
画面上に指やマウスで手書きの署名を描く。
紙に書くのと同じ動作で署名を残し、契約や受領の確認を画面上で完結させる。印刷と郵送を省きたい申込みや受け取りの場面に向く。
実装のポイントPointer Events で描画し setPointerCapture で枠外でも線を途切れさせない。CSS 上のサイズと canvas の解像度を devicePixelRatio に合わせて座標を変換する。
- ブラウザ API
- ジェスチャー
§09-24
縦スクロール choose 1 (number scroller)
縦にスクロールして一つの値を選ぶ。
時刻や数量のように連続した候補から一つ選ぶ操作を、タッチで素早く行える。モバイルのフォームで、長いドロップダウンの代わりに使う。
実装のポイントscroll-snap-type: y mandatory のリストで作り、中央の項目をスクロール終了時に確定する。上下キー操作と role=spinbutton での値の伝達も用意する。
- 状態管理
§09-25
入力途中 candidate (IME 挙動考慮)
日本語変換中の Enter で誤送信しない入力欄を作る。
日本語入力の変換確定を送信と誤認させない。チャットや検索のように Enter で送る欄で、変換途中の文が送られる問題に効く。
実装のポイントEnter 判定では compositionstart/end のフラグに加え、KeyboardEvent.isComposing や keyCode 229 も見る。ブラウザによってイベント順序が異なるためである。
- キーボード操作
- ブラウザ API
§09-26
Form 復元 (戻ってきたら入力残ってる)
離脱後に戻った際、入力途中の内容を復元する。
誤ってページを閉じたり他の画面へ移っても、入力をやり直さずに済む。長いフォームや途中で参照が必要な申請で効く。
実装のポイント入力を localStorage にデバウンスして保存し、マウント後に読み込んで復元を通知する。送信成功時には必ず消し、機密項目は保存対象から外す。
- 永続化
- ブラウザ API
§09-27
Optimistic submit
サーバーの応答を待たずに送信結果を画面に出す。
送信した内容を即座に画面に反映し、待ち時間を感じさせない。コメント投稿やチェックの切り替えなど、失敗が少なく小さな操作に向く。
実装のポイント楽観更新は送信前に仮 ID で表示し、失敗時のロールバックと再送の導線を先に設計する。成功時はサーバーの ID で仮 ID を置き換える。
- 楽観的更新
- 非同期