CodeXとClaude Code、「今のところ」どっちがストレスなくタスクを頼める？

最近、AIのアウトプット。ストレス溜まってないかい？

最近、Claude Codeが頭悪いって言われてたり、Codexが良くなってきたという話を聞きます。

ただ、比較してみたという記事を見ても、抽象的な内容が多いです。
パフォーマンスとか品質とか、そういうのを見たいんじゃなくて、
出てくるアウトプットが、どれだけ

「俺様をイラつかせない程度には作ってきてくれるのか？」

という方がみなさんも気になるのではないでしょうか？笑

実際どういった指示を出して、そこまでのアプリが出てるかっていうことが
他の記事だと分かりにくかったので、それなら面倒だけど自分が人柱になろう。
ということで、自分の個人開発のタスクを1個試してみることにしました。

依頼内容

作っているのは簡単に言うと、エンジニアのポートフォリオサービスです。
今回依頼しようと思っているのは、ポートフォリオの自己紹介や、
登録したプロジェクトの内容をもとにPDFに出力するための
プレビューダイアログを作ってほしいというものです。

依頼した内容は以下の内容を AI_INSTRUCTIONS_FRONTEND.md に記載しました。

serenaで以下のメモリー呼び出して、ルールを確認
mcp__serena__read_memory("turbo_template_critical_rules")

// 特定カテゴリのルール確認
mcp__serena__read_memory("turbo_template_rules_frontend")

// 全ルールのインデックス確認
mcp__serena__read_memory("turbo_template_rules_index")

.kiro/specs/engineer-value-platform/design-jp.md
.kiro/specs/engineer-value-platform/requirements-jp.md
この「プロジェクトの概要と要件」が書かれたドキュメント内容を参照してください。

やりたいことは、基本情報の内容と、プロジェクトの詳細を呼び出して、
それをエンジニアのスキルシートという形でプレビューを確認できるダイアログを作成してほしいです。
ファイルは以下に作成したので、ここにダイアログを実装してください。
packages/frontend/src/features/profile/components/ResumePreviewDialog/index.tsx

トリガーは
packages/frontend/src/features/profile/ProfileContainer.tsxの
レジュメをプレビュー確認をクリックしたときです。

ダイアログの実装方法は以下のファイルを参考にしてください。
packages/frontend/src/components/auth/LoginModal.tsx

スキーマ定義は以下の通りなので、ここから型を把握してください。
openapi/resources/paths/api/current-engineer.yml
openapi/resources/components/schemas/engineer.yml
openapi/resources/paths/api/projects.yml
openapi/resources/components/schemas/project.yml

利用するリクエスト関数は
packages/frontend/src/generated/query/current-engineer/current-engineer.ts
useGetCurrentEngineerSuspense

packages/frontend/src/generated/query/projects/projects.ts
useGetProjectsSuspense

で取得した結果を描画するようにしてください。

リクエストから返却される型は以下を参考にしてください。
packages/frontend/src/generated/zod/projects/projects.ts
packages/frontend/src/generated/zod/current-engineer/current-engineer.ts

以下の要件を満たす実装をしてください。
- 1ファイル1コンポーネントを原則としてください。
- A4のPDF出力をするサイズで最適化してください。
- 長い場合は縦のA4サイズでページ分けして表示するようにしてください。
- PDF出力なので、ライトモード、ダークモード問わず白背景に黒文字で記載
- ダイアログの右下に「PDF生成」ボタンと「キャンセル」ボタンを配置
- useGetCurrentEngineerSuspenseとuseGetProjectsSuspenseの返却の型を確認して、型エラーがない状態でタスクを終えること
- api実装は現在は不要、mswによるモック実装は済んでいます。useGetCurrentEngineerSuspenseのように記載すればモック値が返ってくるように構築済みなので、frontendだけ実装してください。
- 自己紹介セクションと、プロジェクトのセクションを分けて設けてください。
- エンジニアを採用する担当者が、エンジニアのスキルや特性を理解しやすい構成にしてください。

抽象的な内容と、具体的な参照箇所を織り交ぜた、
実際に人間がエンジニアに指示を出すときくらいの粒度で
タスク依頼をしてみます。

ちなみに、僕はスキーマ駆動開発推しなので、どんなデータ構造が必要か
といった部分はすでにopenapiで定義したあと、自動生成したzodや
リクエストファイルが有るという前提で依頼しています。
（その参照箇所も）記載済みです。

依頼時のコマンドは以下のみです。

AI_INSTRUCTIONS_FRONTEND.mdの内容を把握して、実装をしてほしいです。

エンジニアに対して、
「チケットに書いてあるから見て確認してください。」
って依頼するし、コレで分かってくれないと困りますよね。笑

ちなみに
ResumePreviewDialog/index.tsx
には

type Props = {
  isOpen: boolean;
  onClose: () => void;
};

export const ResumePreviewDialog = ({ isOpen, onClose }: Props) => {
  return <div></div>;
};

ProfileContainer.tsx
には

"use client";

import { FolderOpen, Heart, User } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BasicInfoTab } from "./components/BasicInfoTab";
import { CareerValuesTab } from "./components/CareerValuesTab";
import { ProjectsTab } from "./components/ProjectsTab";
import { ResumePreviewDialog } from "./components/ResumePreviewDialog";

export const ProfileContainer = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [isOpenPDFExportDialog, setIsOpenPDFExportDialog] = useState(false);

  return (
    <div className="container mx-auto max-w-5xl flex flex-col gap-4">
      <div className="w-full flex justify-end">
        <Button
          variant="outline"
          onClick={() => setIsOpenPDFExportDialog(true)}
        >
          レジュメをプレビュー確認 (ここ見てね)
        </Button>
      </div>
      ...(中略)
    </div>
  );
};

コレしか書いてません。
「場所は教えるからあとは自分で考えてくれよな？」という
ジュニアエンジニア二試練を与える親エンジニアとして、
ここは最低限のヒントのみで行きましょう。

さて結果は如何に...

Codex (codex-gpt-5 middle)

タスク完了スピード ⭐️⭐️
完成度(エラーのなさ)⭐️⭐️⭐️⭐️⭐️
従順度(ルール準拠)⭐️⭐️⭐️⭐️
レイアウトクオリティ⭐️⭐️⭐️⭐️
安定度⭐️⭐️⭐️⭐️⭐️

やったこと

• 1ファイル1コンポーネントを守らない
• 他のファイル同様、SuspenseはSkeletonを使ってた
• コーディングルールは70%程度守っている感じ
• レイアウト品質は、無難(後でレイアウトは変えやすそうな下地を作ったって感じ)

気になること

• working...(処理スピード)が体感遅い
• 並列で仕事していないと、生産性は落ちていそうなアウトプット速度

Claude Code(4.5 sonnet)

タスク完了スピード ⭐️⭐️⭐️⭐️
完成度(エラーのなさ)⭐️⭐️⭐️⭐️⭐️
従順度(ルール準拠)⭐️⭐️⭐️⭐️
レイアウトクオリティ⭐️⭐️⭐️⭐️⭐️
安定度⭐️⭐️⭐️

やったこと

• 1ファイル1コンポーネントを守った
• SuspenseはSkeletonを使わず「読み込み中」としていた
• コーディングルールは85%くらい守ってくれている感じ
• セクションという概念を一番把握してそうなレイアウト

気になったこと

• 急に処理中に止まる(APIエラーの時もあるし、サイレントに止まってることも)
• 初期コンテキストが少ない(superclaudeとmcpとかで60%近くすでに埋まってる)

Claude Code(4.1 opus)

タスク完了スピード ⭐️⭐️⭐️
完成度(エラーのなさ)⭐️⭐️⭐️⭐️
従順度(ルール準拠)⭐️⭐️⭐️
レイアウトクオリティ⭐️⭐️⭐️
安定度⭐️⭐️⭐️

やったこと

• cssをいじってた。
• 1ファイル1コンポーネントを守った
• 他のファイル同様、SuspenseはSkeletonを使ってた
• 何故か途中からレイアウト崩れてた(cssのせい？)

気になったこと

• 4.5同様、最近急に処理中に止まる
• 4.5がある今、わざわざ/modelsから4.1を選択する必要があるのか？

という感じ。
もう少し深ぼって調査したかったですが、そこまで需要あるか？というのと
多分1ヶ月後にはまた評価も変わりそうだったので、現時点の個人評価として

Sonnet4.5はSonnet4よりはるかに安定はしている。

アウトプットの信頼性は4.5とgpt-5-Codexはどっこい

Sonnetは定期的にアクセスエラーが起きて仕事が止まる

かと言ってCodex 1本にするにはあまりに待機時間がかかりそう

という感じなので、今の所感としては
Claude → 100ドル
Codex → 20ドル

という形で、通常業務メインはClaudeにお願いしておき、
依頼して放っておく＆Claudeが死んだ時系はCodexという感じが
今のところ、心理的安全性を考えた結果になるかなと思います。
早くAGENTS.mdで全て賄えればいいのに。。。

ただ、上に書いてあるように、ClaudeのContextがデフォルトで
埋まっている割合多くて、すぐAutoCompactされてしまいそうなのも
ちょっと悩みなので、

この辺は引き続き追っていく感じかなと思います。