🌕

CursorのV2.2やビジュアルエディタがリリースされたんじゃ(気になるアドベントカレンダーを添えて)

に公開

初めに

もうすぐ今年も終わりですね〜企業によっては26日からお休みの会社もあり、羨ましい限りです…
年末は格付けチャックと相棒が我が家の定番ですが、皆さんの家では定番はありますか?
さて、今回もCursorのV2.2とV2.1のアップデート情報を早速内容を見ていきましょう!

先に結論(TL;DR)

  • v2.2: いちばんデカいのは Debug Mode(実行ログ前提で原因を詰める)と、Browserのビジュアルエディタ(UIを触って→Agentでコード反映)。あと地味に効くのが Plan Modeの強化(Mermaid / To-do分割)、Multi-agent judging、Pinned chats。
  • v2.1: Plan Modeの作り込みが進み、さらに AI Code Reviews(Cursor内でのレビュー) と Instant Grep(Agentのgrepが即時) が入って開発テンポが上がる。

Cursor 2.2(2025年12月10日リリース)

1 Debug Mode

AIエージェントによる新しいデバッグ実行モードが追加されました。エージェントがコードベース全体を読み込み、原因になりそうな点について複数の仮説を立てます。その後コードにランタイムログ出力を埋め込み、複数の不具合原因仮説を立て、人間(開発者)と対話しながらバグを再現・修正します。(多くの場合、必要なのは2〜3行程度のピンポイントな変更だけで、通常のエージェントとのやりとりで返されがちな、何百行もの当てずっぽうなコードとはまったく異なります。)スタックや言語を問わず動作し、これまでAI単独では困難だった厄介なバグも再現とログ分析を通じて確実に修正できるよう支援します。
https://cursor.com/ja/blog/debug-mode

設定方法


Debugをしてするだけなので、特段何も必要はないです!

主な機能

  1. 仮説ベースのデバッグ

    • バグの原因について3〜5個の仮説を立てる(コードを読んだ後で、原因になりそうな点に関する)
    • 各仮説を検証するための計装ログを挿入(これにより、バグが発生したときに実際に何が起きているのかを示す具体的なデータをエージェントが取得できる)
  2. 自動ロギングシステム

    • HTTPエンドポイント経由でログを収集
    • NDJSON形式でログファイルに保存(.cursor/debug.log)
    • JS/TSではfetchでログ送信、他言語は直接ファイル書き込み
  3. エビデンスベースの修正

    • 「コードを見ただけの推測」ではなく、実際のランタイムデータで原因特定
    • ログで仮説を CONFIRMED / REJECTED / INCONCLUSIVE に分類
  4. 修正後の検証フロー

    • 修正後もログを残したまま再実行
    • before/after のログ比較で修正効果を確認
    • ユーザー確認後にのみ計装を削除

Cursorデバッグモードの詳細な使い方

1. ワークフロー全体像

バグ報告 → 仮説生成(3-5個) → ログ計装 → 再現実行 → ログ分析 → 修正 → 検証 → ログ削除

2. ログ計装の実装方法

JavaScript/TypeScript の場合

// #region agent log
fetch('http://127.0.0.1:7242/ingest/SESSION_ID',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'UserList.tsx:42',message:'ユーザー取得前',data:{userId,filters},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'A'})}).catch(()=>{});
// #endregion

Python の場合

# region agent log
import json; open('/path/to/debug.log','a').write(json.dumps({'location':'main.py:15','message':'API呼び出し前','data':{'params':params},'timestamp':time.time(),'hypothesisId':'B'})+'\n')
# endregion

3. ログを入れる場所(3〜8箇所)

場所 目的
関数の入口 パラメータの値を確認
関数の出口 戻り値を確認
重要な処理の前後 値の変化を追跡
if/else分岐内 どのパスが実行されたか
状態更新時 state/変数の変化
エラーハンドラ内 例外の詳細

4. 仮説の立て方(例)

バグ:「ボタンをクリックしても何も起きない」

仮説ID 内容
A onClick ハンドラが呼ばれていない
B API リクエストが失敗している
C レスポンスのパースでエラー
D state 更新後に再レンダリングされていない
E 条件分岐で早期 return している

5. ログ分析の例

{"location":"Button.tsx:15","message":"onClick開始","hypothesisId":"A","timestamp":1733456789000}
{"location":"api.ts:42","message":"fetch前","data":{"url":"/api/users"},"hypothesisId":"B"}
{"location":"api.ts:48","message":"fetch後","data":{"status":500,"body":"Internal Error"},"hypothesisId":"B"}

分析結果:

  • 仮説A: CONFIRMED(onClickは呼ばれている)
  • 仮説B: CONFIRMED(APIが500エラー)→ 根本原因
  • 仮説C〜E: REJECTED(APIエラーで到達していない)

6. 修正→検証のフロー

  1. 修正を実装(ログは消さない!)
  2. runId を変更して再実行を依頼
    runId: 'post-fix'  // 修正前は 'run1' だった
    
  3. before/after 比較
    • before: {"status":500}
    • after: {"status":200,"data":[...]}
  4. ユーザー確認後にログ削除

7. よくある注意点

❌ やってはいけない ✅ 正しい方法
コードだけ見て推測で修正 ログ証拠を取ってから修正
setTimeout で「直った」 適切なイベント/ライフサイクル使用
検証前にログ削除 ユーザー確認後に削除
全仮説棄却で諦める 別の観点で新仮説を立てる

8. 実際の依頼の仕方

「〇〇をクリックしても△△が表示されない」
「APIを叩くと undefined が返ってくる」
「特定の条件でだけクラッシュする」

こう伝えてもらえれば、仮説を立ててログを入れていくので、ぜひ試してみてください!

2 Browser ビジュアルエディタ

エディタ内蔵のブラウザ機能が強化され、**ブラウザレイアウト&スタイルエディタ(ビジュアルエディタ)**が登場しました。エディタに組み込まれたブラウザサイドバーとコンポーネントツリー上で、要素をドラッグ&ドロップして配置を変えたり、色やCSSスタイルをリアルタイムに編集できます。編集内容は即座にコードに反映可能で、複数の要素を選択して「この部分を大きく」などテキストで指示すれば、エージェントが対応するコード変更を自動実行してくれます。さらにコンポーネントの状態を直接テストできるようになり、スライダーやパレット、独自のカラートークンやデザインシステムを使ってスタイルを細かく調整できます。
デザインとコードの垣根を低くし、画面上の操作が直接コード修正につながる統一開発環境を実現しています。
https://cursor.com/ja/blog/browser-visual-editor
動画に出ているRyo Lu(左の方)さんはCursor Meetup Tokyo2にもお越しいただいた方ですね〜
https://x.com/ryolu_

実際の画面


Figmaのデザインに近い形で提供してくれるのは大変ありがたいですね〜
例えばLayoutのHを20→40にするとブラウザ内のでも変更が可視化され、Applyをクリックするとエージェントが修正作業を開始します。


これはだいぶ楽になりますね〜1ファイルに細かいCSSの修正があればこれである程度は対応できそうです。
HP系のCSSは難易度が遥かに上がりますが、そこまでカバーできる日もいつかは来そうです。

3 Plan Mode 改善

プランモードにMermaid記法のインライン図表表示対応が追加されました。エージェントがプラン内にフローチャートやシーケンス図などのビジュアルを自動生成し、リアルタイムでプランに組み込めます。また、プラン中の特定のToDo項目を選択して新しいエージェントに割り当てて実行させる機能が追加され、プランを並行的かつ柔軟に実行できるようになりました。

To-dosの項目箇所(今はチェックマークと⚪︎がある箇所)を選択するとBuild in New Agentと表示され、クリックするとチャット欄にチェックしたTo-dosを行います。そこでいつものようにモデルを切り替えると、タスクに最適なモデルを選択することができます。

図表表示対応もいい感じですね
これはぜひドキュメントにも保存しておいた方が今後の開発でもいい感じになりそうです。

4 Multi-agent judging

複数のエージェントを並列実行した際に、自動で結果を評価して最適な解決策を選択してくれる機能が付きました。全エージェントの処理完了後、Cursorがベストな回答を選び、その理由をコメント付きで提示します。これにより、複数AIからの提案を比較する手間が省け、最適解の採用がスムーズになります。

公式の画像を載せておきます。

5 Pinned chats:作業文脈が消えない

エージェント対話の履歴をサイドバー上部にピン留めできるようになりました。重要なチャットスレッドを固定表示しておくことで、後から参照したい情報をすぐに見返せ、長時間の対話でも必要なコンテキストを見失いません
今まではexport chatでしか保存方法がなかったので、これもありがたいですね〜
添付画像の「・・・」をクリックすると「pin」と表示されるので、クリックするとピン留め機能が使えます。

6 しれっと画面レイアウトがいじれるようになった

これまでは左上にエディターモードかエージェントモードが選べるようになっていましたが、

こんな感じでレイアウトを変更できるようになりました〜
完全に自分好みにカスタマイズできますね〜

Cursor 2.1(2025年11月21日リリース)

1 Plan Modeの改善

複雑なタスクに対して、Cursorが計画を立案する際に確認用の質問を投げかける対話型UIを導入。ユーザーはこのUIで質問に回答し、より質の高いプラン策定が可能になりました。また、生成されたプラン内を⌘+F(Ctrl+F)で検索できるようになり、長いプランも素早くナビゲーションできます。
もうplanモードを使用している方には既知だと思うので、

2 AI Code Reviews

エディタ内でAIによるコードレビュー機能を搭載。開発者がコードを編集すると、Cursorが変更点を解析し潜在的なバグや問題をサイドパネルに表示してくれます。これによりプルリクエストやCIツールを待たず、リアルタイムにバグ修正が可能になりました(従来のソース管理連携型の「Bugbot」に加わる新機能です)。
※ Bugbot(GitHub/GitLab等に出るレビュー)も引き続き併用前提ではあります。

以前はgitアイコンをクリックした際のサイドバーに表示されるReview Agentをクリックしてからでしたが、

となり即座の修正やレビュアーへの負担も軽減できますね〜

気になっている企業のアドベントカレンダー

この時期になると様々な企業がアドベントカレンダーを記載しており、正直読むのも追いついていない状態ですが、個人的に気になる企業(compassのイベントでお邪魔した企業)のアドベントカレンダーを上げておきます。
ってか全企業分なんか追えないので、気になる企業、すごいなと思っている企業のを追うことをお勧めします。
もし転職したい方は転職先のアドベントカレンダーを追うことで、面接のネタになったり、志望動機になるかも〜

Ubie様
https://adventar.org/calendars/12070
令和トラベル様
https://engineering.reiwatravel.co.jp/category/all
ログラス様
https://qiita.com/advent-calendar/2025/loglass
LayerX様
https://layerx.notion.site/6975c0901ea54ca9b609fafc3e8a35c3?v=2bccdd370bae80579556000cc2afc504

最後に

この記事が誰かの役に立てれば幸いです。

GitHubで編集を提案
GenAi テックブログ

Discussion