🖥️

ClaudeCodeを既存のDevContainerプロジェクトに組み込んだ記録(Windows・Cursor/VSCode連携)

に公開

※当記事は、2025年5月31日時点の情報に基づきます。閲覧時点では、仕様が変更されている可能性のあることにご注意ください。

✨️前提条件

以下の条件でClaude CodeをDevContainerに追加しました。

✨️Calude Maxプランの契約メモ

  • Claude API用のアカウントを持っていても、それでは契約はできない
  • ClaudeのWebやDesktopの方で利用するアカウントを作成してから契約する
  • 法人契約にする場合、法人番号が必要(国税庁のサイトにて自社名で検索できる)

https://support.anthropic.com/ja/articles/11049752-maxプランにはどのように申し込めばよいですか

✨️設定手順

1. コンテナ内にClaude codeをインストール

devcontainer.jsonにClaudeCodeのfeatureを追記します。コンテナの再ビルドを実行します。
ビルド後、コンテナ内にClaude Codeがインストールされています。

p1

上記の手順は、以下の記事を参考にさせて頂きました(ありがとうございます🙏)。

https://qiita.com/fussy113/items/eba52ac807c060dce379

コンテナが起動したら、念の為、以下のバージョン確認オプションを入力し、インストールを確認します。

p2

2.認証

ターミナルにて、「claude」と入力するとClude Codeが起動し、認証を促されます。

「API利用」と「Claude app利用」か質問があるので、Maxプランを契約していれば「Cluade app」選択します。

p3

ClaudeのWebサイトでの認証を促すダイアログが表示されます。今回はそのままブラウザを開きました。

p4

ブラウザが立ち上がったら、ClaudeCodeとアカウントの接続を承認する画面が表示されます。ここで「承認する」を押します。

p5

承認が終わったら、以下のように認証確認を示す内容が画面に表示されます。内容を確認したら画面を閉じます。

p6

コンテナのターミナルには、以下のようにログインメッセージが表示されます。
任意のキーを入力して、Claude Codeの利用を始めます。

p6

ちなみに、一度認証すれば、再度コンテナを起動しても認証は不要になっていました。意図的に認証情報を保存する操作はしていないです。何故、再起動しても認証できるかは別途調べてみようと思います。

3.認証後の操作

Claude Codeの利用上の注意があるので、読んでEnterキーを押します。
注意書きの内容は以下。

  • Claude Codeも間違うことあるからチェックすること
  • プロンプトインジェクションがあるかもしれないから、問題がないコードだけ使うこと。(同じくコードチェックが必要)

p7

以降、見た目の設定や動作設定を色々聞かれるが任意の選択をしていく。私は基本的には、おすすめに従って設定をしました。

p8

設定が終わると、以下のようにインストールが成功した旨のメッセージが表示されます

p9

Enterキーを入力すると、プロンプトを入力できる状態になります。

p10

✨️CLAUDE.md(プロジェクト情報)の作成

プロジェクトフォルダのルートにいる状態で、プロンプトに「/init」と入力するとプロジェクト内のファイルを参照して、プロジェクトの情報を記載したCLAUDE.mdファイルを作成する。

これは、package.json、prismaスキーマなどライブラリやマイグレーションツールの設定ファイル、Cursor Rulesのファイルなどを読み込み作られる。

初回だけでなく、プロジェクトに変化があるたびに実行すると、CLAUDE.mdが更新される。

p11

✨️IDE拡張

Cluade CodeはCLIツールだけど、VSCode(forkされたCursorやWindsurf含む)やJetBrainsの拡張もあります。

https://docs.anthropic.com/ja/docs/claude-code/ide-integrations

Cursor/VSCodeの拡張は、Claude Codeをインストールすると自動的にインストールされています。拡張のアイコンを押すと、ターミナルが開いて、ClaudeCodeが起動します。

p12

✨️IDE連携

以下のように「/ide」とうつとIDEとの連携が設定できます。

p13

自動的に、現在利用しているIDEが選択肢に表示されます。

p14

Enterキーを押すと、IDEと接続されます

p15

以下のように、今エディタで開かれているファイルを質問すると、その一覧が表示されます。
また、項番を指定して質問など処理をすることもできます。

p16

エディタ内で行を選択しているのも認識しています。

p17

ただし、エディタが開いているファイルをすべて認識しない場合もあります。また、Claude Codeを実行する前に開いているファイルを認識しなかったりしますが、この場合は、改めてファイルを開くと認識されます。

注意点は、対応しているIDEが2025年5月31日時点では以下の2つです。

https://docs.anthropic.com/ja/docs/claude-code/ide-integrations

✨️ファイルやフォルダの選択

@(アットマーク)による選択

CursorやClineと同様、「@」でファイルやディレクトリを選択できる。
選択できるのは、カレントディレクトリ以下。

claude codeのコマンドを実行したところがカレントディレクトリです。プロンプトでbashモードにして、移動してカレントディレクトリを変えるとその配下のパスが表示される。

p18

ファイルやフォルダの頭文字を入力してTABキーを押す

選択したいフォルダやファイルの頭文字を入力し、TABキーを押すと選択候補表示されます。あとは上下の矢印キーで選択して、Enterを押して決定になります。気がします

p21

✨️Maxプランの制限

https://support.anthropic.com/ja/articles/11014257-claudeの最大プラン使用について

つまり、利用開始したら5時間フルに使った方が効率的だと思います。ちょっと使って4時間何もしなくても、1セッションが消費されます。225メッセージを5時間かけて使う方がよいと思います。

5時間あけて、ちょっとずつ使うというのが一番もったいない使い方だと思います。
使うならガッツリ使う。使わないなら使わない。

業務で利用する場合は、1ヶ月の稼働日数を20日とし、1日10時間ずつ使うと、200時間なので支障はないと思います。

✨️利用した感想(Cursorとの比較を念頭に)

とりあえず、Cursorで開発していたDevContainerプロジェクトにClaudeCodeが組み込めました。

インストールもかなり簡単だし、IDEとの連携もできていてCLIベースだから使いにくいのかなと思っていましたが、その考えは覆されました。

CLIベースだから使いにくいという記事を見かけましたが、IDE連携するとそうではないです。逆に、CLIだからこそ、いろいろなIDEのコンソール内で呼び出せるので便利だと思いました。

XCodeやAndroidStudioなどスマホアプリ系のIDEはClaudeCodeと連携する機能はありませんが、コンソールでの処理でも十分リソースを指示もできるので、工夫次第で使えるのではないかと思いました。私は、スマホアプリのIDEでは試してないし、記事は見つからなかったので、そのうちそういう体験記事もでると思います。

iOSについては、AnthropicとAppleがIDEを作っているようなので、そのうちiOS開発もAIの恩恵を受けやすくなるかもしれないですね。

スマホアプリは今のところ、AIの恩恵受けにくそうだなと感じているので、それが打開されればいいなと思います。

https://chatgpt-enterprise.jp/blog/apple-anthropic-vibe-coding/

✨️AIツールを開発プロジェクトで利用する指針(コスト観点)

ClaudeのMaxプランでClaudeCodeが定額で利用できるようになってから、ClaudeCodeの情報が、今まで以上にXやnoteで取り上げられていました。それをみて、使ってみましたが、確かに便利だしよくできていると思います。

CursorのProプランを使っていたのですが、Claude3.7などプレミアムモデルでも画面の開発で詰まることが多く、なんとかならないかと思っていた矢先だったので助かりました。

画面開発は結構厄介なので、プレミアムモデルをガンガンつかって開発するのがよいと思います。一方、インフラの設定ファイルやバックエンドのAPIはCursorのProプランでも比較的少ないリクエストで作成できました。

https://qiita.com/SFITB/items/a55e84ae36ab79eb9ea4

プロジェクトの初期は、ClaudeCodeを使って設計やコードの共通部分などを作り、安定してきたら、CursorのProプランやClineで従量課金によりメンテナンスしてもよいかと思いました。CursorやClineでも「既存のコードを参考になおして」みたいに、お手本があるとそのとおりにはコードをつくってくれます。

AIコーディングも、同じモデルでもツールが異なると処理に利用するコンテキストの作り方が変わり、精度が変わるのだと思います。あとは推論をつかって、単なるインプット情報だけでなく、その場で試行錯誤して処理する方が難しい要件を満たすには必要なのだと思いました。

もう、ソフトウェア開発にAIツールを使うのは必須だなと日々感じています。そして、ほぼノーコーディングでアプリを作ることも増えてきました。

これからの開発体制は、人手を増やすのではなく、AIを使いこなせる人材で少数精鋭のチームをつくり、AIツールにそれなりの課金をしていくべきなのだと思います。

1人月100万円払っているのを削減すれば、ClaudeのMaxプランが3年弱は使えます。こちらの方が投資効率は高いと思います。

これからプログラマーもAIを使いこなすスキルは本当に必須だと思います。そして、担当領域や技術スタックを広げていくことが求められるように思います。

Discussion