06. Cursor完全入門

この章では、CursorをWeb制作で使うための基本を学びます。

Cursorは、AI機能を組み込んだコードエディタです。ChatGPTのように質問するだけでなく、プロジェクト内のファイルを読ませたり、コード修正を依頼したりできます。

Web制作では、既存コードを読み解く、HTMLやCSSの修正案を出す、JavaScriptのエラーを調べる、複数ファイルの関係を整理する、といった場面で役立ちます。

Cursorとは

Cursorは、AIと一緒にコードを書くためのエディタです。

通常のチャットAIとの違いは、プロジェクトのファイルを見ながら相談できることです。

たとえば、次のような使い方ができます。

  • 今開いているファイルについて質問する
  • 複数ファイルの関係を説明してもらう
  • 既存のHTMLに合わせてCSSを修正してもらう
  • エラーの原因を探してもらう
  • 修正案を差分として確認する
  • ルールを渡して、書き方をそろえる

AIにコードを貼り付けて質問するだけでなく、作業中のプロジェクトを前提に相談できるのが強みです。

ChatGPTとの違い

ChatGPTのようなチャットAIは、会話の中で情報を渡して使います。

Cursorは、エディタの中でファイルを見ながら使います。

項目ChatGPTCursor
主な使い方質問、相談、文章作成コード読解、修正、実装補助
ファイル参照手動で貼り付けるプロジェクト内のファイルを参照しやすい
修正作業出力を自分で反映する差分として反映しやすい
向いている場面調査、整理、壁打ちコーディング、既存コード修正

どちらが優れているというより、使う場面が違います。

調査や考え方の整理はチャットAI、実際のコード作業はCursor、というように使い分けると便利です。

プロジェクト全体を読ませる意味

Web制作のコードは、1ファイルだけで完結しないことが多いです。

HTML、CSS、JavaScript、画像、設定ファイルが関係し合っています。

Cursorにプロジェクト全体を見せると、次のような相談がしやすくなります。

  • このclassはどこで使われているか
  • このJavaScriptはどのHTMLに対応しているか
  • 似たコンポーネントが他にあるか
  • 既存の命名ルールに合わせるにはどう書くか
  • どのファイルを修正すればよいか

ただし、プロジェクトを読ませれば必ず正しく理解するわけではありません。

AIが参照しているファイルや、提案された修正範囲を自分で確認する必要があります。

Chatの使い方

Chatは、質問や相談に使います。

たとえば、次のように依頼できます。

Cursor Chatの依頼例
このファイルの役割を説明してください。

そのあと、Web制作初心者が理解しておくべきポイントを3つ挙げてください。
既存コードの相談
このHTMLに対応するCSSを確認して、スマホ幅で崩れそうな箇所を教えてください。

まだ修正はしないで、まず問題点だけ整理してください。

Chatでは、いきなり修正を依頼するより、まず説明や問題点の整理をしてもらうと安全です。

Agentの使い方

Agentは、AIに実際の作業を依頼するときに使います。

たとえば、ファイルの修正、コンポーネントの追加、複数ファイルにまたがる変更などです。

Agentに依頼するときは、作業範囲を明確にします。

Agentへの依頼例
src/components/Header.astro だけを修正してください。

やりたいこと:
- スマホ幅でメニューを開閉できるようにする
- 既存のclass名はできるだけ維持する
- アクセシビリティのためにaria-expandedを更新する

まず実装方針を説明してから、修正してください。

作業範囲を限定すると、想定外のファイルが変わるリスクを減らせます。

Rulesの使い方

Rulesは、AIに守ってほしい書き方や方針を伝えるためのものです。

Web制作では、次のようなルールを渡すと便利です。

  • class名の付け方
  • CSSの書き方
  • JavaScriptの命名ルール
  • コンポーネントの分け方
  • アクセシビリティの方針
  • コメントの書き方
  • 変更前に確認してほしいこと

たとえば、次のようなルールを作れます。

Rulesの例
- 既存のclass名を勝手に変更しない
- CSSだけで実現できる場合は、JavaScriptを追加しない
- buttonとaを役割で使い分ける
- コードを修正したら、変更理由を短く説明する
- 不明点がある場合は、実装前に質問する

Rulesは、AIの出力を安定させるための前提資料です。

差分確認の習慣

CursorでAIに修正させたら、必ず差分を確認します。

確認するポイントは次の通りです。

  • 依頼したファイルだけが変わっているか
  • 既存コードが不要に書き換わっていないか
  • class名やidが勝手に変わっていないか
  • コードが複雑になりすぎていないか
  • 動作確認が必要な箇所はどこか

AIの変更は、速い分だけ見落としも起きやすいです。

差分を読む習慣があると、AIを安全に使いやすくなります。

Web制作案件での活用例

Cursorは、次のような場面で使いやすいです。

  • 既存サイトのHTML構造を理解する
  • CSSの重複を整理する
  • スマホ幅の崩れを調査する
  • JavaScriptのエラー原因を探す
  • アクセシビリティ上の問題を確認する
  • コンポーネントを既存ルールに合わせて追加する
  • READMEや制作メモを作る

作業を全部任せるのではなく、読解、相談、修正案、差分確認をセットで使うと実務に向きます。

この章のまとめ

  • Cursorは、AI機能を組み込んだコードエディタ
  • Chatは相談や読解、Agentは実作業に向いている
  • Rulesを使うと、AIに守ってほしい書き方を伝えやすい
  • AIに作業させるときは、範囲を小さく限定する
  • 修正後は必ず差分を確認する