Claude Code・Codex CLIのコマンド比較ツールをぱんだツールズに追加した話

Claude Code と Codex CLI を日常的に使っていると、「このコマンド、両方で使えるっけ？」という場面が頻繁にある。

/compact は？ /memory は？ Codex にエイリアスはある？

毎回それぞれの公式ドキュメントを往復するのが地味にストレスで、自分でまとめて比較できるリファレンスを作ることにした。

作ったもの — 75個のコマンドを横断検索できるリファレンスツール

ぱんだツールズ の開発者ツールカテゴリに「AIコーディングアシスタント コマンド検索」を追加した。

• Claude Code と Codex CLI のスラッシュコマンドを1画面で比較できる
• ツール・カテゴリ・重要度の絞り込み + 全文検索
• 現時点で75個のコマンドエントリを収録（Claude Code: 68コマンド、Codex CLI: 59コマンド）
• 完全クライアントサイド。API呼び出しなし

こんなエントリが並んでいる：

概念名	Claude Code	Codex CLI
チャットリセット	/clear（エイリアス: /reset, /new）	/clear
会話コンパクト化	/compact [instructions]	/compact
会話再開	/resume [session]	/resume

---

データ設計 — 「コマンド名」ではなく「概念」を軸にした

一番悩んだのがデータ構造の設計だった。

単純に「ツールごとのコマンド一覧」を作ると、同じ機能を持つコマンドが別々の行に分散して比較がしにくくなる。

そこで 概念中心設計 を採用した。/clear（Claude Code）と /clear（Codex CLI）は「同じツール名だから同一」ではなく、「チャットリセット」という概念を両ツールがどう実装しているか、という軸でまとめる。

// src/data/ai-cli-commands.ts

export interface ToolCommand {
  command: string
  aliases?: string[]
  description: string
  args?: string
  condition?: string   // "Windowsのみ" などの制約
}

export interface SlashCommandEntry {
  id: string
  conceptName: string           // "チャットリセット"
  category: CommandCategory
  importance: 0 | 1 | 2 | 3
  importanceReason: string
  claudeCode: ToolCommand | null
  codexCli: ToolCommand | null
  notes?: string                // 両ツール間の差異メモ
}

片方のツールにしかないコマンドは null を入れる。UI 側で「対応コマンドなし」と表示する。

notes フィールドが地味に便利で、「Codex では /new が別コマンドとして独立している」みたいな、ドキュメントには書いてないけど使っていて気づく差異を自由に書き込める。

カテゴリは10種類で整理した：

export type CommandCategory =
  | 'session'      // セッション管理
  | 'planning'     // 計画・モード切替
  | 'code'         // コード支援
  | 'model'        // モデル・パフォーマンス
  | 'config'       // 設定・権限
  | 'ui'           // UI・表示
  | 'integration'  // 外部連携
  | 'info'         // 情報・統計
  | 'utility'      // ユーティリティ
  | 'advanced'     // 上級者向け

重要度（0〜3）も独自に定義していて、★★★が「毎日使う・知らないと困る」、★★が「週数回使う・知っておくと便利」、★が「特定シーンで役立つ」、なしが「上級者向け・レアケース」という基準にした。

---

フィルタリングの実装 — useState × 4 + useMemo

検索・絞り込みのロジックは useState × 4 と useMemo のシンプルな構成にした。

// src/app/tools/ai-cli-commands/AiCliCommandsClient.tsx

const [searchQuery, setSearchQuery] = useState('')
const [toolFilter, setToolFilter] = useState<ToolFilter>('all')
const [categoryFilter, setCategoryFilter] = useState<CommandCategory | 'all'>('all')
const [importanceFilter, setImportanceFilter] = useState<number | 'all'>('all')

const filtered = useMemo(() => {
  const q = searchQuery.trim().toLowerCase()

  return commandEntries.filter((entry) => {
    // ツール絞り込み
    if (toolFilter === 'claude-code' && !entry.claudeCode) return false
    if (toolFilter === 'codex-cli' && !entry.codexCli) return false

    // カテゴリ絞り込み
    if (categoryFilter !== 'all' && entry.category !== categoryFilter) return false

    // 重要度絞り込み
    if (importanceFilter !== 'all' && entry.importance !== importanceFilter) return false

    // 全文検索
    if (q) {
      const searchText = [
        entry.conceptName,
        entry.id,
        entry.claudeCode?.command ?? '',
        (entry.claudeCode?.aliases ?? []).join(' '),
        entry.claudeCode?.description ?? '',
        entry.codexCli?.command ?? '',
        (entry.codexCli?.aliases ?? []).join(' '),
        entry.codexCli?.description ?? '',
        entry.notes ?? '',
      ].join(' ').toLowerCase()
      if (!searchText.includes(q)) return false
    }

    return true
  })
}, [searchQuery, toolFilter, categoryFilter, importanceFilter])

全文検索は概念名・コマンド名・エイリアス・説明・補足を全部連結して includes() するだけ。75エントリ程度なら十分速い。

useMemo の依存配列に4つのフィルター状態を入れているので、どれかが変わるたびに再計算される。DB を使わずにブラウザ内で全部完結する設計なので、API 呼び出しのラウンドトリップがなくてレスポンスが速い。

---

UI設計 — 2カラム比較カードとツール別の色分け

カードの中は左が Claude Code、右が Codex CLI の2カラム構成。片方に絞り込んだときは1カラムに切り替わる。

色は Claude Code を Violet（bg-violet-600）、Codex CLI を Teal（bg-teal-600）で統一している。コンポーネント全体でこの2色が役割の判断基準になっていて、コードの色指定で迷わなくなる。

function CommandCard({ entry, toolFilter }: { entry: SlashCommandEntry; toolFilter: ToolFilter }) {
  const showBoth = toolFilter === 'all'
  const showClaudeCode = showBoth || toolFilter === 'claude-code'
  const showCodexCli = showBoth || toolFilter === 'codex-cli'

  return (
    <div className="rounded-xl border border-gray-200 bg-white overflow-hidden">
      <div className={`px-4 py-3 ${showBoth ? 'grid grid-cols-2 gap-3' : ''}`}>
        {showClaudeCode && (
          <div>
            {showBoth && (
              <div className="mb-1.5 flex items-center gap-1.5">
                <span className="h-2 w-2 rounded-full bg-violet-500" />
                <span className="text-xs font-medium text-violet-700">Claude Code</span>
              </div>
            )}
            {/* コマンド表示 */}
          </div>
        )}
        {/* Codex CLI 側も同様 */}
      </div>
    </div>
  )
}

CommandBadge コンポーネントはコマンド本体・エイリアス・条件（OS制約など）をまとめて表示する責務を持つ。condition がある場合はオレンジの警告アイコン付きで表示して、見落としを防ぐようにした。

---

SEO設計

他の ぱんだツールズ のツールと同様に、ToolPageLayout の共通レイアウトで FAQPage スキーマと BreadcrumbList スキーマを自動出力している。

page.tsx ではツール固有のメタデータを定義している：

export const metadata: Metadata = {
  title: 'AIコーディングアシスタント コマンド検索ツール（無料・ブラウザで簡単）',
  description: 'Claude Code・Codex CLIのスラッシュコマンドを横断検索・比較。カテゴリ・重要度フィルター付き。登録不要・無料。',
}

クライアントサイドで完結する静的ページなので、Cloudflare Pages の CDN から配信されて初期表示が速い。

---

作ってみてわかったこと

「どう整理するか」が価値の大半

コマンドそのものの情報は公式ドキュメントに書いてある。それでもツールとして成立するのは、「両ツールを並べて比較できる形に整理したこと」と「使用頻度で優先度をつけたこと」が価値として機能するからだと思う。

情報を集めることより、情報を整理する設計に時間をかけた。

概念中心設計は比較ユースケースと相性がいい

同じ機能を複数の実装から見るユースケース（今回は「Claude Code では？ Codex では？」）では、コマンド名でなく概念名を軸にしたほうが圧倒的にデータが整理しやすかった。似た構造が必要な場面（ショートカットキー比較、フレームワーク横断の API 比較など）でも使えそうな設計パターンだと感じた。

小さいデータセットならクライアントフィルタリングで十分

100件以下のデータなら useMemo + Array.filter でブラウザ内処理が現実的。バックエンドが不要なぶん実装がシンプルで、サーバーコストもかからない。ぱんだツールズ全体の方針である「ブラウザ完結」との相性も良い。

まとめ

Claude Code と Codex CLI のコマンドを横断検索・比較できるツールを ぱんだツールズ に追加した。

データ設計で「コマンド名」ではなく「概念名」を軸にしたことで、ツール間の比較がしやすくなった。実装はシンプルな useState + useMemo で、クライアントサイドで完結している。

AI CLIツールを使いながら自分でも手元リファレンスとして使っていて、地味に便利。

---

この記事は Zenn にも同じ内容を投稿しています。