Claude Opus 4.5とSonnet 4.5に同じ実装をお願いしてみた【株式会社ライトコード】

はじめに

2025年11月25日、Anthropicから最新モデル「Claude Opus 4.5」がリリースされました。

Opus4.5は、他のAIモデルと比較しても、現段階では最先端のモデルとなったようです。
トークン出力時にかかるコストも従来のOpusから67%削減され、Maxプランだと、普段使いではほぼ上限に行くことはなくなり、Opusでの開発がより一層楽しめます。
私は、会社のサブスク補助制度を利用して、Maxプラン($100)に加入させていただいています。100ドルの補助はありがたすぎます！！感謝です。

また、Claude Codeがデスクトップアプリで利用可能になったことで、アプリ上から並列実行が可能になったり、プランモードが進化したりなど、大幅なアップグレードも加わっているようです。
詳細はこちらから確認ができます。

そこで今回は、Claude Opus 4.5とSonnet 4.5に全く同じプロンプトを与え、Next.js 16での無限スクロール一覧ページを実装させることで、両モデルの特性を比較検証してみようと思います。

やったこと

検証環境
・Next.js 16.0.5（App Router）
・React 19.2
・TypeScript 5.x
・Tailwind CSS 4.x
検証の流れ
1. まず共通のCLAUDE.mdを用意
2. 両モデルに同じプロンプトで無限スクロールの実装をお願い
3. できあがったコードを見比べてみる

CLAUDE.mdで決めたルール
ざっくり下記のような感じです。
・サーバーファースト: 基本はサーバーコンポーネント、クライアントは最小限に
・useEffect禁止
・境界を明確に: server-onlyなど使用してコードの役割をはっきりさせる
・新機能試してみてね

生成されたコードを見てみる

ファイル構成の違い

Opus4.5の場合

src/

├── app/items/

│   ├── page.tsx              # Server Component

│   ├── actions.ts            # Server Actions

│   └── loading.tsx

├── components/features/items/

│   ├── infinite-scroll-container.tsx  # 統合型

│   ├── item-card.tsx

│   └── item-list.tsx

└── lib/server/items.ts       # server-only

Sonnet4.5の場合

src/

├── app/items/

│   ├── page.tsx

│   ├── actions.ts

│   └── loading.tsx

├── components/

│   ├── items-list.tsx

│   ├── infinite-scroll-trigger.tsx   # 独立コンポーネント

│   ├── item-card.tsx

│   └── item-card-skeleton.tsx

└── lib/server/items.ts

面白いところが、SonnetがInfiniteScrollTriggerを独立したコンポーネントにしているところです。
実はCLAUDE.mdファイルに無限スクロールの実装例を書いていたのですが、その設計とそっくりそのままでした。逆にOpus4.5はそんな実装ではダメだと判断したのか、統合型のコンテナを作ってきました。

状態管理のアプローチ
Opus4.5ではuseReducerとuseTransitionを使用した実装となっていました。

// infinite-scroll-container.tsx

'use client'



import { useCallback, useTransition, useReducer } from 'react'



type State = {

  items: Item[]

  hasMore: boolean

  page: number

}



type Action = {

  type: 'LOAD_MORE'

  payload: { items: Item[]; hasMore: boolean }

}



function reducer(state: State, action: Action): State {

  switch (action.type) {

    case 'LOAD_MORE':

      return {

        items: [...state.items, ...action.payload.items],

        hasMore: action.payload.hasMore,

        page: state.page + 1,

      }

    default:

      return state

  }

}



export function InfiniteScrollContainer({

  initialItems,

  initialHasMore,

  fetchMoreAction,

}: InfiniteScrollContainerProps) {

  const [isPending, startTransition] = useTransition()

  const [state, dispatch] = useReducer(reducer, {

    items: initialItems,

    hasMore: initialHasMore,

    page: 1,

  })



  const loadMore = useCallback(() => {

    if (isPending || !state.hasMore) return



    startTransition(async () => {

      const nextPage = state.page + 1

      const result = await fetchMoreAction(nextPage)

      dispatch({

        type: 'LOAD_MORE',

        payload: { items: result.items, hasMore: result.hasMore },

      })

    })

  }, [isPending, state.hasMore, state.page, fetchMoreAction])



  // ...

}