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