You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
5.1 KiB
58 lines
5.1 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
|
|
"translation_date": "2025-10-24T15:09:25+00:00",
|
|
"source_file": "7-bank-project/1-template-route/assignment.md",
|
|
"language_code": "ja"
|
|
}
|
|
-->
|
|
# ルーティングの改善
|
|
|
|
## 指示
|
|
|
|
基本的なルーティングシステムを構築したので、次はユーザー体験を向上させ、開発者向けのツールを提供するプロフェッショナルな機能を追加していきましょう。実際のアプリケーションでは、単なるテンプレート切り替えだけではなく、動的なページタイトル、ライフサイクルフック、拡張可能なアーキテクチャが必要です。
|
|
|
|
この課題では、実際のウェブアプリケーションでよく使われる重要な機能を2つ追加して、ルーティングの実装を拡張します。これらの改善により、銀行アプリがより洗練されたものになり、将来的な機能追加の基盤を提供します。
|
|
|
|
現在のルート宣言には使用するテンプレートIDしか含まれていません。しかし、新しいページを表示する際には、もう少し情報が必要になることがあります。以下の2つの機能を追加して、ルーティングの実装を改善しましょう。
|
|
|
|
### 機能1: 動的なページタイトル
|
|
**目的:** 各テンプレートにタイトルを付け、テンプレートが変更されるたびにウィンドウタイトルを新しいタイトルに更新する。
|
|
|
|
**重要性:**
|
|
- **ユーザー体験を向上**: ブラウザのタブにわかりやすいタイトルを表示
|
|
- **アクセシビリティを強化**: スクリーンリーダーや支援技術に対応
|
|
- **ブックマークやブラウザ履歴の文脈を提供**
|
|
- **プロフェッショナルなウェブ開発のベストプラクティスに準拠**
|
|
|
|
**実装アプローチ:**
|
|
- **ルートオブジェクトを拡張**: 各ルートにタイトル情報を追加
|
|
- **`updateRoute()`関数を修正**: `document.title`を動的に更新
|
|
- **テスト**: 画面間を移動した際にタイトルが正しく変更されることを確認
|
|
|
|
### 機能2: ルートライフサイクルフック
|
|
**目的:** テンプレートが変更された後にコードを実行するオプションを追加する。ダッシュボードページが表示されるたびに、開発者コンソールに `'Dashboard is shown'` を出力したい。
|
|
|
|
**重要性:**
|
|
- **特定のルートが読み込まれた際にカスタムロジックを実行可能**
|
|
- **分析、ログ記録、初期化コードのフックを提供**
|
|
- **より複雑なルート動作の基盤を構築**
|
|
- **ウェブ開発におけるオブザーバーパターンを実証**
|
|
|
|
**実装アプローチ:**
|
|
- **ルート設定にオプションのコールバック関数プロパティを追加**
|
|
- **テンプレートのレンダリング完了後にコールバック関数を実行**
|
|
- **この機能がコールバックが定義された任意のルートで動作することを確認**
|
|
- **ダッシュボードを訪問した際にコンソールメッセージが表示されることをテスト**
|
|
|
|
## 評価基準
|
|
|
|
| 基準 | 優秀 | 適切 | 改善が必要 |
|
|
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
|
|
| | 2つの機能が実装され、動作している。タイトルとコード追加が`routes`宣言に新しいルートを追加した場合でも機能する。 | 2つの機能は動作するが、動作がハードコーディングされており、`routes`宣言を通じて設定可能ではない。タイトルとコード追加を伴う3つ目のルートの追加が部分的にしか動作しない、または動作しない。 | 1つの機能が欠けている、または正しく動作していない。 |
|
|
|
|
---
|
|
|
|
**免責事項**:
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 |