・
ClaudeとVScodeの連携：バグ修正からコード生成まで使い倒した検証
近年、AIツールの活用は開発現場において欠かせないものとなっています。
中でも、ClaudeとVSCode（Visual Studio Code）の連携は、開発効率を飛躍的に向上させる強力な組み合わせとして注目を集めています。
本記事では、ClaudeとVSCodeの連携について、具体的な導入手順や初期設定について詳しく解説。
ぜひこの記事を参考に、Claudeを活用した快適な開発環境を構築してみてください！
🏁ClaudeとVSCodeについて
AIの進化により、プログラミングや文章作成の現場でAIアシスタントを活用することが当たり前になりつつあります。
ここではまず、ClaudeとVSCodeの基本的な情報について整理しておきましょう。
Claudeの特徴
Claudeは自然で流暢な対話ができるだけでなく、「巨大なコンテキストウィンドウ」を備えている点が大きな魅力として知られています。
また、プログラミング分野における能力の高さも高く評価されており、コードの生成やリファクタリング、複雑なバグの解析といったタスクにおいて、エンジニアから厚い支持を集める存在です。
用途に合わせて軽量〜高性能モデルまで選択肢が用意されているため、日常的なコーディング補助から高度なシステム設計まで幅広く活躍するポテンシャルを持っています。
VSCode（Visual Studio Code）はどんなツール？
VSCodeはWindows、macOS、Linuxといった主要なOSで動作し、軽量でありながら非常に多機能なソースコードエディタです。
最大の特徴は、豊富に用意された「拡張機能」によって自由にカスタマイズできる点。
好みの言語のシンタックスハイライトから、Gitなどのバージョン管理システムの統合、さらには各種AIツールの組み込みに至るまで、自身に最適な開発環境を構築可能。
単なるプログラミング用途にとどまらず、Markdownを活用したドキュメント作成やライティングを行う人々にも広く利用されています。
🧰YoomはClaudeを用いたさまざまな業務を自動化できます
Yoomを活用することで、開発時のコーディング支援だけでなく、問い合わせ対応や日々の事務作業など、SaaSアプリとClaudeを連携させた幅広い業務効率化を実現することが可能です。
[Yoomとは]
手作業によるコピペや確認作業から解放され、コード開発やメンテナンスといった業務に集中できる環境を整えたい方にぴったりのサービスとなっています。
開発業務をサポートする自動化フローボット
■概要日々受信する大量のメール、特に長文の内容把握に時間を要していることはないでしょうか。このワークフローを活用すれば、Outlookで特定のメールを受信した際に、その内容をAnthropic（Claude）が自動で要約し、指定のSlackチャンネルへ通知できます。Anthropic（Claude）によるメール要約を自動化することで、情報確認の時間を短縮し、重要な内容の見落としを防ぎます。■このテンプレートをおすすめする方- 大量のメールの中から重要な情報を素早く把握したいと考えているビジネスパーソンの方
- Anthropic（Claude）を活用したメール要約で、日々の情報収集を効率化したい方
- チーム内での情報共有を迅速化し、対応漏れを防ぎたいプロジェクトマネージャーの方
■このテンプレートを使うメリット- Outlookで受信したメールを自動で要約するため、長文メールを読む手間を省き、情報確認にかかる時間を短縮できます。
- Anthropic（Claude）がメールの要点を抽出して通知するため、重要な内容の見落としや確認漏れといったヒューマンエラーの防止に繋がります。
■フローボットの流れ- はじめに、Outlook、Anthropic（Claude）、SlackをYoomと連携します。
- 次に、トリガーでOutlookを選択し、「特定の件名のメールを受信したら」というアクションを設定し、対象のメールを定めます。
- 次に、オペレーションでAnthropic（Claude）の「テキストを生成」アクションを設定し、受信したメール本文を要約するように指示します。
- 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成された要約を指定のチャンネルに通知します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Outlookのトリガー設定では、どのフォルダを監視するか、また件名にどのようなキーワードが含まれるメールを対象にするかを任意で設定できます。
- Anthropic（Claude）での要約設定では、使用するモデルや要約の文字数、そして「箇条書きで」といった要約の指示（プロンプト）を自由にカスタマイズできます。
- Slackへの通知設定では、メッセージを送るチャンネルを自由に選択できるだけでなく、要約結果と合わせて件名や送信者などの情報も本文に含めることが可能です。
■注意事項- Outlook、Anthropic（Claude）、SlackのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
■概要
Asanaでタスク管理を行う際、詳細情報の追記や関連コンテンツの作成に手間を感じていませんか？こうした繰り返し発生する作業は、本来注力すべき業務時間を圧迫する一因となります。このワークフローは、Asanaで特定のタスクが作成されると、Anthropic（Claude）が自動で任意の情報を生成し、タスク内容を更新します。AsanaとAnthropic（Claude）を連携させることで、タスク管理の効率化と内容の充実を両立させることが可能です。
■このテンプレートをおすすめする方
- Asanaでのタスク作成後、毎回手作業で情報を追記しているプロジェクトマネージャーの方
- AsanaとAnthropic（Claude）を連携させ、タスク管理の自動化を推進したい方
- 生成AIを活用して、定型的な文章作成や情報収集の業務を効率化したいと考えている方
■このテンプレートを使うメリット
- Asanaにタスクが追加されると、Anthropic（Claude）が自動でテキストを生成・更新するため、手作業での情報収集や入力の時間を短縮できます
- 手作業による情報追記の漏れや内容のばらつきを防ぎ、タスク情報の品質を一定に保つことに繋がります
■フローボットの流れ
- はじめに、AsanaとAnthropic（Claude）をYoomと連携します
- 次に、トリガーでAsanaを選択し、「特定のプロジェクトに新しいタスクが追加されたら」というアクションを設定します
- 次に、オペレーションで分岐機能を設定し、特定の条件に応じて後続の処理を分岐させます
- 次に、オペレーションでAnthropic（Claude）の「テキストを生成」を設定し、Asanaのタスク情報をもとに任意のテキストを生成します
- 最後に、オペレーションでAsanaの「タスクを更新」を設定し、生成されたテキストで該当タスクの内容を更新します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
- Asanaのトリガー設定では、自動化の対象としたいワークスペースIDやプロジェクトIDを任意で設定してください
- 分岐機能では、Asanaから取得したタスク情報（タスク名や担当者など）を利用して、後続のオペレーションを分岐させるための条件を自由に設定できます
- Anthropic（Claude）では、生成したい内容に応じてプロンプトを自由にカスタマイズでき、Asanaのタスク名などの情報を変数としてプロンプトに含めることも可能です
- 最後のAsanaのタスク更新では、固定値や前段のオペレーションで取得した情報を変数として、任意の項目に設定できます
■注意事項
- Asana、Anthropic（Claude）のそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- 分岐はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
- ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
- 大量のメールの中から重要な情報を素早く把握したいと考えているビジネスパーソンの方
- Anthropic（Claude）を活用したメール要約で、日々の情報収集を効率化したい方
- チーム内での情報共有を迅速化し、対応漏れを防ぎたいプロジェクトマネージャーの方
- Outlookで受信したメールを自動で要約するため、長文メールを読む手間を省き、情報確認にかかる時間を短縮できます。
- Anthropic（Claude）がメールの要点を抽出して通知するため、重要な内容の見落としや確認漏れといったヒューマンエラーの防止に繋がります。
- はじめに、Outlook、Anthropic（Claude）、SlackをYoomと連携します。
- 次に、トリガーでOutlookを選択し、「特定の件名のメールを受信したら」というアクションを設定し、対象のメールを定めます。
- 次に、オペレーションでAnthropic（Claude）の「テキストを生成」アクションを設定し、受信したメール本文を要約するように指示します。
- 最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、生成された要約を指定のチャンネルに通知します。
- Outlookのトリガー設定では、どのフォルダを監視するか、また件名にどのようなキーワードが含まれるメールを対象にするかを任意で設定できます。
- Anthropic（Claude）での要約設定では、使用するモデルや要約の文字数、そして「箇条書きで」といった要約の指示（プロンプト）を自由にカスタマイズできます。
- Slackへの通知設定では、メッセージを送るチャンネルを自由に選択できるだけでなく、要約結果と合わせて件名や送信者などの情報も本文に含めることが可能です。
- Outlook、Anthropic（Claude）、SlackのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
■概要
Asanaでタスク管理を行う際、詳細情報の追記や関連コンテンツの作成に手間を感じていませんか？こうした繰り返し発生する作業は、本来注力すべき業務時間を圧迫する一因となります。このワークフローは、Asanaで特定のタスクが作成されると、Anthropic（Claude）が自動で任意の情報を生成し、タスク内容を更新します。AsanaとAnthropic（Claude）を連携させることで、タスク管理の効率化と内容の充実を両立させることが可能です。
■このテンプレートをおすすめする方
- Asanaでのタスク作成後、毎回手作業で情報を追記しているプロジェクトマネージャーの方
- AsanaとAnthropic（Claude）を連携させ、タスク管理の自動化を推進したい方
- 生成AIを活用して、定型的な文章作成や情報収集の業務を効率化したいと考えている方
■このテンプレートを使うメリット
- Asanaにタスクが追加されると、Anthropic（Claude）が自動でテキストを生成・更新するため、手作業での情報収集や入力の時間を短縮できます
- 手作業による情報追記の漏れや内容のばらつきを防ぎ、タスク情報の品質を一定に保つことに繋がります
■フローボットの流れ
- はじめに、AsanaとAnthropic（Claude）をYoomと連携します
- 次に、トリガーでAsanaを選択し、「特定のプロジェクトに新しいタスクが追加されたら」というアクションを設定します
- 次に、オペレーションで分岐機能を設定し、特定の条件に応じて後続の処理を分岐させます
- 次に、オペレーションでAnthropic（Claude）の「テキストを生成」を設定し、Asanaのタスク情報をもとに任意のテキストを生成します
- 最後に、オペレーションでAsanaの「タスクを更新」を設定し、生成されたテキストで該当タスクの内容を更新します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
- Asanaのトリガー設定では、自動化の対象としたいワークスペースIDやプロジェクトIDを任意で設定してください
- 分岐機能では、Asanaから取得したタスク情報（タスク名や担当者など）を利用して、後続のオペレーションを分岐させるための条件を自由に設定できます
- Anthropic（Claude）では、生成したい内容に応じてプロンプトを自由にカスタマイズでき、Asanaのタスク名などの情報を変数としてプロンプトに含めることも可能です
- 最後のAsanaのタスク更新では、固定値や前段のオペレーションで取得した情報を変数として、任意の項目に設定できます
■注意事項
- Asana、Anthropic（Claude）のそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- 分岐はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
- ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
AIワーカーを活用した自動化フローボット
■概要営業リストへの情報追加後、一件ずつ企業情報をリサーチする作業に手間を感じていませんか？手作業でのリサーチは時間がかかるだけでなく、情報の質にばらつきが生じることもあります。このワークフローを活用すれば、Google スプレッドシートに行が追加されたら、AIワーカーがAnthropic（Claude）によるプロスペクトリサーチを自動で実行し、結果を反映させることが可能になり、リサーチ業務の効率化を実現します。■このテンプレートをおすすめする方- Google スプレッドシートで営業リストを管理しているインサイドセールスや営業担当者の方
- Anthropic（Claude）を活用し、手作業で行っているプロスペクトリサーチを自動化したい方
- 営業リサーチの質を均一化し、チーム全体の生産性を向上させたいマネージャーの方
■このテンプレートを使うメリット- Google スプレッドシートに行を追加するだけで自動でリサーチが実行されるため、これまで手作業に費やしていた時間を他のコア業務に充てることができます。
- AIが一定の基準でリサーチを行うため、担当者による情報の質や量のばらつきを防ぎ、営業アプローチの標準化と質の向上に繋がります。
■フローボットの流れ- はじめに、Anthropic（Claude）とGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。
- 次に、オペレーションでAIワーカーを選択し、Google スプレッドシートの追加行の情報を基にプロスペクトリサーチや営業戦略の立案を行い記録するための指示を作成します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Google スプレッドシートのトリガー設定では、どのファイルを対象とするかを示す「スプレッドシートID」と、どのシートを監視するかを示す「シート名」を任意で設定してください。
- AIワーカーのオペレーションにおける調査や立案などの指示内容は、自由にカスタマイズしてください。
■注意事項- Google スプレッドシート、Anthropic（Claude）、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Google スプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Google スプレッドシートのトリガーにおける注意事項」を参照してください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカーで大容量のデータを処理する場合、処理件数に応じて膨大なタスクを消費する可能性があるためご注意ください。
- Google スプレッドシートで営業リストを管理しているインサイドセールスや営業担当者の方
- Anthropic（Claude）を活用し、手作業で行っているプロスペクトリサーチを自動化したい方
- 営業リサーチの質を均一化し、チーム全体の生産性を向上させたいマネージャーの方
- Google スプレッドシートに行を追加するだけで自動でリサーチが実行されるため、これまで手作業に費やしていた時間を他のコア業務に充てることができます。
- AIが一定の基準でリサーチを行うため、担当者による情報の質や量のばらつきを防ぎ、営業アプローチの標準化と質の向上に繋がります。
- はじめに、Anthropic（Claude）とGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでGoogle スプレッドシートを選択し、「行が追加されたら」というアクションを設定します。
- 次に、オペレーションでAIワーカーを選択し、Google スプレッドシートの追加行の情報を基にプロスペクトリサーチや営業戦略の立案を行い記録するための指示を作成します。
- Google スプレッドシートのトリガー設定では、どのファイルを対象とするかを示す「スプレッドシートID」と、どのシートを監視するかを示す「シート名」を任意で設定してください。
- AIワーカーのオペレーションにおける調査や立案などの指示内容は、自由にカスタマイズしてください。
- Google スプレッドシート、Anthropic（Claude）、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Google スプレッドシートをアプリトリガーとして使用する際の注意事項は「【アプリトリガー】Google スプレッドシートのトリガーにおける注意事項」を参照してください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカーで大容量のデータを処理する場合、処理件数に応じて膨大なタスクを消費する可能性があるためご注意ください。
☀️ClaudeとVSCodeを連携するメリット
VSCodeという使い慣れたエディタの中にClaudeを組み込むことで、業務フローは大きく改善されます。
AIペアプログラマーとして開発効率が飛躍的に向上する
ClaudeをVSCodeに統合する最大のメリットは、熟練のエンジニアと「ペアプログラミング」をしているかのような感覚で作業を進められる点にあります。
エディタ上で直接AIに対して
- この部分のコードを最適化して
- このエラーの原因を調査して
と指示を出せるため、開発者は思考を中断することなく課題解決に取り組むことが可能。
一つひとつのドキュメントを検索し、文法エラーを手作業で見つける手間をAIが代行してくれるため、開発スピードの向上が図れます。
また、既存のコードベース全体をAIに把握させることで、プロジェクトのコーディング規約に沿ったコードを提案。
チーム開発におけるコード品質の底上げにも貢献してくれるのです！
ブラウザとエディタの画面を行き来する手間が省ける
これまでAIを活用してコードを書く場合、Webブラウザを開いてChatGPTやClaudeの画面にプロンプトを打ち込み、出力されたコードをコピーしてVSCodeに貼り付けるという往復作業が一般的でした。
しかし、連携機能を活用すれば、この煩わしい画面の切り替えが一切不要に！
作業のシームレスさが段違いに向上する他、情報の伝達漏れの防止も期待できます。
🤝Claude×VSCodeの主な連携手段
VSCode上でClaudeを利用するには、いくつかの拡張機能が存在しており、提供元やコンセプトによって使い勝手が異なります。
基本的な導入の手順
実際の利用では、Claude CodeとVSCodeを連携する必要があります。
初期のセットアップ手順は非常にシンプルですが、有料プランへの加入やAPI利用が不可欠であることを念頭におき、操作を進めましょう！
利用可能なプラン
Claude Codeは、「Pro / Max」に加え、「Team / Enterprise」、またはClaude Console account（API 利用）でも利用可能です。
チーム・法人向けのプラン料金やAPI利用については、Claude料金にて確認してください。
拡張機能からインストール
まずはVSCodeの拡張機能マーケットプレイスを開き、「Claude Code for VS Code」と検索してインストールボタンをクリックします。
インストールが完了すると、VS CodeのサイドバーにClaudeのアイコンが追加されます。
アカウントの紐づけ
このアイコンをクリックすると専用パネルが開き、ログインを求められるため、有料プランのアカウントで認証を実行。
※利用環境によっては API キーや Bedrock / Vertex AI / Microsoft Foundry などの外部プロバイダ設定を実施
認証後、自動的にVSCodeと連携が完了し、すぐにチャットインターフェースが利用可能になります！
Claude Codeとは？
VSCode拡張機能Claude Codeは、シンプルかつ安全にClaudeをエディタ内で活用したいユーザーに最適！Anthropicアカウントでのブラウザ認証を利用するため、APIキーを直接管理する手間が省け、セキュリティ面でも安心感があるのが特徴です。
チャットインターフェースを通じたコード生成やリファクタリングの相談に加え、@メンション機能を使ってワークスペース内の特定のファイルやフォルダを簡単にコンテキストとして指定できる機能が備わっています。
サードパーティ製拡張機能について
サードパーティのデベロッパーによって開発されている「Cline」や「Roo Code」といった拡張機能は、より高度で自律的な作業をAIに任せたいユーザー向けに設計されています。
ユーザーが自身のAPIキーを設定して利用する仕組みとなっており、Claudeだけでなく他のAIモデルと切り替えて運用することも可能です。
最大の特徴は、単なるコードの提案にとどまらず、AI自身がファイルを作成・編集し、ターミナルでコマンドを実行する権限を持つエージェント型のアプローチを採用している点。
ただし、強力な反面、意図しないファイル変更が起きる可能性もあるため、常にユーザーが差分をレビューしながら進める慎重な運用が求められます。
📈実際にClaudeとVSCodeを連携して検証！
本セクションでは、実際にVSCode上でClaudeを連携させた際の実力を確かめるべく、検証を行いました。
①既存コードの読解とバグ修正
まずは意図的にエラーを仕込んだ初見のサンプルコードを用意。
バグ修正の実力を確認するべく、以下の指示を出します。
入力プロンプト
このコードを実行するとエラーが出るのですが、原因候補と修正案を教えてください。
前提:
・ECサイトの受注データから平均客単価を計算する Python スクリプトです。
・選択範囲のコードを実行するとエラーが出ています。
お願いしたいこと:
1. エラーの内容から考えられる原因を特定し、なぜそうなるのかを日本語で説明してください。
2. 修正後のコードを、VSCode 上でそのまま適用できるようにインライン差分（変更前/変更後が分かる形）で提示してください。
3. 可能であれば、今後同じ種類のミスを防ぐためのポイントも簡潔に教えてください。
プロンプト投稿後、Claudeは数秒でエラーの原因を的確に言語化。（赤枠）
修正後のコードを提示してくれました！
他にも、今後の防止案として「変数名を確認する癖をつける」「IDE側で事前の型チェックを行う」ことも示唆しています。（赤線）
提案された修正内容は非常に論理的であり、実際に修正案に沿ってコードを編集したところ、エラーが出ることなくコードが実行！
自力でデバッグする時間が減少しただけでなく、学習効果も得ることができました。
Google Colabで別途実行した画面
②テストコードやドキュメントの自動生成
続いて、作成済みの関数に対する単体テスト（ユニットテスト）の生成と、プロジェクトのREADMEドキュメント作成を依頼してみました。
関数が書かれたファイルを開いて、単体テストコードの生成を指示するプロンプトを投稿します。
入力プロンプト
このファイルに定義されている calculateMonthlyRevenue 関数に対して、
エッジケースを含む Jest の単体テストコードを生成してください。
テストの要件:
・正常系: 複数の paid / pending / canceled が混在するケースで、paid の amount だけを合計していること。
・空配列や null / undefined が渡されたときに 0 を返すこと。
・amount に数値以外の値が含まれる場合に TypeError が投げられること。
・テストケースごとに「何を検証しているか」が分かる日本語のテスト名を付けてください。
出力形式:
・__tests__/calculateMonthlyRevenue.test.js として保存できる形のコード全体。
・必要に応じて、import / require 文も含めてください。
一度テストの失敗を報告する内容が表示されましたが、瞬時に該当箇所の修正を指示するコマンドが表示されたため、修正を許可。
10秒ほど経過したのち、正常系だけでなく、空配列やnullが渡された場合の異常系テストも網羅したコードが生成されました！
例外発生ケースの書き方も適切で、可読性も高いことが伺えます。
追加で、
READMEを日本語で作成して
と指示してみましょう！
こちらの出力結果も満足のいくもので、プロジェクト概要〜ユースケースまで、日本語で構成・整理されたドキュメントを短時間で生成！
生成したデータファイルは自動で追加してくれたので、あとは内容に不足や誤りがないかを確認するだけで作業は完了。
ゼロから手入力する手間が省け、開発の「面倒な周辺作業」を丸投げできるメリットを強く実感できました。
③記事執筆・リサーチ用途での活用
最後にエンジニア以外の職種を想定し、Webライターとしての記事執筆やリサーチ業務にどう活用できるかを検証。
VSCode上でファイルを開きながら執筆を進め、現記事のブラッシュアップや構成のアイデアをサイドバーのClaudeに質問するというスタイルで作業を進めました。
まずは記事内で使用している用語に対し、文脈とのズレがないかを確認します。
【リサーチ用途での用語確認】
この記事で扱っている「コンバージョン率」の説明が、一般的なWebマーケティングの文脈から見て大きくズレていないか確認したいです。
・コンバージョン率の一般的な定義
・よくある誤用・誤解
・BtoBサイトとECサイトでの考え方の違い（あれば）
を、日本語で簡潔に整理してください。
記事の読者はWebマーケ初心者を想定しているため、専門用語には一言で良いので補足を入れてください。
結果は以下の通りで、正誤の判断だけではなくカテゴリ別のサイト上での取り扱い、記事の評価まで行ってくれました！
校正を担うアシスタントとして充分に機能してくれていると感じます。
続いて現記事の内容をブラッシュアップしてもらうプロンプトを投稿しました。
【記事のブラッシュアップ】
記事構成をブラッシュアップしたいです。
要望:
・見出し構成（第1章〜第4章）をベースにしつつ、以下を日本語で整理してください。 章立てや見出し名を改善する提案を3パターンください。
・各パターンごとに、 ・想定読者 ・記事を読んだあとに読者ができるようになること ・章ごとの役割（1文ずつ）
出力形式:
・Markdown の見出し候補と箇条書きだけでOKです。
こちらの出力も申し分なく、指示した通りに3つのパターンを提案していますね。
内容が被っていませんし、新たな切り口で記事の内容を底上げできると感じます。
リサーチや執筆のためにブラウザの別タブを開いて作業する手間がなくなり、思考の途切れが減ったことで執筆の集中力が維持しやすくなったと感じます。
エディタ内でテキスト作業とリサーチが完結するこのワークフローは、ライターにとっても非常に強力な武器になるでしょう！
👤Claudeのモデル選択
ClaudeとVSCodeを連携させるにあたり、どのAIモデルを選択し、運用においてどの点に注意が必要になるのかを把握しておくことは非常に重要です。
連携時に選ぶべきおすすめモデル
Claudeでは
- 最高性能を誇るOpus
- 速度と性能のバランスに優れたSonnet
- 軽量かつ高速なHaiku
といった、複数のモデルラインナップを用意。
コーディング支援を目的としてVSCodeと連携させる場合、コード生成能力が非常に高く、かつ応答速度も実用的なスピードを保っているSonnetの選択が推奨されます。
一方で、大規模なアーキテクチャ設計や複雑で難解なバグの解析が必要な場面においては、より推論能力の高いOpusに切り替えるといいでしょう。
状況に応じた使い分けを行うことで効率的な開発環境を維持することができます。
運用時の注意点
公式の拡張機能やAPIを経由してClaudeを利用する場合、基本的にはトークンベースの従量課金が適用されます。
これは、AIに対して送信した入力コンテキストと、出力回答の量に応じてコストが計算される形式です。
【Opus 4.6・Sonnet 4.6・Claude Haiku 4.5のAPI利用料金】
※1,000トークン単位として換算
※執筆時のレート換算です。その他モデルの利用料金については、ClaudeAPIの料金ページを確認してください。
高性能なモデルほどトークンあたりの単価が高く設定されているため、無闇にOpusモデルで膨大なファイル群を読み込ませ続けると、想定以上にコストが膨らんでしまうかもしれません！
運用時は
- 不要なファイルはコンテキストに含めない
- 関連するコードの範囲だけを明示的に指定して質問する
といった工夫を取り入れましょう。
適切なモデル選択と情報量のコントロールを意識すれば、費用対効果を意識した効率的な運用が可能となります。
🛞まとめ
ClaudeとVSCodeの連携は、プログラミングやドキュメント作成の現場において、作業効率を根本から改善する強力なアプローチです。
ブラウザを行き来する無駄な時間を削減し、エディタ内で高度なAIと対話しながら作業を進められる体験は、一度味わうと手放せなくなるほどの快適さを持っています。
導入の際は、それぞれの開発スタイルや目的に応じて最適なツールを選択することが重要。
適切なモデル選びとコスト管理を意識しながら、ぜひ自分だけのAIペアプログラミング環境を構築してみてくださいね。
🍧Yoomでできること
VSCode上でのコーディング支援でAIの便利さを実感した方は、その自動化の波を他の業務にも広げてみてはいかがでしょうか？
Yoomを利用すれば、Claudeが持つ強力な文章解析能力や生成能力をCRMシステムや各種データベースツールとシームレスに連携させることができます。
日々の業務から手作業をなくし、チーム全体の生産性を向上させるために、ぜひYoomの活用をご検討ください！
■概要
このワークフローでは、Outlookの受信内容をもとにPythonのコードを生成し、Google スプレッドシートでレコード更新することが可能です。このワークフローを利用すれば、Outlookのメール内容から自動でPythonコードを生成し、スプレッドシートのレコード更新を効率化できます。
Yoomを利用すると、プログラミング不要で簡単にアプリ同士を連携することができます。
■このテンプレートをおすすめする方
- Outlookで受信する大量のメールを手動で整理・処理するのに時間がかかっている方
- Pythonを活用してデータ処理を行い、Google スプレッドシートでレコード更新を効率化したい開発者やデータアナリスト
- OutlookとGoogle スプレッドシートを連携させて業務フローを自動化したいチームリーダーやマネージャーの方
- メールの内容を元にデータを処理し、スプレッドシートに反映させる作業を自動化したい事務担当者の方
■このテンプレートを使うメリット
- 作業時間の短縮
・Outlookのメール内容を自動でPythonコードに変換し、手作業を減らすことで作業時間を短縮できます。 - エラーの防止
・自動生成されたPythonコードによりヒューマンエラーを防ぎ、データの正確性を向上させます。 - データ管理の効率化
・Google スプレッドシートへのレコード更新をスムーズに行えるため、データ管理が容易になります。
■概要システムの障害発生時、アラートメールの確認が遅れたり、原因の特定に時間を要したりすることはないでしょうか。 このワークフローを活用すれば、Gmailで特定のアラートメールを受信したことをきっかけに、AIワーカーが自動で原因を分析し、障害対応の手順を生成します。分析結果は素早くSlackへ通知されるため、迅速な初動対応が可能となり、復旧までの時間を短縮できます。■このテンプレートをおすすめする方- システムの障害対応を担当しており、初動対応の迅速化と効率化を図りたいと考えている方
- AI agentを日々の業務に活用し、障害対応のプロセスを自動化したい情報システム部門の方
- 24時間体制のシステム監視において、通知の見逃しや対応の遅延リスクを低減したい方
■このテンプレートを使うメリット- アラートメールの受信から原因分析、関係者への通知までが自動化されるため、障害対応の初動に要する時間を短縮できます
- AIが一次分析と復旧手順を提示することで、担当者のスキルレベルに依存しない、安定した初期対応プロセスの構築に繋がります
■フローボットの流れ- はじめに、GmailとSlackをYoomと連携する
- 次に、トリガーでGmailを選択し、「特定のキーワードに一致するメールを受信したら」というアクションを設定する
- 次に、オペレーションでAIワーカーの「システム復旧アシスタント」を選択し、受信したメール内容をもとに原因分析と復旧手順を生成するためのマニュアル（指示）を作成する
- 最後に、オペレーションでSlackのアクションを設定し、AIが生成した分析結果と復旧手順を指定のチャンネルへ通知する
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Gmailのトリガー設定では、監視対象のアラートメールに含まれる「障害」「エラー」といった任意のキーワードを設定してください
- AIワーカーの設定では、任意のAIモデルを選択することが可能です。また、お使いのシステムの特性に応じて、より的確な分析結果を出力するための指示を任意で設定してください
■注意事項- Gmail、SlackのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
■概要Webフォームに届く多様な問い合わせを、担当部署ごとに手動で仕分け、共有する作業は想像以上に負担がかかるものです。対応の遅れが顧客満足度の低下に繋がることも少なくありません。このワークフローを活用すれば、Googleフォームから送信された内容をAIが迅速に解析し、最適なSlackチャンネルへ自動で通知します。人力での振り分け作業を介さず、適切な部署へ迅速に情報が届くため、スムーズな顧客対応を実現できます。
■このテンプレートをおすすめする方- Googleフォームで受け付けた問い合わせを、手作業で各部署へ転記・共有しているカスタマーサポート担当者の方
- Slackを活用しており、問い合わせ内容に応じて特定のチャンネルへ自動で情報を集約したいと考えているチームリーダーの方
- Webフォームからのリード獲得後、AIを活用して迅速に初動対応を行い、営業活動の効率化を図りたい経営者の方
■このテンプレートを使うメリット- Googleフォームに回答が届くと同時にAIが内容を分類するため、担当者による仕分けの工数を削減し、本来の業務に集中できます。
- 問い合わせ内容をAIが解析し、指定のSlackチャンネルへ自動で通知を行うため、緊急度の高い案件の見落としを防ぎます。
■フローボットの流れ- はじめに、GoogleフォームとSlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「回答が送信されたら」というアクションを設定します。
- 最後に、送信された内容を判定し、マニュアルに記載されているチャンネルに宛に通知を行うためのマニュアル（指示）を作成し、Slackのチャンネルにメッセージを送るアクションを使用ツールとして設定します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- AIワーカーの設定では、Googleフォームのどの項目を元に分類を行うか、どのような基準でSlackのチャンネルを使い分けるかといった指示内容を詳細に設定してください。
- Slackへの通知内容をカスタマイズすることで、問い合わせの要約や回答期日の目安などを併せて通知することも可能です。
■注意事項- Googleフォーム、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
■概要
このワークフローでは、Outlookの受信内容をもとにPythonのコードを生成し、Google スプレッドシートでレコード更新することが可能です。このワークフローを利用すれば、Outlookのメール内容から自動でPythonコードを生成し、スプレッドシートのレコード更新を効率化できます。
Yoomを利用すると、プログラミング不要で簡単にアプリ同士を連携することができます。
■このテンプレートをおすすめする方
- Outlookで受信する大量のメールを手動で整理・処理するのに時間がかかっている方
- Pythonを活用してデータ処理を行い、Google スプレッドシートでレコード更新を効率化したい開発者やデータアナリスト
- OutlookとGoogle スプレッドシートを連携させて業務フローを自動化したいチームリーダーやマネージャーの方
- メールの内容を元にデータを処理し、スプレッドシートに反映させる作業を自動化したい事務担当者の方
■このテンプレートを使うメリット
- 作業時間の短縮
・Outlookのメール内容を自動でPythonコードに変換し、手作業を減らすことで作業時間を短縮できます。 - エラーの防止
・自動生成されたPythonコードによりヒューマンエラーを防ぎ、データの正確性を向上させます。 - データ管理の効率化
・Google スプレッドシートへのレコード更新をスムーズに行えるため、データ管理が容易になります。
- システムの障害対応を担当しており、初動対応の迅速化と効率化を図りたいと考えている方
- AI agentを日々の業務に活用し、障害対応のプロセスを自動化したい情報システム部門の方
- 24時間体制のシステム監視において、通知の見逃しや対応の遅延リスクを低減したい方
- アラートメールの受信から原因分析、関係者への通知までが自動化されるため、障害対応の初動に要する時間を短縮できます
- AIが一次分析と復旧手順を提示することで、担当者のスキルレベルに依存しない、安定した初期対応プロセスの構築に繋がります
- はじめに、GmailとSlackをYoomと連携する
- 次に、トリガーでGmailを選択し、「特定のキーワードに一致するメールを受信したら」というアクションを設定する
- 次に、オペレーションでAIワーカーの「システム復旧アシスタント」を選択し、受信したメール内容をもとに原因分析と復旧手順を生成するためのマニュアル（指示）を作成する
- 最後に、オペレーションでSlackのアクションを設定し、AIが生成した分析結果と復旧手順を指定のチャンネルへ通知する
■このワークフローのカスタムポイント
- Gmailのトリガー設定では、監視対象のアラートメールに含まれる「障害」「エラー」といった任意のキーワードを設定してください
- AIワーカーの設定では、任意のAIモデルを選択することが可能です。また、お使いのシステムの特性に応じて、より的確な分析結果を出力するための指示を任意で設定してください
- Gmail、SlackのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- Googleフォームで受け付けた問い合わせを、手作業で各部署へ転記・共有しているカスタマーサポート担当者の方
- Slackを活用しており、問い合わせ内容に応じて特定のチャンネルへ自動で情報を集約したいと考えているチームリーダーの方
- Webフォームからのリード獲得後、AIを活用して迅速に初動対応を行い、営業活動の効率化を図りたい経営者の方
- Googleフォームに回答が届くと同時にAIが内容を分類するため、担当者による仕分けの工数を削減し、本来の業務に集中できます。
- 問い合わせ内容をAIが解析し、指定のSlackチャンネルへ自動で通知を行うため、緊急度の高い案件の見落としを防ぎます。
- はじめに、GoogleフォームとSlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「回答が送信されたら」というアクションを設定します。
- 最後に、送信された内容を判定し、マニュアルに記載されているチャンネルに宛に通知を行うためのマニュアル（指示）を作成し、Slackのチャンネルにメッセージを送るアクションを使用ツールとして設定します。
■このワークフローのカスタムポイント
- AIワーカーの設定では、Googleフォームのどの項目を元に分類を行うか、どのような基準でSlackのチャンネルを使い分けるかといった指示内容を詳細に設定してください。
- Slackへの通知内容をカスタマイズすることで、問い合わせの要約や回答期日の目安などを併せて通知することも可能です。
- Googleフォーム、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
出典1：Claude/出典2：Visual Studio Code/出典3：VS Code で Claude Code を使用する
プログラミング知識なしで手軽に構築できます。
