TypeScript中級

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

 

導入

Webアプリケーションの設計は、ユーザー体験やシステムのパフォーマンスに直結する重要な要素です。特に、TypeScriptを用いた開発では、型安全性やコードの可読性が向上し、より堅牢なアプリケーションを構築できます。本記事では、具体的なシチュエーションを通じて、Webアプリ設計におけるTypeScriptの活用法を探ります。

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

重要な概念の整理

Webアプリ設計においては、コンポーネントの再利用性や状態管理、APIとの連携が重要です。特に、状態管理の手法はアプリケーションの複雑さに応じて選択する必要があります。ここでは、状態管理の一環として、ReactのuseReducerフックを用いた設計を取り上げます。useReducerは、複雑な状態ロジックを持つコンポーネントでの状態管理に適しています。

コード例（TypeScript）


import React, { useReducer } from 'react';

type State = {
  count: number;
};

type Action = 
  | { type: 'increment' }
  | { type: 'decrement' };

const initialState: State = { count: 0 };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
Count: {state.count}

      
      
    

  );
};

export default Counter;

コードの行ごとの解説

  1. import文でReactとuseReducerをインポートします。
  2. State型を定義し、カウントの状態を管理します。
  3. Action型を定義し、状態遷移に関するアクションを列挙します。
  4. 初期状態を設定します。
  5. reducer関数を定義し、アクションに応じた状態遷移を実装します。
  6. Counterコンポーネントを定義し、useReducerフックを用いて状態とディスパッチ関数を取得します。
  7. カウントの表示と、カウントを増減させるボタンを作成します。

練習問題編

以下の練習問題に取り組んでみましょう。各問題に対する模範解答と解説も用意しています。

  1. 問題1: useReducerを使用して、カウントが10以上になった場合にボタンを無効にする機能を追加してください。
  2. 問題2: カウントの値をリセットするためのボタンを追加し、リセット機能を実装してください。
  3. 問題3: カウントの履歴を配列として保持し、履歴を表示する機能を追加してください。

模範解答

問題1の解答: ボタンのdisabled属性をカウントの値に基づいて設定します。

問題2の解答: リセットボタンを追加し、dispatchでリセットアクションを送信します。

問題3の解答: 履歴を管理するために、Stateに履歴を追加し、アクションで履歴を更新します。


// State型にhistoryを追加
type State = {
  count: number;
  history: number[];
};

// reducer内でhistoryを更新
case 'increment':
  return { count: state.count + 1, history: [...state.history, state.count + 1] };

まとめ

  • useReducerを用いることで、複雑な状態管理が容易になります。
  • 状態遷移に関するアクションを明確にすることで、コードの可読性が向上します。
  • 実際の業務において、状態管理の手法を選定することがプロジェクトの成功に寄与します。
RELATED POST