|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
|
|
"translation_date": "2025-10-24T15:05:51+00:00",
|
|
|
"source_file": "7-bank-project/4-state-management/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# 「取引追加」ダイアログの実装
|
|
|
|
|
|
## 概要
|
|
|
|
|
|
あなたの銀行アプリは、堅牢な状態管理とデータ永続化を備えていますが、実際の銀行アプリに欠かせない重要な機能がまだありません。それは、ユーザーが自分の取引を追加できる機能です。この課題では、既存の状態管理システムとシームレスに統合された完全な「取引追加」ダイアログを実装します。
|
|
|
|
|
|
この課題では、銀行に関する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)を使用して翻訳されています。正確性を追求していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。 |
