Closed40
Claude Code の Max プランを契約してみる
薄田達哉 / tatsuyasusukidaこのスクラップについて
昨日、個人的にメンターと崇める方から Claude Code を勧めていただいたことに加え、今年は生産性を上げないと仕事が終わらないのではないかという不安に駆られたので、Claude Code の Max プランを契約しようと思い、せっかくなのでその過程を記録していく。
薄田達哉 / tatsuyasusukidaClaude も使える
ProプランとMaxプランでは、ウェブ、デスクトップ、モバイルアプリのClaudeと、ターミナルのClaude Codeの両方に、一つの統合されたサブスクリプションでアクセスできるようになりました。
これによると Max プランを契約すれば Claude Code だけではなく Claude も使えるようだ、素晴らしい。
今後は Claude に話し相手になってもらおう。お茶目な ChatGPT も好きなので悩ましい。
薄田達哉 / tatsuyasusukidaPro プランと Max プランの違い
こちらを見る限りではほぼ使用量の違いのような印象を受ける。
他の記事を見るとアクセスできるモデルに違いがあるとかないとか書いてあるが本当だろうか？
せっかくなので Pro プランを 1 カ月だけ試してから Max プランに移行してみよう。
薄田達哉 / tatsuyasusukidaプランのアップグレード
「アップグレード」をクリック
「プロプランを取得」をクリック
「月間」を選び、氏名やクレジットカードの情報を入力して「購読する」をクリック
完了すると請求ページが表示される
薄田達哉 / tatsuyasusukidaClaude Code のインストール
コマンド
npm install -g @anthropic-ai/claude-code
Claude Code のセットアップ
まずは適当なリポジトリを作成する。
コマンド
cd ~/workspace
pnpm create cloudflare@latest my-react-app --framework=react
cd my-react-app
まずは claude を起動してみよう。
コマンド
claude
テキストスタイルの選択、個人的には Dark mode (colorblind-friendly) が見やすくて良い。
コンソール出力
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
Let's get started.
Choose the text style that looks best with your terminal:
To change this later, run /theme
1. Dark mode✔
2. Light mode
❯ 3. Dark mode (colorblind-friendly)
4. Light mode (colorblind-friendly)
5. Dark mode (ANSI colors only)
6. Light mode (ANSI colors only)
Preview
╭────────────────────────────────────────────────────────────────────────────╮
│ 1 function greet() { │
│ 2 - console.log("Hello, World!"); │
│ 2 + console.log("Hello, Claude!"); │
│ 3 } │
╰────────────────────────────────────────────────────────────────────────────╯
続いてログイン方法の選択、Claude account with subscription を選ぶ。
コンソール出力
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗
██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝
██║ ██║ ███████║██║ ██║██║ ██║█████╗
██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝
╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗
╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝
██████╗ ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║ ██║ ██║██║ ██║█████╗
██║ ██║ ██║██║ ██║██╔══╝
╚██████╗╚██████╔╝██████╔╝███████╗
╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
Claude Code can now be used with your Claude subscription or billed based on
API usage through your Console account.
Select login method:
❯ 1. Claude account with subscription
Starting at $20/mo for Pro, $100/mo for Max - Best value, predictable
pricing
2. Anthropic Console account
API usage billing
「承認する」をクリック
「偉大なものを作りなさい」と励ましの言葉をいただいた、頑張ります
承認したらコンソール側で Enter キーを押下する。
コンソール出力
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
Security notes:
1. Claude can make mistakes
You should always review Claude's responses, especially when
running code.
2. Due to prompt injection risks, only use it with code you trust
For more details see:
https://docs.anthropic.com/s/claude-code-security
Press Enter to continue…
注意書きの確認、プロンプトインジェクションって何だろう？
後からじっくり読むことにして、こちらも Enter キーを押下する。
コンソール出力
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
Use Claude Code's terminal setup?
For the optimal coding experience, enable the recommended settings
for your terminal: Option+Enter for newlines and visual bell
❯ 1. Yes, use recommended settings
2. No, maybe later with /terminal-setup
Enter to confirm · Esc to skip
Option + Enter で改行できるようなことが書いてある。
こちらも推奨設定に従っておこう。
コンソール出力
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Do you trust the files in this folder? │
│ │
│ /Users/susukida/workspace/my-react-app │
│ │
│ Claude Code may read files in this folder. Reading untrusted files may lead │
│ Claude Code to behave in an unexpected ways. │
│ │
│ With your permission Claude Code may execute files in this folder. Executing │
│ untrusted code is unsafe. │
│ │
│ https://docs.anthropic.com/s/claude-code-security │
│ │
│ 1. Yes, proceed │
│ ❯ 2. No, exit │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Enter to confirm · Esc to exit
こちらは選んでから Enter キーを押す必要がある。
コンソール出力
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code! │
│ │
│ /help for help, /status for your current setup │
│ │
│ cwd: /Users/susukida/workspace/my-react-app │
╰───────────────────────────────────────────────────╯
Tips for getting started:
1. Run /init to create a CLAUDE.md file with instructions for Claude
2. Use Claude to help with file analysis, editing, bash commands and git
3. Be as specific as you would with another engineer for the best results
4. ✔ Run /terminal-setup to set up terminal integration
※ Tip: Start with small features or bug fixes, tell Claude to propose a plan,
and verify its suggested edits
╭──────────────────────────────────────────────────────────────────────────────╮
│ > Try "how do I log an error?" │
╰──────────────────────────────────────────────────────────────────────────────╯
? for shortcuts
これで使えるようになったようだ。
薄田達哉 / tatsuyasusukida日本語にできる？
ちょっと探したけど見つからない、ヘルプを見てみよう。
プロンプト
/help
コンソール出力
Claude Code v1.0.30
Always review Claude's responses, especially when running code. Claude has read
access to files in the current directory and can run commands and edit files
with your permission.
Usage Modes:
• REPL: claude (interactive session)
• Non-interactive: claude -p "question"
Run claude -h for all command line options
Common Tasks:
• Ask questions about your codebase > How does foo.py work?
• Edit files > Update bar.ts to...
• Fix errors > cargo build
• Run commands > /help
• Run bash commands > !ls
Interactive Mode Commands:
/add-dir - Add a new working directory
/bug - Submit feedback about Claude Code
/clear - Clear conversation history and free up context
/compac - Clear conversation history but keep a summary in context. Optional:
/compact [instructions for summarization]
/config - Open config panel
/cost - Show the total cost and duration of the current session
/doctor - Checks the health of your Claude Code installation
/exit - Exit the REPL
/help - Show help and available commands
/ide - Manage IDE integrations and show status
/init - Initialize a new CLAUDE.md file with codebase documentation
/install-github-app - Set up Claude GitHub Actions for a repository
/login - Sign in with your Anthropic account
/logout - Sign out from your Anthropic account
/mcp - Manage MCP servers
/memory - Edit Claude memory files
/migrate-installe - Migrate from global npm installation to local installation
/model - Set the AI model for Claude Code
/permissions - Manage allow & deny tool permission rules
/pr-comments - Get comments from a GitHub pull request
/release-notes - View release notes
/resume - Resume a conversation
/review - Review a pull request
/status - Show Claude Code status including version, model, account, API
connectivity, and tool statuses
/terminal-setup - Enable Option+Enter key binding for newlines and visual bell
/upgrade - Upgrade to Max for higher rate limits and more Opus
/vim - Toggle between Vim and Normal editing modes
Learn more at: https://docs.anthropic.com/s/claude-code
Press Enter to continue…
続いて質問してみる。
プロンプト
Claude Code の表示言語を日本語に変更できますか？
回答
⏺ Claude Code
の表示言語を日本語に変更する機能は現在提供されていません。Claude Code
は英語でのみ利用可能です。
ただし、あなたとの会話は日本語で行うことができます。私は日本語でのやり取り
に対応しています。
素晴らしい、英語でも全然大丈夫です。
こちらに従ってプロジェクトを初期化してみる。
プロンプト
このプロジェクトを要約してください。
回答
⏺ List(.)
⎿ Listed 28 paths (ctrl+r to expand)
⏺ Read(README.md)
⎿ Read 55 lines (ctrl+r to expand)
⏺ Read(package.json)
⎿ Read 33 lines (ctrl+r to expand)
⏺ Read(wrangler.jsonc)
⎿ Read 51 lines (ctrl+r to expand)
⏺ このプロジェクトは、React + TypeScript + Vite
をベースとしたWebアプリケーションで、Cloudflare Workers
にデプロイされるように設定されています。
主な特徴：
- React 19.1.0とTypeScriptを使用したモダンなフロントエンド
- Viteによる高速な開発サーバーとビルド
- Cloudflare Workersでのホスティング対応（wrangler設定済み）
- ESLintによるコード品質管理
- SPA（Single Page Application）として構成
素晴らしい、ちゃんと要約できている。
プロンプト
/init
回答
⏺ Task(Analyze codebase structure)
⎿ Done (15 tool uses · 17.6k tokens · 57.4s)
⏺ List(.)
⎿ Listed 27 paths (ctrl+r to expand)
⏺ Search(pattern: "**/.cursor*")
⎿ Found 0 files
⏺ Search(pattern: "**/.cursorrules")
⎿ Found 0 files
⏺ Search(pattern: "**/.github/copilot-instructions.md")
⎿ Found 0 files
⏺ Search(pattern: "**/CLAUDE.md")
⎿ Found 0 files
⏺ Write(CLAUDE.md)
╭───────────────────────────────────────────────────────────────────────────────╮
│ Create file │
│ ╭───────────────────────────────────────────────────────────────────────────╮ │
│ │ CLAUDE.md │ │
│ │ │ │
│ │ # CLAUDE.md │ │
│ │ │ │
│ │ This file provides guidance to Claude Code (claude.ai/code) when working │ │
│ │ with code in this repository. │ │
│ │ │ │
│ │ ## Project Architecture │ │
│ │ │ │
│ │ This is a React + TypeScript + Vite application configured for Cloudflare │ │
│ │ Workers deployment. The architecture combines a React frontend with a │ │
│ │ Cloudflare Worker backend in a single repository. │ │
│ │ │ │
│ │ ### Key Components │ │
│ │ │ │
│ │ - **Frontend**: React 19 SPA built with Vite, located in `src/` │ │
│ │ - **Backend**: Cloudflare Worker in `worker/index.ts` that handles API │ │
│ │ routes (`/api/*`) and serves static assets │ │
│ │ - **Build System**: Vite with `@cloudflare/vite-plugin` for Cloudflare │ │
│ │ integration │ │
│ │ - **TypeScript**: Multi-target configuration with separate configs for │ │
│ │ app, worker, and build tools │ │
│ │ │ │
│ │ ### Development Architecture │ │
│ │ │ │
│ │ The application uses a dual-target setup where: │ │
│ │ - React app runs in the browser (DOM environment) │ │
│ │ - Worker code runs in Cloudflare's V8 runtime (no Node.js APIs) │ │
│ │ - API communication happens via `/api/*` routes handled by the worker │ │
│ │ - Static assets are served directly by the worker with SPA routing │ │
│ │ enabled │ │
│ │ │ │
│ │ ## Common Commands │ │
│ │ │ │
│ │ ### Development │ │
│ │ ```bash │ │
│ │ pnpm dev # Start development server with hot reload │ │
│ │ pnpm build # Build for production (TypeScript + Vite) │ │
│ │ pnpm preview # Preview production build locally │ │
│ │ ``` │ │
│ │ │ │
│ │ ### Deployment │ │
│ │ ```bash │ │
│ │ pnpm deploy # Build and deploy to Cloudflare Workers │ │
│ │ ``` │ │
│ │ │ │
│ │ ### Code Quality │ │
│ │ ```bash │ │
│ │ pnpm lint # Run ESLint │ │
│ │ pnpm cf-typegen # Generate Cloudflare Worker types │ │
│ │ ``` │ │
│ │ │ │
│ │ ## TypeScript Configuration │ │
│ │ │ │
│ │ The project uses multiple TypeScript configurations: │ │
│ │ - `tsconfig.app.json` - React application (DOM, ES2020) │ │
│ │ - `tsconfig.worker.json` - Cloudflare Worker (no DOM, ES2022) │ │
│ │ - `tsconfig.node.json` - Build tools (Vite config) │ │
│ │ - `worker-configuration.d.ts` - Auto-generated Cloudflare types (do not │ │
│ │ edit) │ │
│ │ │ │
│ │ ## Worker Development │ │
│ │ │ │
│ │ - Worker entry point: `worker/index.ts` │ │
│ │ - API routes should start with `/api/` │ │
│ │ - Use Cloudflare Workers APIs, not Node.js APIs │ │
│ │ - Static file serving is handled automatically for non-API routes │ │
│ │ - Worker configuration in `wrangler.jsonc` │ │
│ │ │ │
│ │ ## Build Process │ │
│ │ │ │
│ │ 1. TypeScript compilation across multiple targets │ │
│ │ 2. Vite bundles the React application │ │
│ │ 3. Wrangler packages everything for Cloudflare Workers deployment │ │
│ │ 4. Single deployment artifact serves both frontend and API │ │
│ ╰───────────────────────────────────────────────────────────────────────────╯ │
│ Do you want to create CLAUDE.md? │
│ ❯ 1. Yes │
│ 2. Yes, and don't ask again this session (shift+tab) │
│ 3. No, and tell Claude what to do differently (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────╯
Enter キーを押すとファイルが作成される。
薄田達哉 / tatsuyasusukidaCLAUDE.md English version
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project Architecture
This is a React + TypeScript + Vite application configured for Cloudflare Workers deployment. The architecture combines a React frontend with a Cloudflare Worker backend in a single repository.
Key Components
-
Frontend: React 19 SPA built with Vite, located in
src/ -
Backend: Cloudflare Worker in
worker/index.tsthat handles API routes (/api/*) and serves static assets -
Build System: Vite with
@cloudflare/vite-pluginfor Cloudflare integration - TypeScript: Multi-target configuration with separate configs for app, worker, and build tools
Development Architecture
The application uses a dual-target setup where:
- React app runs in the browser (DOM environment)
- Worker code runs in Cloudflare's V8 runtime (no Node.js APIs)
- API communication happens via
/api/*routes handled by the worker - Static assets are served directly by the worker with SPA routing enabled
Common Commands
Development
pnpm dev # Start development server with hot reload
pnpm build # Build for production (TypeScript + Vite)
pnpm preview # Preview production build locally
Deployment
pnpm deploy # Build and deploy to Cloudflare Workers
Code Quality
pnpm lint # Run ESLint
pnpm cf-typegen # Generate Cloudflare Worker types
TypeScript Configuration
The project uses multiple TypeScript configurations:
-
tsconfig.app.json- React application (DOM, ES2020) -
tsconfig.worker.json- Cloudflare Worker (no DOM, ES2022) -
tsconfig.node.json- Build tools (Vite config) -
worker-configuration.d.ts- Auto-generated Cloudflare types (do not edit)
Worker Development
- Worker entry point:
worker/index.ts - API routes should start with
/api/ - Use Cloudflare Workers APIs, not Node.js APIs
- Static file serving is handled automatically for non-API routes
- Worker configuration in
wrangler.jsonc
Build Process
- TypeScript compilation across multiple targets
- Vite bundles the React application
- Wrangler packages everything for Cloudflare Workers deployment
- Single deployment artifact serves both frontend and API
薄田達哉 / tatsuyasusukida日本語に翻訳してもらう
プロンプト
CLAUDE.md を日本語で書き換えてください。
回答
⏺ Read(CLAUDE.md)
⎿ Read 65 lines (ctrl+r to expand)
⏺ Update(CLAUDE.md)
╭───────────────────────────────────────────────────────────────────────────────╮
│ Edit file │
│ ╭───────────────────────────────────────────────────────────────────────────╮ │
│ │ CLAUDE.md │ │
│ │ │ │
│ │ 1 # CLAUDE.md │ │
│ │ 2 │ │
│ │ 3 - This file provides guidance to Claude Code (claude.ai/code) when │ │
│ │ working with code in this repository. │ │
│ │ - orking with code in this repository. │ │
│ │ 3 + このファイルは、このリポジトリでコードを操作する際のClaude Code │ │
│ │ (claude.ai/code) へのガイダンスを提供します。 │ │
│ │ + ます。 │ │
│ │ 4 │ │
│ │ 5 - ## Project Architecture │ │
│ │ 5 + ## プロジェクトアーキテクチャ │ │
│ │ 6 │ │
│ │ 7 - This is a React + TypeScript + Vite application configured for │ │
│ │ Cloudflare Workers deployment. The architecture combines a React frontend │ │
│ │ with a Cloudflare Worker backend in a single repository. │ │
│ │ - udflare Workers deployment. The architecture combines a React │ │
│ │ front │ │
│ │ - end with a Cloudflare Worker backend in a single repository. │ │
│ │ 7 + これはCloudflare Workersデプロイメント用に設定されたReact + │ │
│ │ TypeScript + Viteアプリケーションです。単一のリポジトリでReactフロントエ │ │
│ │ ンドとCloudflare Workerバックエンドを組み合わせたアーキテクチャです。 │ │
│ │ + ョンです。単一のリポジトリでReactフロントエンドとCloudflare │ │
│ │ Workerバックエンドを組み合わせたアーキテクチャです。 │ │
│ │ 8 │ │
│ │ 9 - ### Key Components │ │
│ │ 9 + ### 主要コンポーネント │ │
│ │ 10 │ │
│ │ 11 - - **Frontend**: React 19 SPA built with Vite, located in `src/` │ │
│ │ 12 - - **Backend**: Cloudflare Worker in `worker/index.ts` that │ │
│ │ handles API routes (`/api/*`) and serves static assets │ │
│ │ - API routes (`/api/*`) and serves static assets │ │
│ │ 13 - - **Build System**: Vite with `@cloudflare/vite-plugin` for │ │
│ │ Cloudflare integration │ │
│ │ - lare integration │ │
│ │ 14 - - **TypeScript**: Multi-target configuration with separate │ │
│ │ configs for app, worker, and build tools │ │
│ │ - for app, worker, and build tools │ │
│ │ 11 + - **フロントエンド**: Viteで構築されたReact 19 │ │
│ │ SPA（`src/`に配置） │ │
│ │ 12 + - **バックエンド**: APIルート（`/api/*`）を処理し、静的アセットを │ │
│ │ 提供する`worker/index.ts`のCloudflare Worker │ │
│ │ + oudflare Worker │ │
│ │ 13 + - **ビルドシステム**: │ │
│ │ Cloudflare統合用の`@cloudflare/vite-plugin`を使用したVite │ │
│ │ 14 + - **TypeScript**: │ │
│ │ アプリ、ワーカー、ビルドツール用の個別設定を持つマルチターゲット構成 │ │
│ │ 15 │ │
│ │ 16 - ### Development Architecture │ │
│ │ 16 + ### 開発アーキテクチャ │ │
│ │ 17 │ │
│ │ 18 - The application uses a dual-target setup where: │ │
│ │ 19 - - React app runs in the browser (DOM environment) │ │
│ │ 20 - - Worker code runs in Cloudflare's V8 runtime (no Node.js APIs) │ │
│ │ 21 - - API communication happens via `/api/*` routes handled by the │ │
│ │ worker │ │
│ │ - ker │ │
│ │ 22 - - Static assets are served directly by the worker with SPA │ │
│ │ routing enabled │ │
│ │ - enabled │ │
│ │ 18 + アプリケーションはデュアルターゲット設定を使用： │ │
│ │ 19 + - ReactアプリはブラウザのDOM環境で実行 │ │
│ │ 20 + - WorkerコードはCloudflareのV8ランタイムで実行（Node.js │ │
│ │ APIは使用不可） │ │
│ │ 21 + - API通信はワーカーが処理する`/api/*`ルート経由 │ │
│ │ 22 + - 静的アセットはSPAルーティングが有効になったワーカーから直接提供 │ │
│ │ 23 │ │
│ │ 24 - ## Common Commands │ │
│ │ 24 + ## よく使用するコマンド │ │
│ │ 25 │ │
│ │ 26 - ### Development │ │
│ │ 26 + ### 開発 │ │
│ │ 27 ```bash │ │
│ │ 28 - pnpm dev # Start development server with hot reload │ │
│ │ 29 - pnpm build # Build for production (TypeScript + Vite) │ │
│ │ 30 - pnpm preview # Preview production build locally │ │
│ │ 28 + pnpm dev # ホットリロード付き開発サーバーを起動 │ │
│ │ 29 + pnpm build # 本番用ビルド（TypeScript + Vite） │ │
│ │ 30 + pnpm preview # 本番ビルドをローカルでプレビュー │ │
│ │ 31 ``` │ │
│ │ 32 │ │
│ │ 33 - ### Deployment │ │
│ │ 33 + ### デプロイメント │ │
│ │ 34 ```bash │ │
│ │ 35 - pnpm deploy # Build and deploy to Cloudflare Workers │ │
│ │ 35 + pnpm deploy # ビルドしてCloudflare Workersにデプロイ │ │
│ │ 36 ``` │ │
│ │ 37 │ │
│ │ 38 - ### Code Quality │ │
│ │ 38 + ### コード品質 │ │
│ │ 39 ```bash │ │
│ │ 40 - pnpm lint # Run ESLint │ │
│ │ 41 - pnpm cf-typegen # Generate Cloudflare Worker types │ │
│ │ 40 + pnpm lint # ESLintを実行 │ │
│ │ 41 + pnpm cf-typegen # Cloudflare Worker型定義を生成 │ │
│ │ 42 ``` │ │
│ │ 43 │ │
│ │ 44 - ## TypeScript Configuration │ │
│ │ 44 + ## TypeScript設定 │ │
│ │ 45 │ │
│ │ 46 - The project uses multiple TypeScript configurations: │ │
│ │ 47 - - `tsconfig.app.json` - React application (DOM, ES2020) │ │
│ │ 48 - - `tsconfig.worker.json` - Cloudflare Worker (no DOM, ES2022) │ │
│ │ 49 - - `tsconfig.node.json` - Build tools (Vite config) │ │
│ │ 50 - - `worker-configuration.d.ts` - Auto-generated Cloudflare types │ │
│ │ (do not edit) │ │
│ │ - o not edit) │ │
│ │ 46 + プロジェクトは複数のTypeScript設定を使用： │ │
│ │ 47 + - `tsconfig.app.json` - Reactアプリケーション（DOM、ES2020） │ │
│ │ 48 + - `tsconfig.worker.json` - Cloudflare Worker（DOM無し、ES2022） │ │
│ │ 49 + - `tsconfig.node.json` - ビルドツール（Vite設定） │ │
│ │ 50 + - `worker-configuration.d.ts` - │ │
│ │ 自動生成されるCloudflare型定義（編集禁止） │ │
│ │ 51 │ │
│ │ 52 - ## Worker Development │ │
│ │ 52 + ## Worker開発 │ │
│ │ 53 │ │
│ │ 54 - - Worker entry point: `worker/index.ts` │ │
│ │ 55 - - API routes should start with `/api/` │ │
│ │ 56 - - Use Cloudflare Workers APIs, not Node.js APIs │ │
│ │ 57 - - Static file serving is handled automatically for non-API routes │ │
│ │ 58 - - Worker configuration in `wrangler.jsonc` │ │
│ │ 54 + - Workerエントリーポイント: `worker/index.ts` │ │
│ │ 55 + - APIルートは`/api/`で始める必要がある │ │
│ │ 56 + - Node.js APIではなくCloudflare Workers APIを使用 │ │
│ │ 57 + - 非APIルートの静的ファイル提供は自動処理 │ │
│ │ 58 + - Worker設定は`wrangler.jsonc`で管理 │ │
│ │ 59 │ │
│ │ 60 - ## Build Process │ │
│ │ 60 + ## ビルドプロセス │ │
│ │ 61 │ │
│ │ 62 - 1. TypeScript compilation across multiple targets │ │
│ │ 63 - 2. Vite bundles the React application │ │
│ │ 64 - 3. Wrangler packages everything for Cloudflare Workers deployment │ │
│ │ 65 - 4. Single deployment artifact serves both frontend and API │ │
│ │ 62 \ No newline at end of file │ │
│ │ 63 + 1. 複数ターゲットでのTypeScriptコンパイル │ │
│ │ 64 + 2. ViteによるReactアプリケーションのバンドル │ │
│ │ 65 + 3. WranglerによるCloudflare Workersデプロイメント用パッケージング │ │
│ │ 66 + 4. │ │
│ │ フロントエンドとAPIの両方を提供する単一のデプロイメントアーティファクト │ │
│ │ 67 \ No newline at end of file │ │
│ ╰───────────────────────────────────────────────────────────────────────────╯ │
│ Do you want to make this edit to CLAUDE.md? │
│ ❯ 1. Yes │
│ 2. Yes, and don't ask again this session (shift+tab) │
│ 3. No, and tell Claude what to do differently (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────╯
CLAUDE.md 日本語版
このファイルは、このリポジトリでコードを操作する際のClaude Code (claude.ai/code) へのガイダンスを提供します。
プロジェクトアーキテクチャ
これはCloudflare Workersデプロイメント用に設定されたReact + TypeScript + Viteアプリケーションです。単一のリポジトリでReactフロントエンドとCloudflare Workerバックエンドを組み合わせたアーキテクチャです。
主要コンポーネント
-
フロントエンド: Viteで構築されたReact 19 SPA（
src/に配置） -
バックエンド: APIルート（
/api/*）を処理し、静的アセットを提供するworker/index.tsのCloudflare Worker -
ビルドシステム: Cloudflare統合用の
@cloudflare/vite-pluginを使用したVite - TypeScript: アプリ、ワーカー、ビルドツール用の個別設定を持つマルチターゲット構成
開発アーキテクチャ
アプリケーションはデュアルターゲット設定を使用：
- ReactアプリはブラウザのDOM環境で実行
- WorkerコードはCloudflareのV8ランタイムで実行（Node.js APIは使用不可）
- API通信はワーカーが処理する
/api/*ルート経由 - 静的アセットはSPAルーティングが有効になったワーカーから直接提供
よく使用するコマンド
開発
pnpm dev # ホットリロード付き開発サーバーを起動
pnpm build # 本番用ビルド（TypeScript + Vite）
pnpm preview # 本番ビルドをローカルでプレビュー
デプロイメント
pnpm deploy # ビルドしてCloudflare Workersにデプロイ
コード品質
pnpm lint # ESLintを実行
pnpm cf-typegen # Cloudflare Worker型定義を生成
TypeScript設定
プロジェクトは複数のTypeScript設定を使用：
-
tsconfig.app.json- Reactアプリケーション（DOM、ES2020） -
tsconfig.worker.json- Cloudflare Worker（DOM無し、ES2022） -
tsconfig.node.json- ビルドツール（Vite設定） -
worker-configuration.d.ts- 自動生成されるCloudflare型定義（編集禁止）
Worker開発
- Workerエントリーポイント:
worker/index.ts - APIルートは
/api/で始める必要がある - Node.js APIではなくCloudflare Workers APIを使用
- 非APIルートの静的ファイル提供は自動処理
- Worker設定は
wrangler.jsoncで管理
ビルドプロセス
- 複数ターゲットでのTypeScriptコンパイル
- ViteによるReactアプリケーションのバンドル
- WranglerによるCloudflare Workersデプロイメント用パッケージング
- フロントエンドとAPIの両方を提供する単一のデプロイメントアーティファクト
薄田達哉 / tatsuyasusukidaコミットの依頼
プロンプト
生成されたCLAUDE.mdファイルをリポジトリにコミットしてください。
回答
⏺ Bash(git status)
⎿ On branch main
Untracked files:
(use "git add <file>..." to include in what will be committed)
… +4 lines (ctrl+r to expand)
⏺ Bash(git diff)
⎿ (No content)
⏺ Bash(git log --oneline -5)
⎿ 8e11004 Initialize web application via create-cloudflare CLI
⏺ Bash(git add CLAUDE.md)
⎿ (No content)
⏺ Bash(git commit -m "Add Japanese CLAUDE.md documentation file…)
⎿ [main fa9e741] Add Japanese CLAUDE.md documentation file
1 file changed, 65 insertions(+)
create mode 100644 CLAUDE.md
⏺ Bash(git status)
⎿ On branch main
nothing to commit, working tree clean
⏺ CLAUDE.mdファイルをリポジトリにコミットしました。
どれくらいトークンを使ったのだろう？
メンターさんの記事で紹介されていた。
ccusage を使えば良いようだ。
コマンド
pnpm dlx ccusage
コンソール出力
WARN Fetching latest model pricing from LiteLLM... ccusage 17:33:34
ℹ Loaded pricing for 1128 models ccusage 17:33:34
╭──────────────────────────────────────────╮
│ │
│ Claude Code Token Usage Report - Daily │
│ │
╰──────────────────────────────────────────╯
┌──────────┬────────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┐
│ Date │ Models │ Input │ Output │ Cache │ Cache │ Total │ Cost │
│ │ │ │ │ Create │ Read │ Tokens │ (USD) │
├──────────┼────────────┼──────────┼──────────┼──────────┼──────────┼──────────┼──────────┤
│ 2025 │ sonnet-4 │ 188 │ 3,316 │ 40,620 │ 351,642 │ 395,766 │ $0.31 │
│ 06-20 │ │ │ │ │ │ │ │
├──────────┼────────────┼──────────┼──────────┼──────────┼──────────┼──────────┼──────────┤
│ Total │ │ 188 │ 3,316 │ 40,620 │ 351,642 │ 395,766 │ $0.31 │
└──────────┴────────────┴──────────┴──────────┴──────────┴──────────┴──────────┴──────────┘
まだ全然使っていないと見るか、セットアップしただけで 0.31 ドルもかかったと見るか。
受け取り方は自分次第。
薄田達哉 / tatsuyasusukida次は一般的なタスクを眺めてみよう
早く個人的なタスクをやりたい気持ちもあるが、まずは基礎を学んでいこう。
薄田達哉 / tatsuyasusukida一般的なタスク
PRを作成して
これは面白そう、試してみよう。
新しい決済サービスをどのようにアーキテクトすべきか考えて
認証フローのエッジケースについて深く考えて
「考えて」「深く考えて」というと拡張思考？が行われるようだ。
拡張思考については下記に詳しい情報がある。
拡張思考では推論プロセスが表示されるようだ。
Opus 4 と Sonnet 4 + 3.7 で利用できる。
拡張思考はどういうタイミングで使えば良いか？
まずは標準モードで試して、もう少し良い結果が欲しいと思ったら試してみる価値がありそうだ。
また -p オプションを使うことで非インタラクティブ、すなわち人間の介入を必要としない状態で実行することができるので、ビルドパイプラインなどで動作する時には便利そうだ。
薄田達哉 / tatsuyasusukidaclaude コマンド
コマンド
# パイプされたコンテンツを処理
cat logs.txt | claude -p "これらのエラーを分析して"
標準入力から情報を与える方法がある、これは便利かも。
コマンド
# 最新の会話を継続
claude -c
これも便利そうだ。
逆に claude をインタラクティブモードで使い続けると、どんどんコンテキストが長くなってしまい消費量が高くなりそう。
単発で終わる場合は新しいセッションにした方が良いのかな。
コマンド
IDでセッションを再開
claude -r "<セッションID>" "クエリ"
セッション ID はどうやって確認するんだろう？
コマンド
# 最新バージョンに更新
claude update
コマンド
# Model Context Protocolサーバーを設定
claude mcp
CLI フラグ
-
--add-dir追加で参照できるディレクトリを追加 -
--allowedToolsユーザーの許可を求めずに使用できるツールを指定 -
--output-format印刷モード（非インタラクティブモード）の出力形式を指定 -
--model使用するモデルを指定 -
--dangerously-skip-permissions許可プロンプトをスキップ
薄田達哉 / tatsuyasusukidaスラッシュコマンド
-
/clear会話履歴をクリア -
/cost使用統計を表示 -
/loginアカウント切り替え -
/memoryCLAUDE.md ファイルを編集 -
/modelモデル選択 -
/reviewコードレビューを依頼
薄田達哉 / tatsuyasusukidaクイックメモリ
# を使うとメモリにルールを追加できる。
例
# 常に説明的な変数名を使用する
改行
\ を行末に入力するか Option+Enter で改行できる。
長い場合は個人的には VS Code や vim で書いてからコピペする方が安心してタイピングできるので好き。
薄田達哉 / tatsuyasusukidaIDE 統合
せっかくなので VS Code 試してみよう。
拡張機能をインストールすると思いきや VS Code のターミナルで claude を実行するようだ。
コンソール出力
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code! │
│ │
│ /help for help, /status for your current setup │
│ │
│ cwd: /Users/susukida/workspace/my-react-app │
╰───────────────────────────────────────────────────╯
What's new:
• Streamable HTTP MCP servers are now supported
• Remote MCP servers (SSE and HTTP) now support OAuth
• MCP resources can now be @-mentioned
• Slash commands: moved "project" and "user" prefixes to descriptions
• Slash commands: improved reliability for command discovery
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ 🎉 Claude Code extension installed in VS Code! │
│ Version: 1.0.30 │
│ │
│ Quick start: │
│ • Press Cmd+Esc to launch Claude Code │
│ • View and apply file diffs directly in your editor │
│ • Use Cmd+Option+K to insert @File references │
│ │
│ For more information, see https://docs.anthropic.com/s/claude-code-ide-integrations │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Press Enter to continue…
インストールされると画面右上に Claude Code のアイコンが表示される
Command + ESC でも起動できるようだが、自分の環境では起動できない。
なぜか Caps Lock が ON になっていると起動できる。
薄田達哉 / tatsuyasusukidaメモリ管理
-
./CLAUDE.mdプロジェクトメモリ：プロジェクト固有のアーキテクチャやコーディング標準など -
~/.claude/CLAUDE.mdユーザーメモリ：すべてのプロジェクトの共通設定
./CLAUDE.local.md もあるが非推奨のようだ。
下記のように @ を使用してドキュメントを参照できるようだ、内容が増えてきたら分割するのに便利そうだ。
例
プロジェクト概要は@READMEを、このプロジェクトで利用可能なnpmコマンドは@package.jsonを参照してください。
# 追加指示
- gitワークフロー @docs/git-instructions.md
@ インポートによって個人設定を反映できるようになったので CLAUDE.local.md が非推奨になったようだ。
例
# 個人設定
- @~/.claude/my-project-instructions.md
/memory コマンドを使うと読み込まれたファイルを確認できる。
コンソール出力
Memory Files
L project: CLAUDE.md
Learn more: https://docs.anthropic.com/en/docs/claude-code/memory
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Select memory to edit: │
│ │
│ ❯ 1. Project memory Checked in at ./CLAUDE.md │
│ 2. Project memory (local) Gitignored in ./CLAUDE.local.md │
│ 3. User memory Saved in ~/.claude/CLAUDE.md │
│ │
│ 21 memories in ./CLAUDE.md │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
ESC を押すとキャンセルできる。
Claude Code は CLAUDE.md が見つかるまで再帰的に上層ディレクトリを探してくれるので、必ずしもプロジェクトルートで実行する必要はなさそうだ。
薄田達哉 / tatsuyasusukida次は設定を見てみよう
薄田達哉 / tatsuyasusukida設定ファイル
- ~/.claude/settings.json 全てのプロジェクトに適用
- .claude/settings.json リポジトリに追加されるプロジェクトの共通設定
- .claude/settings.local.json リポジトリに追加されないプロジェクトの共通設定
薄田達哉 / tatsuyasusukida利用可能な設定
- apiKeyHelper
- cleanupPeriodDays
- env
- includeCoAuthoredBy
- permissions
env と permissions がよく使いそうだ。
薄田達哉 / tatsuyasusukida環境変数
たくさんある、ざっと見てみたがあまり使わなそう。
薄田達哉 / tatsuyasusukidaドキュメント構造が変わった？
先週から変化しているような気がする。
一部のページの目次は古いままなので、こちらをベースに進めていこうか。
薄田達哉 / tatsuyasusukidaコードは学習に使用されるか？
デフォルトでは、AnthropicはClaude Codeに送信されるコードやプロンプトを使用して生成モデルをトレーニングしません。
この文言はありがたい。
薄田達哉 / tatsuyasusukida会話ピッカーの表示
コマンド
claude --resume
チュートリアル
一般的なワークフローのページに統合されたようなので、こちらを見た方が良さそう。
画像を扱うのは面白そう、ただかなりトークンを消費しそうだ。
薄田達哉 / tatsuyasusukidaカスタムスラッシュコマンド
これは便利そうだ。
コマンド
mkdir -p .claude/commands
echo "このコードのパフォーマンスを分析し、3つの具体的な最適化を提案してください：" > .claude/commands/optimize.md
Claude Code で /project:optimize と実行すると呼び出せる。
引数についても $ARGUMENTS から参照できる。
~/.claude/commands に作れば個人用コマンドも作成できる。
薄田達哉 / tatsuyasusukidaGit ワークツリー
この機能を使えば並列で Claude が実行できるのでぜひ利用したい。
コマンド
# 新しいブランチで新しいワークツリーを作成する
git worktree add ../project-feature-a -b feature-a
# または既存のブランチでワークツリーを作成する
git worktree add ../project-bugfix bugfix-123
既存のブランチでとあるがなぜ bugfix-123 が必要なのだろうか？
前者は HEAD になり、後者は bugfix-123 になるようだ。
前者の方が使うことが多そうな気がする。
もし特定のコミットを指定したい場合は下記のようになる。
コマンド
# 特定のコミットをベースにする
git worktree add ../project-feature-a -b feature-a abc1234
# 別のブランチをベースにする
git worktree add ../project-feature-a -b feature-a origin/develop
ワークツリーの一覧表示や削除は下記の通り。
コマンド
# すべてのワークツリーをリストする
git worktree list
# 完了したらワークツリーを削除する
git worktree remove ../project-feature-a
Claude Code 使用時に限らずワークツリー便利そうなので積極的に使っていきたい。
薄田達哉 / tatsuyasusukidaあとは使用あるのみ
ドキュメントにざっと一通り目を通したので、これで心置きなく使うことができそうだ。
自分なりの使い方を確立していこう。
薄田達哉 / tatsuyasusukidaMax プラン契約していないけどクローズしよう
Max プラン契約に見合うくらい使いまくったら契約しよう。
薄田達哉 / tatsuyasusukida別のスクラップを作成した
薄田達哉 / tatsuyasusukida遂に 1 日 10 ドルを超えた
もう少しで合計 20 ドルを突破しそうだ、なんか元を取った気分で嬉しい。
それでもまだ制限には達していないのでまだ使い方が甘いようだ。
薄田達哉 / tatsuyasusukidaベストプラクティスあった
薄田達哉 / tatsuyasusukidaMax プランを使いたくなってきた
Max プランを使うことで Opus を使えるようになるようだ、素晴らしい。
ようやく使用量以外の Pro プランと Max プランの違いを見つけることができた。
薄田達哉 / tatsuyasusukida音声入力
皆さん、音声入力を使用しているようだ。
SuperWhisper か Aqua Voice が良さそうだ。
こちらの記事も参考になる。
薄田達哉 / tatsuyasusukidaとりあえず Mac 標準の音声認識でもある程度は大丈夫そうだ。
iPadに比べるとちょっと音声認識の精度が悪い気がする。
ちなみにこの文章も音声認識で入力しています。
薄田達哉 / tatsuyasusukidaMax プランの契約に迷い
Max プランでは Opus が使えるが、一定以上使うと制限がかかってしまうようだ。
また Sonnet 4 が優秀すぎるので、得られる結果があまり Opus と変わらないという話を聞いた。
そうなると Max プランの魅力が少し減ってしまうのでアップグレードするか悩ましい所だ。
とはいえ 1 ヶ月くらいは Max プランを経験してみるのも悪くはないかも知れない。
また、今後 GitHub Actions で Claude Code を動かす機能が出てくる可能性が高いと思っているので、そうなったら是非とも Max プランを試してみよう。
このスクラップは4ヶ月前にクローズされました