`要素は空であり、何か内容を追加するまで画面には何も表示されません。また、`id`を指定してJavaScriptで簡単に取得できるようにしています。 `app.js`ファイルに戻り、新しいヘルパー関数`updateElement`を作成します: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` この関数は非常にシンプルです: 要素の*id*と*text*を指定すると、対応する`id`を持つDOM要素のテキスト内容を更新します。このメソッドを`login`関数内の以前のエラーメッセージの代わりに使用します: ```js if (data.error) { return updateElement('loginError', data.error); } ``` これで無効なアカウントでログインしようとすると、次のようなものが表示されるはずです:  これでエラーテキストが視覚的に表示されるようになりましたが、スクリーンリーダーで試してみると何もアナウンスされないことに気付くでしょう。ページに動的に追加されたテキストがスクリーンリーダーでアナウンスされるためには、[ライブリージョン](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)と呼ばれるものを使用する必要があります。ここでは、アラートと呼ばれる特定のタイプのライブリージョンを使用します: ```html ``` 同じ動作を`register`関数のエラーにも実装してください（HTMLの更新を忘れないでください）。 ## ダッシュボードに情報を表示する これまでに学んだ技術を使用して、ダッシュボードページにアカウント情報を表示する作業も行います。 サーバーから受信したアカウントオブジェクトは次のようになります: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > 注: 既にデータが入力されている`test`アカウントを使用すると、作業が簡単になります。 ### 課題 まず、HTMLの"Balance"セクションをプレースホルダー要素に置き換えます: ```html

Balance:

``` また、アカウントの説明を表示するために、その下に新しいセクションを追加します: ```html

``` ✅ アカウントの説明はその下の内容のタイトルとして機能するため、セマンティックに見出しとしてマークアップされています。[見出し構造](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)がアクセシビリティにとって重要である理由を学び、ページを批判的に見て他に見出しにできる部分がないか検討してください。 次に、`app.js`に新しい関数を作成してプレースホルダーを埋めます: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` まず、必要なアカウントデータがあることを確認してから進みます。その後、先ほど作成した`updateElement()`関数を使用してHTMLを更新します。 > 残高表示をより見栄え良くするために、[`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)メソッドを使用して小数点以下2桁を強制的に表示します。 次に、ダッシュボードが読み込まれるたびに`updateDashboard()`関数を呼び出す必要があります。[レッスン1の課題](../1-template-route/assignment.md)を既に完了している場合は簡単なはずです。そうでない場合は、次の実装を使用できます。 `updateRoute()`関数の最後に次のコードを追加します: ```js if (typeof route.init === 'function') { route.init(); } ``` そして、ルート定義を次のように更新します: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` この変更により、ダッシュボードページが表示されるたびに`updateDashboard()`関数が呼び出されます。ログイン後、アカウントの残高、通貨、説明が表示されるはずです。 ## HTMLテンプレートを使用してテーブル行を動的に作成する [最初のレッスン](../1-template-route/README.md)では、HTMLテンプレートと[`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)メソッドを使用してアプリのナビゲーションを実装しました。テンプレートはより小さく、ページの繰り返し部分を動的に埋めるためにも使用できます。 同様のアプローチを使用して、HTMLテーブル内のトランザクションリストを表示します。 ### 課題 HTMLの``に新しいテンプレートを追加します: ```html ``` このテンプレートは1つのテーブル行を表し、トランザクションの*日付*、*オブジェクト*、*金額*の3つの列を埋めるためのものです。 次に、JavaScriptで簡単に見つけられるように、ダッシュボードテンプレート内のテーブルの``要素にこの`id`プロパティを追加します: ```html ``` HTMLの準備が整ったので、JavaScriptコードに切り替えて新しい関数`createTransactionRow`を作成します: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` この関数はその名前が示す通りのことを行います: 先ほど作成したテンプレートを使用して新しいテーブル行を作成し、トランザクションデータを使用してその内容を埋めます。これを`updateDashboard()`関数内で使用してテーブルを埋めます: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` ここでは、[`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment)メソッドを使用して新しいDOMフラグメントを作成し、それを操作してから最終的にHTMLテーブルに添付します。 このコードが動作するようにするには、`updateElement()`関数が現在テキストコンテンツのみをサポートしているため、少しコードを変更する必要があります: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)メソッドを使用すると、テキストまたは[DOMノード](https://developer.mozilla.org/docs/Web/API/Node)のいずれかを親要素に添付できるため、すべてのユースケースに適しています。 `test`アカウントを使用してログインを試みると、ダッシュボードに取引リストが表示されるはずです 🎉。 --- ## 🚀 チャレンジ 協力してダッシュボードページを本物の銀行アプリのように見えるようにしましょう。すでにアプリをスタイリングしている場合は、[メディアクエリ](https://developer.mozilla.org/docs/Web/CSS/Media_Queries)を使用して、デスクトップとモバイルデバイスの両方でうまく動作する[レスポンシブデザイン](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)を作成してみてください。 以下はスタイリングされたダッシュボードページの例です：  ## 講義後のクイズ [講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/46) ## 課題 [コードをリファクタリングしてコメントを追加する](assignment.md) **免責事項**: この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。