Claude Code

バグ修正、テスト、数日かかるマイグレーションまで Claude Code にお任せください。ターミナル、IDE、Slack、またはウェブからステアリングとレビューが可能です。

acme-storefront/Fix the double-charge bug in checkout
We're seeing duplicate charges when customers double-click the pay button. Can you find and fix it?

I can reproduce it: the checkout form fires two POST /charges requests when the button is clicked twice before the first response lands. Tracing where the idempotency key should be.

just now

Root cause: createCharge() generates a new idempotency key per call instead of per checkout session, so the gateway treats the second click as a fresh charge. Fixing that and disabling the button while a charge is in flight.

just now
Extra high
acme-dashboard/Add a dark mode toggle to settings
Add a dark mode toggle to the settings page. Should remember the choice and follow the system default until they pick one.

There's already a ThemeProvider wrapping the app but it's hard-wired to light. I'll lift the mode into context, persist it to localStorage, and add a Light / Dark segmented control under Settings → Appearance.

just now
src/theme/ThemeProvider.tsx
10export function ThemeProvider({children}: {children: ReactNode}) {
11+ const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
12 const stored = localStorage.getItem('theme')
13+ const [mode, setMode] = useState(stored ?? (prefersDark ? 'dark' : 'light'))
14 
15+ useEffect(() => {
16+ localStorage.setItem('theme', mode)
17+ }, [mode])
18 
19 return (
20 <ThemeContext.Provider value={{mode, setMode}}>
21 {children}

Done — the Appearance section now has the toggle. Preview's on the right; flip it and the whole app should follow. Reduce-motion and density rows are stubbed so the page doesn't look bare.

just now
#112acme-dashboardclaude/settings-dark-mode-Xk4fq CI
Extra high

Claude Code を使い始める

Pro

Claude CodeはPro planに含まれています。小規模なコードベースでの短期コーディングに最適です。

$17

年間サブスクリプション割引適用時の月額($200 一括請求)。月払いの場合は $20。

Claude を試す (opens in new tab)

Max 5x

Claude Code は Max plan に含まれています。大規模なコードベースでの日常的な使用に優れたコストパフォーマンスを発揮します。月額100ドル分のAPIクレジットが含まれます。

Max 20x

Max plan には Claude Code の使用量がさらに多く含まれています。Claude モデルへの最大限のアクセスを求めるパワーユーザーに最適です。月額200ドル分のAPIクレジットが含まれます。

使用量制限が適用されます。表示価格には該当する税金は含まれていません。価格およびプランは Anthropic の裁量により変更される場合があります。

Claude Code が担える作業範囲

Claude Code が計画を立案し、不明点を確認しながら、数時間から数日にわたる作業を処理します。

I'm new to this codebase. Can you explain it to me?

⏺︎ I'll analyze the Excalidraw codebase structure and provide a high-level overview.

⏺︎ Analyze(what: "Excalidraw codebase structure and provide a high-level overview of what it is, its main components, and how they're organized. Focus on understanding the project's purpose, architecture, and key features.")

Excalidraw is an open-source virtual whiteboard application with a hand-drawn style. It's designed for creating diagrams, wireframes, and collaborative drawings.

## Purpose
- Web-based drawing tool with infinite canvas
- Hand-drawn aesthetic with support for shapes, arrows, text
- End-to-end encrypted collaboration
- Works offline as a PWA (Progressive Web App)

## Architecture
The project is organized as a monorepo with these main components:

1. Core Package (packages/excalidraw)
- React component library for embedding Excalidraw in any application
- Handles drawing, rendering, and core functionality
- Uses roughjs for the hand-drawn style
- Includes export capabilities (PNG, SVG)

2. Web Application (excalidraw-app/)
- Full-featured web app at excalidraw.com
- Built on top of the core package
- Adds collaboration features, local storage, sharing

3. Support Packages
- common - Shared utilities and constants
- element - Element manipulation and type definitions
- math - Mathematical functions for drawing
- utils - General utility functions

4. Examples
- Integration examples (Next.js, browser script)
- Shows how to embed Excalidraw in different environments

5. Documentation (dev-docs/)
- API documentation
- Integration guides
- Component documentation

## Key Features
- Real-time collaboration with end-to-end encryption
- Export to various formats (PNG, SVG, JSON)
- Customizable drawing tools (rectangle, circle, arrows, freehand)
- Dark mode support
- Localization
- Library of shapes and components
- Arrow bindings and labels
- Image support

## Technology Stack
- React for UI
- TypeScript for type safety
- Firebase for collaboration backend
- Jotai for state management
- Vite for development and building
- IndexedDB/LocalStorage for offline storage

The architecture allows for both using Excalidraw as a component in other applications and as a standalone web application with additional features.
  • コードのオンボーディング

    Claude Code は数秒でコードベース全体をマッピングし、内容を説明します。agentic search を使用してプロジェクトの構造と依存関係を把握するため、コンテキストファイルを手動で選択する必要がありません。

  • Issue を PR に変換する

    ツール間の行き来はもう不要です。Claude Code は GitHub、GitLab、およびコマンドラインツールと連携し、Issue の読み取り、コードの記述、テストの実行、プルリクエストの作成をシームレスに行います。

  • 数時間かかるリファクタリングやマイグレーションを実行

    Claude Code はリポジトリ全体のインポートを追跡し、テストを実行し、問題が発生しても作業を継続します。

カスタマーのコーディング環境に合わせて対応

Claude Code running in a terminal

ターミナルから始める

高性能なターミナル統合機能。あらゆる CLI ツールおよび IDE と連携します。

Claude Code extension in VS Code

エディタと統合する

VS Code(+ Cursor、Devin Desktop)および JetBrains IDE 向けのネイティブ拡張機能。

Claude Code on the web

どこからでもアクセス

ブラウザ、モバイルアプリ、またはデスクトップの Claude からすばやくアクセス。並行作業や外出先でのコーディングに最適です。

Slack でコーディングタスクを開始する

開発者の声

  • “Claude Code はチームのコーディング効率を劇的に向上させました。ノートブックで EDA コードを書いて、データの取得、モデルのトレーニング、基本的な指標での評価を行い、その後 Claude に Metaflow パイプラインへ変換するよう依頼できます。このプロセスにより、1 モデルあたり 1〜2 日分の定型作業(しばしば退屈な作業)を省くことができます。”

    Anton Biryukov、スタッフソフトウェアエンジニア

    事例を読む
  • “Claude を活用することで、カスタマーサービスを単に自動化するだけでなく、真に人間的な品質へと高めることができます。これにより、サポートチームはカスタマー体験と真に価値ある対話の実現に向けて、より戦略的な思考を注ぐことができます。”

    Fergal Reid、AI 担当バイスプレジデント

    事例を読む
  • “Claude Code はチームのレベルを引き上げています。私たちは何をすべきかを判断し、Claude Code がエンドツーエンドで構築・検証できるようにプロセスを整えるだけです。今や私の仕事の大部分は、できるだけ多くの Claude Code のインスタンスを稼働させ続けることです。”

    Simon Last、共同創業者

    事例を読む

お気に入りのコマンドラインツールと連携

ターミナルこそ、実際の作業が行われる場所です。Claude Code は、デプロイ、データベース、モニタリング、バージョン管理など、開発を支えるツールと連携します。新たなインターフェースを増やすのではなく、既存のスタックをそのまま強化します。

FAQ

Claude CodeにはClaude ProまたはMax plan、TeamまたはEnterprise plan、あるいはClaude Consoleアカウントでアクセスできます。Download Claude Codeして、それぞれのClaude またはConsoleの認証情報でサインインしてください。

Claude Code は、バグ修正やテストといったルーティンワークから、長時間にわたる非同期のリファクタリングや新機能開発といった大規模な作業まで対応します。

カスタマーがアーキテクトおよびオーケストレーターとして方向性を定め、Claude Code が実際の作業を担います。やりたいことを伝えるだけで、計画の立案、コードの記述、テストの実行、プルリクエストの作成まで対応します。複数のタスクを並行して処理し、作業を継続するために必要な判断事項をカスタマーに提示します。

Claude Code はターミナル上で動作し、ワークフローを変えることなく、使い慣れた IDE や開発ツールと連携します。Git などのコマンドラインツールや、GitHub などの MCP サーバーを活用して、独自の機能を拡張することも可能です。

はい。Claude Code はカスタマーのターミナル上でローカルに動作し、バックエンドサーバーやリモートのコードインデックスを必要とせず、モデル API に直接接続します。また、ファイルの変更やコマンドの実行前に必ず許可を求めます。

Claude Code は macOS、Linux、Windows で動作します。システム要件の全詳細をご確認ください。

Claude Console アカウントと組み合わせて使用する場合、Claude Code は標準 API 料金で API トークンを消費します。

はい。Max、Pro、Team、Enterprise のカスタマーは、Claude デスクトップアプリで Claude Code をご利用いただけます。

Fast modeはOpus 5.5の高速設定で、モデルをトークンあたりのコストが高くなる代わりに2.5倍高速化します。Fast modeは以下の環境でご利用いただけます:

  • Claude Codeの研究プレビュー(100万トークンあたり$8/$40)。
  • 消費量ベースのプラン。
  • サブスクリプションプランご利用のカスタマー向けの使用クレジットによるご利用。