Zenn
😀

Cursor活用①関連コードを素早く調べる

に公開
運用
Cursor
生成 AI
tech

URLパスからルーティング・ビュー・JSを一括で見つける

はじめに

開発・保守において、当然なんですがなれないソースコードにだいぶするときはまず、

「このURL、どのファイルを直すんだ？」

「/products/contact/123 ってどこで処理してるの？」

から入りますよね。
そら、読めばわかるわけなんですけど、URLパスから関連するルーティング・コントローラ・テンプレート・JS・CSSを追うのはしっかり面倒だし、新人からしてみたらほんとにひと手間です。

でも、Cursor を使えば、そんな作業が一瞬で片付きます。

この記事では、サンプルWebアプリの以下のようなURL：

/products/contact/123

（→ 商品ID 123 の購入前問い合わせフォーム）に対して、

  • ルーティング定義
  • コントローラのメソッド
  • ビューファイル（HTMLテンプレート）
  • フロントのJS
  • スタイルのCSS

など、関連するファイルを特定した事案を今後の活用の記録として残したものです。

想定シナリオ

  • 商品詳細ページ /products/123 に「購入前に問い合わせる」ボタンあり
  • クリックすると /products/contact/123 に遷移
  • 購入に関する質問を送信するフォームを表示
  • 問い合わせはサーバー側でバリデーションされ、DBに保存される

Step 1：URLパスをそのまま検索

Cursorの検索バーにこう入力します：

"/products/contact/"

ポイント：

文字列としてURLパスを入力すると、ルーティング・テンプレート・リンク記述などがすべてヒットします！

✅ 期待される検索結果（例）

ファイル名 用途 内容の一例
routes/productRoutes.js ルーティング /products/contact/:productId のルール定義
controllers/contactController.js コントローラ showContactForm() メソッド
views/products/contactForm.ejs HTMLビュー 問い合わせフォームのUI
public/js/products/contactForm.js JavaScript 入力補助・バリデーション
public/css/products/contactForm.css スタイル モバイル対応・見た目調整
models/Inquiry.js モデル 問い合わせ内容の保存処理

Step 2：コード構造を素早く把握

Cursorなら、検索結果をクリックするだけで、関連ファイルを同じ画面内に並べて表示できます。

以下のような構造が一目瞭然：

[ユーザーアクセス]
    ↓
/products/contact/123

[ルーティング]
    → routes/productRoutes.js

[コントローラ]
    → contactController.showContactForm()

[ビュー]
    → views/products/contactForm.ejs

[JSバリデーション]
    → public/js/products/contactForm.js

[CSSスタイル]
    → public/css/products/contactForm.css

[データ保存]
    → models/Inquiry.js

Step 3：Cursorに聞いてみる

Cursorのエージェントに質問すると、コードの文脈や処理の流れを解説してくれます。

例えばこんな質問が有効：

/products/contact/123 にアクセスしたとき、どのルーティングとコントローラが処理していますか？

関連するビューやJSファイルも教えてください。

Cursorの想定回答：

  • ルーティング: productRoutes.js に /products/contact/:productId の記述あり
  • コントローラ: contactController.js の showContactForm() メソッドが対応
  • ビュー: contactForm.ejs で問い合わせフォームを描画
  • JS: contactForm.js でバリデーション・送信制御あり
  • モデル: Inquiry.js に問い合わせ保存処理

実践Tips：検索のコツ

やりたいこと 入力キーワード例
ルーティングを探す "/products/contact/"
メソッドを探す "showContactForm"
ビューの表示を探す "contactForm.ejs"
JSの関連ファイル "contactForm.js"
モデルの保存処理 "Inquiry" or "saveInquiry"

何がうれしいかのまとめ

Before（従来） After（Cursor）
grepやCtrl+Shift+Fで手動検索 フレーズ検索一発で全ファイル特定
ファイルを1つずつ開いて確認 すべて同一画面で並列確認
コードの文脈が見えにくい AIに説明させて素早く理解
どのJSが関係してるか迷子に パス名やファイル名ですぐ発見

想定ファイル構成（サンプル）

project/
├── routes/
│   └── productRoutes.js
├── controllers/
│   └── contactController.js
├── models/
│   └── Inquiry.js
├── views/
│   └── products/
│       └── contactForm.ejs
├── public/
│   ├── js/products/contactForm.js
│   └── css/products/contactForm.css

まとめ

Cursorを使えば、/products/contact/123 のようなURLに対して：

  • ルーティングからモデルまでの関連コードを瞬時に特定
  • 同一画面でファイルを横断的に確認可能
  • Cursorによる解説付きでコード理解も加速

といった、開発スピードと安心感のある調査体験が手に入ります。

おすすめの活用シーン

  • 担当外のコードを引き継いだとき
  • バグ報告の再現・調査
  • フロントとサーバーの接続点を明確にしたいとき
  • 「この画面、どこ直せばいい？」と詰まったとき

おわりに

「どのファイル直す？」の問いは、まあ最初はやればいいと思いますがベテランがヘルプに入った時とかは、道具の力を使うのが近道ですね。

Discussion