<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "d0a02cb117e91a5b5f24178080068a3d",
  "translation_date": "2025-10-24T15:08:18+00:00",
  "source_file": "7-bank-project/3-data/assignment.md",
  "language_code": "ja"
}
-->
# コードリファクタリングとドキュメント作成課題

## 学習目標

この課題を通じて、プロの開発者が日常的に使用する重要なソフトウェア開発スキルを練習します。コードを整理して保守性を向上させ、抽象化によって重複を減らし、将来の開発者（自分自身を含む）のために作業を文書化する方法を学びます。

きれいで適切に文書化されたコードは、複数の開発者が協力し、コードベースが時間とともに進化する現実のウェブ開発プロジェクトにおいて非常に重要です。

## 課題概要

あなたの銀行アプリの `app.js` ファイルは、ログイン、登録、ダッシュボード機能を含む大規模なものになっています。このコードをプロフェッショナルな開発手法を使用してリファクタリングし、可読性、保守性を向上させ、重複を減らしましょう。

## 指示

現在の `app.js` コードを以下の3つの主要なリファクタリング手法を実装して変換してください。

### 1. 設定定数の抽出

**タスク**: ファイルの冒頭に再利用可能な定数を含む設定セクションを作成します。

**実装ガイダンス:**
- サーバーAPIのベースURL（現在複数箇所でハードコーディングされている）を抽出する
- 複数の関数で表示されるエラーメッセージの定数を作成する
- 繰り返し使用されるルートパスや要素IDを抽出することを検討する

**例の構造:**
```javascript
// Configuration constants
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};
```

### 2. 統一されたリクエスト関数の作成

**タスク**: `createAccount()` と `getAccount()` 間の重複コードを排除する再利用可能な `sendRequest()` 関数を構築します。

**要件:**
- GETリクエストとPOSTリクエストの両方を処理する
- 適切なエラーハンドリングを含む
- 異なるURLエンドポイントをサポートする
- オプションのリクエストボディデータを受け入れる

**関数の署名ガイダンス:**
```javascript
async function sendRequest(endpoint, method = 'GET', data = null) {
  // Your implementation here
}
```

### 3. プロフェッショナルなコードドキュメントの追加

**タスク**: ロジックの「理由」を説明する明確で役立つコメントでコードを文書化します。

**ドキュメント標準:**
- 関数の目的、パラメータ、戻り値を説明する関数ドキュメントを追加する
- 複雑なロジックやビジネスルールに対するインラインコメントを含める
- 関連する関数をセクションヘッダーでグループ化する
- 明らかでないコードパターンやブラウザ固有の回避策を説明する

**例のドキュメントスタイル:**
```javascript
/**
 * Authenticates user and redirects to dashboard
 * @param {Event} event - Form submission event
 * @returns {Promise<void>} - Resolves when login process completes
 */
async function login(event) {
  // Prevent default form submission to handle with JavaScript
  event.preventDefault();
  
  // Your implementation...
}
```

## 成功基準

リファクタリングされたコードは、以下のプロフェッショナルな開発手法を示すべきです:

### 優れた実装
- ✅ **定数**: すべてのマジック文字列とURLが明確に名前付けされた定数に抽出されている
- ✅ **DRY原則**: 共通のリクエストロジックが再利用可能な `sendRequest()` 関数に統合されている
- ✅ **ドキュメント**: 関数には目的とパラメータを説明する明確なJSDocコメントがある
- ✅ **整理**: コードがセクションヘッダーと一貫したフォーマットで論理的にグループ化されている
- ✅ **エラーハンドリング**: 新しいリクエスト関数を使用してエラーハンドリングが改善されている

### 適切な実装
- ✅ **定数**: 繰り返し使用される値のほとんどが抽出されているが、いくつかのハードコーディングされた値が残っている
- ✅ **要素化**: 基本的な `sendRequest()` 関数が作成されているが、すべてのエッジケースを処理していない可能性がある
- ✅ **コメント**: 主要な関数が文書化されているが、いくつかの説明が不十分な場合がある
- ✅ **可読性**: コードは一般的に整理されているが、改善の余地がある部分もある

### 改善が必要
- ❌ **定数**: 多くのマジック文字列とURLがファイル全体でハードコーディングされたまま
- ❌ **重複**: 類似した関数間で重大なコードの重複が残っている
- ❌ **ドキュメント**: コメントが不足している、またはコードの目的を説明していない
- ❌ **整理**: コードに明確な構造や論理的なグループ化が欠けている

## リファクタリング後のコードのテスト

リファクタリング後、銀行アプリが正しく動作することを確認してください:

1. **すべてのユーザーフローをテスト**: 登録、ログイン、ダッシュボード表示、エラーハンドリング
2. **API呼び出しを確認**: `sendRequest()` 関数がアカウント作成と取得の両方で機能することを確認
3. **エラーシナリオをチェック**: 無効な資格情報やネットワークエラーでテスト
4. **コンソール出力をレビュー**: リファクタリング中に新しいエラーが導入されていないことを確認

## 提出ガイドライン

以下を含むリファクタリングされた `app.js` ファイルを提出してください:
- 異なる機能を整理する明確なセクションヘッダー
- 一貫したコードフォーマットとインデント
- すべての関数に対する完全なJSDocドキュメント
- リファクタリングアプローチを説明する簡単なコメントをファイルの冒頭に追加

**ボーナスチャレンジ**: アプリのアーキテクチャと異なる関数がどのように連携しているかを説明する簡単なコードドキュメントファイル（`CODE_STRUCTURE.md`）を作成してください。

## 実世界との関連性

この課題は、プロの開発者が定期的に行うコードメンテナンスの種類を反映しています。業界では:
- **コードレビュー** は、この課題のように可読性と保守性を評価します
- **技術的負債** は、コードが定期的にリファクタリングされず、文書化されない場合に蓄積します
- **チームコラボレーション** は、新しいチームメンバーが理解できる明確で文書化されたコードに依存します
- **バグ修正** は、適切に整理されたコードベースと適切な抽象化がある場合に非常に簡単になります

ここで練習しているスキル - 定数の抽出、重複の排除、明確なドキュメント作成 - は、プロフェッショナルなソフトウェア開発の基礎です。

---

**免責事項**:  
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は一切の責任を負いません。