📝

Claude CodeをVS Codeで1ヶ月ほど使ってみたら戻れなくなった話

に公開
VS Code
Claude
Claude Code
tech

はじめに

仕事でClaudeを試す機会があって、ChatGPT以外のAIをゴリゴリ使うのは初めてだったので、備忘録として残しておきます。

この記事では、Claude Codeの導入手順や、使ってみて苦戦したところ・良かったところをまとめています。

VS CodeでClaude Codeを使うまでの手順

以下の手順で、約１時間でClaude Codeを使い始めることができました。

  1. 公式のClaude Code入門チュートリアルをざっと見る
    導入から使い方まで丁寧に説明してくれるので、全体像を把握するのに良い
  2. プランを選択してカード決済
  3. 公式サイトを参考にClaudeをインストール（MacOSとUbuntu環境どちらも導入できた）
  4. VSCodeに「Claude Code for VSCode」の拡張機能をインストール
  5. ターミナルにclaudeコマンドを実行し、アカウント認証など初期設定を行う
  6. /initコマンドを実行 （Claudeに対する初期設定コマンド）
  7. いざ、スタート！

Tips

  • トークンの節約の工夫

1. 範囲指定

@でファイルやフォルダをあらかじめ絞りこむことで、参照範囲を減らせます。

2. シンプルに具体的かつ簡潔な指示を出す

これに限ります・・
例えば、「テストを書いて」より「このメソッドのテストを書いて、パターンA,B,Cを網羅して」と伝えたほうが精度が高いです。

3. 問題を一気に投げて解決させない

複雑なタスクを小さな単位に分割することで、より精確で効率的な結果を得られるし、自分も理解しやすいので、意識しています。
例えば、いきなり「生徒一覧を取得するAPI作って」ではなく、「まずエンドポイントの定義 → 必須なクエリの定義 → レスポンスの型（成功/エラー） → 実装 →　テスト」という流れで分けたりします。

4. 新しい会話を立てる

別のテーマについて相談したい場合は、会話履歴をリセットすると過去の履歴を参照しなくなるので、トークンの消費を減らせます。ChatGPTも同じ感じで使っています。

VS Code上、過去の会話履歴も簡単に切り替えられるようになっています。

  • モードを活用する

Claude Codeには、Planモードという便利な機能があります。
コードを直接書く前に「どんな手順で進めるか」を計画してくれるモードで、実装前の整理やタスクの全体像をつかみたいときに役立ちます。

plan mode … 実装前の構成整理や手順出しに最適

edit automatically … 提案をすぐ反映するモード

ask before edits … 編集内容を自動で反映せず、提案を確認してから反映できる

「Shift + Tab」で簡単にモードをスイッチできます。

ちなみに、直接編集してほしくないのに間違えて “Edit automatically” にしちゃっても、
実行中にPlanモードに切り替えればだいたいセーフですw

  • 思考モードも併用する

質問しているときに、think, think hard, think harder, ultrathink の英語の言葉を付け加えると、熟考してくれるようになります。

think … 普通に考えてね
think hard …　もう少ししっかり考えてね
think harder …　さらに深く考えてね
ultrathink …　脳みそを限界まで使って考えてね

トークン消費量
think < think hard < think harder < ultrathink

  • デフォルトで今開いてるファイルを見にいく

Claude Codeはデフォルトで、今VS Codeで開いてるファイルを読んでくれます。
何か質問したときに「このファイルを編集したいのね」と勝手に察してくれるのが便利です。

ただ、「今のファイルが対象じゃないよ〜」ってときもあるので、設定でオフにしておくことも可能。

  • ccusageを使って使用コストが見れる

https://zenn.dev/ryoppippi/articles/6c9a8fe6629cd6
https://github.com/ryoppippi/ccusage

実際に元を取れてるのかなー？を日別・月別などで簡単に見れる、とても便利なツールです。

実際使ってみてどうだったの？

苦戦したところ

  • 指示の仕方が思っていたより難しかった

最初に既存コードのリファクタリングをお願いしてみたのですが、ぼんやりとした指示を出したせいか、出してくれた提案にやりすぎ感を感じました。

Claudeさんはかなり優秀なので（会社の某先輩には適わないかもしれないが）、当たり前ですが、こちらからやってほしいことと方針を正確に伝えないと、AIの正解と自分の理解や理想とはズレることもあるんだなと痛感しました。根本的な理由としては、自分の知識や経験の足りなさでもあったと思います。

それ以来、Claudeには「指示を出す」というより、「一緒に考える相棒に相談する」ような気持でやり取りをしています。

良かったところ

  • 初めて触るプロジェクトの概要を簡潔に説明してくれる

例えば「このシステムはどう動いてるの？」と聞くと、Claudeが関連ファイルを横断して、技術スタック・主な機能とライブラリ・APIエンドポイント・主なコマンド・処理の流れや依存関係などをわかりやすくまとめてくれます。
また、プロジェクト独自のルールや命名クセ、コンポーネントの設計方針まで読み取って、最初に必要な情報を整理してくれるのも便利です。

これまでは新しい案件に入る際、READMEやディレクトリを追いながらコードを読み、仕様書やFigmaの画面構成と照らし合わせて全体を把握していたため、実際に開発に入れるようになるまで少なくとも1時間以上かかっていました。
それが、Claudeを使うと10分程度で最低な把握できるようになりました。

初めて触る技術やフレームワークでも、「とりあえず概要をつかんで、開発に入れたい」フェーズの時短効果が特に大きいと感じました。

※セキュリティ上読んでほしくないファイルがある場合、利用開始前Claude Codeの機能の一つであるHooksで設定することおすすめします

  • 横展開は一瞬でできる

一度実装した機能をもとに、似た構造の機能を追加する際は、体感的に3倍以上のスピードアップを感じました。具体的には、手動で書いていたときは15分かかった差分処理が、Claudeの提案ベースだと5分ほどで完了。コードの共通化案まで提示してくれるので、「コピペじゃなく構造で考える」方向にシフトできます。しかも、生成されたコードはほぼ修正ゼロで使えたので、「Claudeに聞く → 書いてくれたコードをチェック → 反映する」の一連の流れでも、時短につながりました。

  • テストコードの完成度が高い

「このresolverファイルのテストを書いてね」と伝えるだけで、テストの構成・命名・アサーションまで自然で精度の高いコードを書いてくれます。

さらに、既存のテストファイルを参照させておくと、プロジェクト独自のスタイルに沿ったコードを自動で生成してくれる上に、参照元との差分や不足テストケースまでしっかりキャッチしてくれます。
特に複数テーブルが絡むケースやFactoryを使ったテストデータの生成もスムーズで、毎回悩んでいたセットアップ部分をかなり短縮できました。

テストを書くときに自分が毎回悩みがちな「どこまでカバーすべきか」「どう命名するか」といった部分も補ってくれるので、人間が書くのと同じレベルか、それ以上に安定した品質を感じました。

  • 画像を渡すだけで、画面ができあがる

Figmaのデザイン画像等を貼り付けて「この画像通りに画面を作ってください」と指示すると、デザインを読み解いてくれて、今のプロジェクト構成に沿ったコードを生成し形にしてくれます。

ひな型を作るのにとても便利で、これまではCSSの配置に悩みながら時間をかけて調整していた部分が、数分でひな型まで一気に書いてくれます。
配置調整にかけていた試行錯誤がぐっと減り、Figmaと同じように細かい微調整やだけ自分で整えればよくなりました。（フロントエンドやデザインの勉強はこれからも頑張りますが！）

体験として、既存システムの新画面を実装する際には、以前は既存画面を参考にして書き方を把握し、とりあえず必要そうな部分をコピペして調整して…と少しずつ新画面に寄せていく実装の進め方もしていまました。ただそのやり方法だと、不要な実装まで混ざってしまうこともあり、慣れないものではないと結果的に手戻りや調整が増えて手間がかかっていました。

今は、画面実装もうまくClaudeさんを使って、画面の実装時間が体感でざっくり半分ほど短縮できています。

  • コミットメッセージと実装の説明を考えてくれる

Claudeは、コミットの差分を見た上で変更内容を的確に要約し、わかりやすいコミットメッセージを提案してくれます。Pull Requestの説明文もある程度自動でまとめてくれるので、毎回ゼロから書く手間がかなり減りました。

これまで数分かけて考えていたコミット文が提案を少し直すだけで20秒ほどで完成するので、日々の積み重ねで見るとかなりの時短です。

しかも、英語・日本語どちらでも自然なメッセージを出してくれるので、気分次第でどの言語を使うか選べます笑。ゼロから自分で書いたときと比べ、誤字脱字もだいぶ減りました（すみません)

  • 新しい技術の勉強のアシスタントとしては最高

触ったことのない技術をとりあえず試してみたいとき、Claude Code先生に頼ることがあります。
例えば、Next.jsで0から簡単なホームページなどを作りながら、「ここはどう書くの？」「この処理の意味を教えて」「公式ドキュメントで参考できそうな所を教えて」と一つ一つ指示して書かせて、コードを読み、理解していくという流れが自分的に落とし込みやすかったです。

そのフレームワーク特有の理論も実装と一緒に学べて、ハンズオン学習のように使っています。

  • ついでに語学の勉強も

恥ずかしながら、英語歴のほうがずっと長いのに、仕事では日本語ばかりなので、技術英語力が皆無です。画像のように言語を指定して話しかけると、英語モードも返してくれます。



次やってみたいこと

  • 学習モードを使ってみたい
  • チーム開発に時短できるところありそう
    例えばClaude.mdやSubagentsに、今手動で実行してるテストやlintのチェックを自動化するコードを書いたり、Gitレビューのサポートに使ったり

まとめ

AIも日々進化していくので、使いこなせているとはまだ言えないけど、ようやくAIとの長い付き合いが始まった感じです！

Discussion