TypeScript上級

上級 TypeScriptで学ぶWebアプリ設計｜練習問題編

 

導入

Webアプリケーションの設計は、単なる機能実装にとどまらず、ユーザー体験やパフォーマンス、メンテナンス性を考慮する必要があります。特に、TypeScriptを使用することで、型安全性やコードの可読性が向上し、大規模なアプリケーションでも管理しやすくなります。このセクションでは、実際の業務で遭遇する具体的なシチュエーションを通じて、上級者向けのWebアプリ設計について考察します。

教科書レベルの解説（Webアプリ設計）

重要な概念の整理

Webアプリ設計においては、状態管理、コンポーネント設計、APIとの連携が重要な要素です。特に、状態管理はアプリケーションの動作に大きな影響を与えます。状態をどのように管理するかによって、アプリケーションのパフォーマンスやユーザーインターフェースの反応性が変わります。また、APIとの連携では、エラーハンドリングやデータの整形も考慮する必要があります。

コード例（TypeScript）


interface User {
    id: number;
    name: string;
    email: string;
}

class UserService {
    private users: User[] = [];

    constructor(initialUsers: User[]) {
        this.users = initialUsers;
    }

    public getUserById(id: number): User | undefined {
        return this.users.find(user => user.id === id);
    }

    public addUser(user: User): void {
        this.users.push(user);
    }

    public updateUser(id: number, updatedUser: Partial): void {
        const user = this.getUserById(id);
        if (user) {
            Object.assign(user, updatedUser);
        }
    }
}

コードの行ごとの解説

  1. interface User: ユーザーの構造を定義するインターフェース。これにより、型安全性が確保される。
  2. class UserService: ユーザー管理のためのサービスクラス。ユーザーの追加や更新、取得を行う。
  3. private users: ユーザーの配列。外部から直接アクセスできないようにプライベートに設定。
  4. constructor: 初期ユーザーを受け取って配列を初期化する。
  5. getUserById: IDでユーザーを検索し、見つからない場合はundefinedを返す。
  6. addUser: 新しいユーザーを配列に追加するメソッド。
  7. updateUser: 指定したIDのユーザーを部分的に更新するメソッド。ユーザーが見つからない場合は何も行わない。

練習問題編

以下の練習問題を解いて、Webアプリ設計における理解を深めましょう。

  1. 問題1: UserServiceクラスに、全ユーザーを取得するメソッドを追加してください。

    
public getAllUsers(): User[] {
    return this.users;
}
  2. 問題2: updateUserメソッドに、ユーザーが見つからなかった場合にエラーメッセージを表示する機能を追加してください。

    
public updateUser(id: number, updatedUser: Partial): void {
    const user = this.getUserById(id);
    if (user) {
        Object.assign(user, updatedUser);
    } else {
        console.error("User not found");
    }
}
  3. 問題3: UserServiceクラスを拡張し、ユーザーを削除するメソッドを実装してください。

    
public deleteUser(id: number): void {
    this.users = this.users.filter(user => user.id !== id);
}

まとめ

  • 状態管理はWebアプリのパフォーマンスに直接影響を与える。
  • 型安全性を活用することで、コードの可読性と保守性が向上する。
  • APIとの連携時は、エラーハンドリングやデータ整形を意識することが重要。
RELATED POST