9.9 KiB
「取引追加」ダイアログの実装
概要
あなたの銀行アプリは、堅牢な状態管理とデータ永続化を備えていますが、実際の銀行アプリに欠かせない重要な機能がまだありません。それは、ユーザーが自分の取引を追加できる機能です。この課題では、既存の状態管理システムとシームレスに統合された完全な「取引追加」ダイアログを実装します。
この課題では、銀行に関する4つのレッスンで学んだ内容をすべて活用します：HTMLテンプレート作成、フォーム処理、API統合、状態管理。
学習目標
この課題を完了することで、以下を達成できます：
- ユーザーフレンドリーなダイアログインターフェースを作成する
- キーボードやスクリーンリーダー対応のアクセシブルなフォームデザインを実装する
- 既存の状態管理システムに新機能を統合する
- API通信とエラーハンドリングを練習する
- 現代のウェブ開発パターンを実際の機能に適用する
手順
ステップ1: 取引追加ボタン
ダッシュボードページにユーザーが簡単に見つけてアクセスできる「取引追加」ボタンを作成します。
要件:
- ボタンをダッシュボードの論理的な場所に配置する
- 明確で行動を促すボタンテキストを使用する
- 既存のUIデザインに合わせてボタンをスタイリングする
- キーボードでアクセス可能にする
ステップ2: ダイアログの実装
ダイアログを実装する際、以下の2つのアプローチから選択してください：
オプションA: 別ページ
- 取引フォーム用の新しいHTMLテンプレートを作成する
- ルーティングシステムに新しいルートを追加する
- フォームページへの移動と戻るナビゲーションを実装する
オプションB: モーダルダイアログ（推奨）
- JavaScriptを使用してダッシュボードを離れることなくダイアログを表示/非表示にする
hiddenプロパティまたはCSSクラスを使用して実装する- 適切なフォーカス管理でスムーズなユーザー体験を作成する
ステップ3: アクセシビリティの実装
ダイアログがモーダルダイアログのアクセシビリティ基準を満たしていることを確認してください：
キーボードナビゲーション:
- Escキーでダイアログを閉じる機能をサポートする
- ダイアログが開いている間、フォーカスをダイアログ内に閉じ込めること
- ダイアログが閉じた際にトリガーボタンにフォーカスを戻すこと
スクリーンリーダー対応:
- 適切なARIAラベルと役割を追加する
- ダイアログの開閉をスクリーンリーダーに通知する
- フォームフィールドのラベルとエラーメッセージを明確に提供する
ステップ4: フォームの作成
取引データを収集するHTMLフォームを設計します：
必須フィールド:
- 日付: 取引が発生した日
- 説明: 取引の内容
- 金額: 取引の金額（収入の場合は正、支出の場合は負）
フォーム機能:
- 送信前にユーザー入力を検証する
- 無効なデータに対して明確なエラーメッセージを提供する
- 役立つプレースホルダーとラベルを含めること
- 既存のデザインと一貫性を持たせてスタイリングする
ステップ5: API統合
フォームをバックエンドAPIに接続します：
実装手順:
- 正しいエンドポイントとデータ形式についてサーバーAPI仕様を確認する
- フォーム入力からJSONデータを作成する
- 適切なエラーハンドリングを使用してAPIにデータを送信する
- 成功/失敗メッセージをユーザーに表示する
- ネットワークエラーを適切に処理する
ステップ6: 状態管理の統合
新しい取引でダッシュボードを更新します：
統合要件:
- 取引追加が成功した後にアカウントデータを更新する
- ページをリロードせずにダッシュボード表示を更新する
- 新しい取引が即座に表示されることを確認する
- プロセス全体で適切な状態の一貫性を維持する
技術仕様
APIエンドポイントの詳細: サーバーAPIドキュメントを参照して以下を確認してください：
- 取引データに必要なJSON形式
- HTTPメソッドとエンドポイントURL
- 期待されるレスポンス形式
- エラーレスポンスの処理
期待される結果: この課題を完了すると、銀行アプリには完全に機能する「取引追加」機能が備わり、プロフェッショナルな外観と動作を持つようになります：
実装のテスト
機能テスト:
- 「取引追加」ボタンが明確に表示され、アクセス可能であることを確認する
- ダイアログが正しく開閉することをテストする
- すべての必須フィールドでフォーム検証が機能することを確認する
- 成功した取引が即座にダッシュボードに表示されることを確認する
- 無効なデータやネットワーク問題に対するエラーハンドリングが機能することを確認する
アクセシビリティテスト:
- キーボードだけで全体のフローを操作できることを確認する
- スクリーンリーダーを使用して適切な通知が行われることをテストする
- フォーカス管理が正しく機能することを確認する
- すべてのフォーム要素に適切なラベルがあることを確認する
評価基準
| 基準 | 優秀 | 適切 | 改善が必要 |
|---|---|---|---|
| 機能性 | 取引追加機能が完璧に動作し、優れたユーザー体験を提供し、レッスンのベストプラクティスをすべて遵守している | 取引追加機能が正しく動作するが、一部のベストプラクティスが欠けている、または軽微な使い勝手の問題がある | 取引追加機能が部分的に動作する、または重大な使い勝手の問題がある |
| コード品質 | コードが整理されており、確立されたパターンに従い、適切なエラーハンドリングを含み、既存の状態管理とシームレスに統合されている | コードは動作するが、整理に問題がある、または既存のコードベースと一貫性がない部分がある | コードに重大な構造的問題がある、または既存のパターンと統合されていない |
| アクセシビリティ | 完全なキーボードナビゲーションサポート、スクリーンリーダー互換性、WCAGガイドラインに従い、優れたフォーカス管理を実現している | 基本的なアクセシビリティ機能が実装されているが、キーボードナビゲーションやスクリーンリーダー機能が一部欠けている | アクセシビリティの考慮がほとんど、または全く実装されていない |
| ユーザー体験 | 直感的で洗練されたインターフェース、明確なフィードバック、スムーズな操作、プロフェッショナルな外観 | 良好なユーザー体験だが、フィードバックや視覚デザインに改善の余地がある | 混乱を招くインターフェースやフィードバックの欠如による不十分なユーザー体験 |
追加の挑戦（オプション）
基本要件を完了した後、以下の拡張機能を検討してください：
拡張機能:
- 取引カテゴリ（食事、交通、娯楽など）を追加する
- リアルタイムフィードバックを伴う入力検証を実装する
- パワーユーザー向けのキーボードショートカットを作成する
- 取引の編集と削除機能を追加する
高度な統合:
- 最近追加された取引の元に戻す機能を実装する
- CSVファイルからの取引の一括インポートを追加する
- 取引の検索とフィルタリング機能を作成する
- データのエクスポート機能を実装する
これらのオプション機能は、より高度なウェブ開発の概念を練習し、より完全な銀行アプリを作成するのに役立ちます！
免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。