変更容易性

// 以下はすべて@order-historyモジュールの中にある

// 注文1件の表示。表現はこのユニットが持つ
type OrderItemProps = { order: Order };

export const OrderItem = ({ order }: OrderItemProps) => (
  <li>
    <span>{order.title}</span>
  </li>
);

// 注文の一覧。データは外から受け取る
type OrderListProps = { orders: Order[] };

export const OrderList = ({ orders }: OrderListProps) => (
  <ul>
    {orders.map((order) => (
      <OrderItem key={order.id} order={order} />
    ))}
  </ul>
);

// OrderListをモーダルの中で使う
export const OrderHistoryModal = ({ orders }: { orders: Order[] }) => (
  <Modal title="注文履歴">
    <OrderList orders={orders} />
  </Modal>
);

// 入れ物がモーダルからページに変わる
// OrderListは1行も変えずに、そのまま移動するだけ
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="注文履歴">
    <OrderList orders={orders} />
  </PageLayout>
);

// 表現を持つOrderItemだけが変更に応答する
export const OrderItem = ({ order }: OrderItemProps) => (
  <li>
    <img src={order.thumbnailUrl} alt="" /> {/* 追加 */}
    <span>{order.title}</span>
  </li>
);
// OrderListとOrderHistoryPageは手つかずのまま。
// Order型にthumbnailUrlが増えるため、型とテストが変更に追随する

  // routes.tsx から使用箇所とimportを消す。
  // エントリーポイントのimportがなくなった@order-historyは、
  // OrderList / OrderItemを含むモジュール全体を削除できる
- import { OrderHistoryPage } from "@order-history";

  export const routes = (
    <Routes>
      <Route path="/" element={<HomePage />} />
-     <Route path="/orders/history" element={<OrderHistoryPage />} />
    </Routes>
  );

// モーダルの中身をページに移す変更の2通りの扱い

// ❌ 「なおす」として扱う：ページ用に一覧表示を書き直してしまう
// （同じ表示が2系統になり、商品画像の追加のような以後の
// 「なおす」を2か所に支払うことになる）
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="注文履歴">
    <ul>
      {orders.map((order) => (
        <li key={order.id}>
          <span>{order.title}</span>
        </li>
      ))}
    </ul>
  </PageLayout>
);

// ✅ 「分ける」として扱う：OrderListをそのまま新しい入れ物に移す
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="注文履歴">
    <OrderList orders={orders} />
  </PageLayout>
);

// greeting.ts
type GreetingArgs = { name: string };
export const greeting = ({ name }: GreetingArgs) =>
  `Nice to meet you, ${name}!`;

// message.ts

// ❌ 同じ形を手で再宣言する
// （greetingの定義が変わっても、この型は古い形のまま静かに残る）
type MessageArgs = { name: string } & { agent: Agent };

// ✅ 入力の型をgreetingから導出する
// （greetingの定義の変更が、この型と呼び出し元に
// 型エラーとして伝播する）
type MessageArgs = Parameters<typeof greeting>[0] & { agent: Agent };

export const message = ({ name, agent }: MessageArgs) =>
  `Hello, I am ${agent.name}. ${greeting({ name })}`;