Closed15
Claude Code を試す
oppara起動。テーマ何使うか聞かれた。
% claude
╭──────────────────────────╮
│ ✻ 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 } │
╰──────────────────────────────────────────────────────────────────╯
とりあえず API 使用を選択。
╭──────────────────────────╮
│ ✻ 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
エンターキーを叩くとブラウザが開いた。
ターミナルの表示も変わった。
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗
██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝
██║ ██║ ███████║██║ ██║██║ ██║█████╗
██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝
╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗
╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝
██████╗ ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║ ██║ ██║██║ ██║█████╗
██║ ██║ ██║██║ ██║██╔══╝
╚██████╗╚██████╔╝██████╔╝███████╗
╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
Browser didn't open? Use the url below to sign in:
https://console.anthropic.com/oauth/authorize?
Paste code here if prompted >
[Authorize] をクリック。とりあえず5ドル払えと。
oppara諸々入力して [By USD 5 of credits] をクリック。
ターミナルの表示も変わった。
╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯
██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗
██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝
██║ ██║ ███████║██║ ██║██║ ██║█████╗
██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝
╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗
╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝
██████╗ ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║ ██║ ██║██║ ██║█████╗
██║ ██║ ██║██║ ██║██╔══╝
╚██████╗╚██████╔╝██████╔╝███████╗
╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
Browser didn't open? Use the url below to sign in:
https://console.anthropic.com/oauth/authorize?
Logged in as oppara@me.com
Login successful. Press Enter to continue…
セキュリティに関する注意事項が表示される
╭──────────────────────────╮
│ ✻ 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…
このフォルダ内のファイルを信頼しますか？と聞かれる。
他のフォルダで実行したいので、Esc を叩いて終了。
╭──────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Do you trust the files in this folder? │
│ │
│ /Users/oppara/tmp │
│ │
│ 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
コスト確認。
% npx ccusage@latest
WARN No Claude usage data found.
npx create-remix@latest したディレクトリで動作確認
% claude main
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Do you trust the files in this folder? │
│ │
│ /Users/oppara/tmp/try-remix │
│ │
│ 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
/init コマンドを実行
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code! │
│ │
│ /help for help, /status for your current setup │
│ │
│ cwd: /Users/oppara/tmp/try-remix │
╰───────────────────────────────────────────────────╯
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
※ Tip: Start with small features or bug fixes, tell Claude to propose a plan, and verify its
suggested edits
╭────────────────────────────────────────────────────────────────────────╮
│ > /init │
╰────────────────────────────────────────────────────────────────────────╯
> /init is analyzing your codebase…
⏺ I'll analyze the codebase and create a CLAUDE.md file to help future instances of Claude
Code work effectively in this repository.
⏺ List(.)
⎿ Listed 21 paths (ctrl+r to expand)
⏺ Read(README.md)
⎿ Read 41 lines (ctrl+r to expand)
⏺ Read(package.json)
⎿ Read 43 lines (ctrl+r to expand)
⏺ Read(vite.config.ts)
⎿ Read 25 lines (ctrl+r to expand)
⏺ Read(app/root.tsx)
⎿ Read 46 lines (ctrl+r to expand)
⏺ Read(tsconfig.json)
⎿ Read 33 lines (ctrl+r to expand)
⏺ Search(pattern: "**/CLAUDE.md")
⎿ Found 0 files
⏺ Search(pattern: "**/.cursor/rules/*")
⎿ Found 0 files
⏺ Search(pattern: "**/.cursorrules")
⎿ Found 0 files
⏺ Search(pattern: "**/.github/copilot-instructions.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. │ │
│ │ │ │
│ │ ## Commands │ │
│ │ │ │
│ │ ### Development │ │
│ │ - `npm run dev` - Start the development server with hot reload │ │
│ │ - `npm run build` - Build the application for production │ │
│ │ - `npm start` - Run the production server │ │
│ │ - `npm run lint` - Run ESLint on the codebase │ │
│ │ - `npm run typecheck` - Run TypeScript type checking │ │
│ │ │ │
│ │ ## Architecture │ │
│ │ │ │
│ │ This is a Remix application using Vite as the build tool, with TypeScript and Tailwind │ │
│ │ CSS. │ │
│ │ │ │
│ │ ### Key Structure │ │
│ │ - **Entry Points**: `app/entry.client.tsx` and `app/entry.server.tsx` handle client and │ │
│ │ server-side rendering │ │
│ │ - **Root Layout**: `app/root.tsx` defines the HTML document structure and global layout │ │
│ │ - **Routes**: Located in `app/routes/` directory using Remix file-based routing │ │
│ │ - **Styling**: Uses Tailwind CSS with global styles in `app/tailwind.css` │ │
│ │ │ │
│ │ ### Configuration │ │
│ │ - **Build Tool**: Vite with Remix plugin configured in `vite.config.ts` │ │
│ │ - **TypeScript**: Path aliases configured with `~/*` mapping to `./app/*` │ │
│ │ - **Remix Features**: Uses v3 future flags including single fetch, lazy route discovery, │ │
│ │ and relative splat paths │ │
│ │ │ │
│ │ ### Dependencies │ │
│ │ - React 18 with Remix v2 │ │
│ │ - TypeScript with strict mode enabled │ │
│ │ - ESLint with TypeScript, React, and accessibility plugins │ │
│ │ - Tailwind CSS with PostCSS and Autoprefixer │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────╯ │
│ 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) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯
_index.tsx を説明してもらう。インライン変換出来ないのはつらい。。。
> @app/routes/_index.tsx
⎿ Read app/routes/_index.tsx (139 lines)
⏺ The index route displays a welcome page with Remix branding and helpful resource links.
> app/routes/_index.tsxを説明して
⏺ app/routes/_index.tsxは、Remixアプリケーションのホームページ（ルートページ）を定義するフ
ァイルです。
主要な構成要素
メタデータ定義 (3-8行目):
- ページタイトルを"New Remix App"に設定
- SEO用のdescriptionメタタグを追加
メインコンポーネント (10-54行目):
- 画面中央にコンテンツを配置するレイアウト
- ダークモード対応のRemixロゴ表示
- リソースリンクのナビゲーション
リソース配列 (56-138行目):
- 4つの外部リンクを定義（Quick Start、Tutorial、Docs、Discord）
- 各リンクにはカスタムSVGアイコンが付属
- ホバー効果とダークモード対応のスタイリング
技術的特徴
- Tailwind CSSでレスポンシブデザイン
- ダークモード自動切り替え対応
- アクセシビリティ配慮（sr-onlyクラス使用）
- 外部リンクの安全な開き方（target="_blank" rel="noreferrer"）
Remixの典型的なスターターページとして、新規プロジェクトの出発点となる構成です。
これまでのコスト
Total cost: $0.1369
Total duration (API): 49.6s
Total duration (wall): 9m 55.3s
Total code changes: 33 lines added, 0 lines removed
Token usage by model:
claude-3-5-haiku: 419 input, 86 output, 0 cache read, 0 cache write
claude-sonnet: 43 input, 1.6k output, 115.5k cache read, 20.8k cache write
ccusage でも確認してみる。
% npx ccusage@latest
WARN Fetching latest model pricing from LiteLLM... ccusage 4:20:48 PM
ℹ Loaded pricing for 1108 models ccusage 4:20:48 PM
╭──────────────────────────────────────────╮
│ │
│ Claude Code Token Usage Report - Daily │
│ │
╰──────────────────────────────────────────╯
┌──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬────────────┐
│ Date │ Models │ Input │ Output │ Cache Create │ Cache Read │ Total Tokens │ Cost (USD) │
├──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼────────────┤
│ 2025-06-15 │ sonnet-4 │ 43 │ 553 │ 20,805 │ 115,499 │ 136,900 │ $0.12 │
├──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼────────────┤
│ ──────────── │ ──────────── │ ──────────── │ ──────────── │ ──────────── │ ──────────── │ ──────────── │ ────────── │
├──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼────────────┤
│ Total │ │ 43 │ 553 │ 20,805 │ 115,499 │ 136,900 │ $0.12 │
└──────────────┴──────────────┴──────────────┴──────────────┴──────────────┴──────────────┴──────────────┴────────────┘
claude-3-5-haiku の費用は出てこない。
Input 数は同じ (43) なので、
$0.1369 - $0.12 = $0.0169 が haiku の費用っぽい？
このスクラップは1ヶ月前にクローズされました