【Claude Code】噂のコレ！Amazon Bedrockで試してみた！

「Claude Code、エディタに依存しないんだって！！良い！嬉しい！」というので、使ってみましt

# 前提

* MacBookを使用してセットアップします

# セットアップ方法

## 1. ホームディレクトリへ移動

```sh
$ cd
```

## 2. Node.jsをインストール

```sh
$ brew install nodejs
```

## 3. Claude Codeをインストール

```sh
$ npm install -g @anthropic-ai/claude-code
```

## 4. 作業ディレクトリへ移動

```sh
$ cd /test_dir
```

## 5. 設定ファイルに色々設定

`/Users/testuser/.claude/settings.json`にClaude Codeの設定ファイルが置かれているので、エディタかVimかで開きます。

```sh
$ vi /Users/testuser/.claude/settings.json
```

:::note warn
`testuser`のところは自分のユーザ名に変えてください。（わからない人は、以下を実行してください。

```sh
$ cd && pwd
```
:::

`setting.json`にBedrockを使用する設定を加えます。

```json
{
  "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
  }
}
```

:::note info
* `ANTHROPIC_MODEL`で **`apac`** から始めているのは、`ap-northeast-1`リージョンで使用したいからです
* `us-east-1`などで使用したい場合は、 **`us`** から始める必要があります
* 必ず、AWSマネジメントコンソールから、Bedrockの使いたいモデルのアクセスを許可しておいてください
:::

## 6. Claude Codeを起動！

```sh
$ claude
```

こんなのが出ます。

```sh
$ 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に歓迎されます。

```sh
╭───────────────────────────────────────────────────╮
│ ✻ 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?"`」のところに文字を入力できるので、入力します。

```sh

> 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`を別の色に変えてというリクエストを出したら変わりました！

```sh
> 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`と入力します。

```sh
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > /cost                                                                                                                                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  /cost     Show the total cost and duration of the current session
```

Enterを押すと、使用したコストが出力されます。

```sh
> /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
```