「Claude Code、エディタに依存しないんだって！！良い！嬉しい！」というので、使ってみましt
前提
- MacBookを使用してセットアップします
セットアップ方法
1. ホームディレクトリへ移動
$ cd
2. Node.jsをインストール
$ brew install nodejs
3. Claude Codeをインストール
$ npm install -g @anthropic-ai/claude-code
4. 作業ディレクトリへ移動
$ cd /test_dir
5. 設定ファイルに色々設定
/Users/testuser/.claude/settings.jsonにClaude Codeの設定ファイルが置かれているので、エディタかVimかで開きます。
$ vi /Users/testuser/.claude/settings.json
testuserのところは自分のユーザ名に変えてください。（わからない人は、以下を実行してください。
$ cd && pwd
setting.jsonにBedrockを使用する設定を加えます。
{
"env": {
"AWS_PROFILE": "<AWSのプロファイル名>",
"AWS_REGION": "ap-northeast-1",
"CLAUDE_CODE_USE_BEDROCK": "true",
"ANTHROPIC_MODEL": "apac.anthropic.claude-3-5-sonnet-20240620-v1:0",
"DISABLE_PROMPT_CACHING": 1
}
}
-
ANTHROPIC_MODELでapacから始めているのは、ap-northeast-1リージョンで使用したいからです -
us-east-1などで使用したい場合は、usから始める必要があります - 必ず、AWSマネジメントコンソールから、Bedrockの使いたいモデルのアクセスを許可しておいてください
6. Claude Codeを起動！
$ claude
こんなのが出ます。
$ claude
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Do you trust the files in this folder? │
│ │
│ /Users/testuser/code/1day-intern-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」押します。そしたら、Claude Codeに歓迎されます。
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code! │
│ │
│ /help for help, /status for your current setup │
│ │
│ cwd: /Users/testuser/code/1day-intern-app │
│ │
│ ─────────────────────────────────────────────── │
│ │
│ Overrides (via env): │
│ │
│ • Prompt caching: off │
╰───────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > Try "how does <filepath> work?" │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? for shortcuts ⧉ 6 lines selected
「Try "how does <filepath> work?"」のところに文字を入力できるので、入力します。
> Hello!
⏺ The file /Users/testuser/.claude/settings.json contains configuration settings for Claude Code. Would you like me to read its contents or perform
any specific actions with this file?
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? for shortcuts
まぁやりとりはできていそう...?
試しに、同じディレクトリにあるHTMLファイルのbackground-colorを別の色に変えてというリクエストを出したら変わりました！
> index.htmlのメインカラーを変えてみてください。
⏺ はい、index.htmlのメインカラーを変更します。まず、ファイルの内容を確認しましょう。
⏺ Read(index.html)
⎿ Read 390 lines (ctrl+r to expand)
⏺ メインカラーを変更するために、CSSの色指定を変更します。現在のメインカラーは水色（#00ffcc）です。これを紫色に変更しましょう。
⏺ Update(index.html)
⎿ Updated index.html with 1 addition and 1 removal
8
9 body {
10 background: linear-gradient(to bottom, #111, #222);
11 color: #00ffcc;
11 color: #8A2BE2;
12 font-family: 'Press Start 2P', cursive;
13 padding: 40px;
14 text-align: center;
⏺ メインカラーを水色（#00ffcc）から紫色（#8A2BE2）に変更しました。他の要素も更新しますか？
以上
おまけ
消費コストの確認方法
プロンプト入力欄で、/costと入力します。
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > /cost │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
/cost Show the total cost and duration of the current session
Enterを押すと、使用したコストが出力されます。
> /cost
⎿ Total cost: $0.4890
Total duration (API): 1m 6.2s
Total duration (wall): 15m 42.8s
Total code changes: 95 lines added, 41 lines removed
Token usage by model:
claude-3-5-sonnet: 148.8k input, 2.8k output, 0 cache read, 0 cache write