# 「取引を追加」ダイアログの実装 ## 手順 私たちの銀行アプリにはまだ重要な機能が欠けています。それは、新しい取引を入力する機能です。 これまでの4つのレッスンで学んだことを活用して、「取引を追加」ダイアログを実装してください。 - ダッシュボードページに「取引を追加」ボタンを追加する - 新しいHTMLテンプレートを使用して新しいページを作成するか、JavaScriptを使用してダッシュボードページを離れることなくダイアログHTMLを表示/非表示にする（[`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden)属性やCSSクラスを使用できます） - ダイアログの[キーボードとスクリーンリーダーのアクセシビリティ](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)を確実に対応する - 入力データを受け取るためのHTMLフォームを実装する - フォームデータからJSONデータを作成し、APIに送信する - 新しいデータでダッシュボードページを更新する [サーバーAPI仕様](../api/README.md)を確認して、どのAPIを呼び出す必要があるか、期待されるJSON形式が何かを確認してください。 以下は課題を完了した後の例です：  ## 評価基準 | 基準 | 優秀 | 適切 | 改善が必要 | | -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------| | | 取引の追加がレッスンで見たすべてのベストプラクティスに従って完全に実装されている。 | 取引の追加が実装されているが、レッスンで見たベストプラクティスに従っていない、または部分的にしか機能していない。 | 取引の追加が全く機能していない。 | **免責事項**: この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は責任を負いません。