Cursor 初心者向けハンズオン

Cursor 初心者向けハンズオン 2025-07-06 岡山でAI駆動開発をやっていく会 vol.1 / a-know Special thanks to: @yuki82511988（ほりゆう）san

• https://okayama-ai-dev.connpass.com/event/358082/
• https://x.com/yuki82511988

自己紹介 ● ● ● ● a-know / いのうえ プロダクトエンジニア @ 株式会社SmartHR（フルリモート） 岡山県岡山市出身 / 倉敷市在住 keywords ○ ドライブ / 個人開発 / 地域ITコミュニティ pixe.la okayama-nanka.org

• http://pixe.la
• http://okayama-nanka.org

もくじ 1. 2. 3. 4. 5. Cursor基本情報 下準備 Rulesを活用したAI挙動のカスタマイズ ○ ハンズオン-1. Project Rules を実際に作ってみよう Docs / Notepads の活用 ○ ハンズオン-2. Docs を活用する Inline Edit を使う ○ ハンズオン-3. Inline Edit を使ってみる

1. Cursor基本情報 ● ● Microsoft Visual Studio Code（VS Code）のフォーク（派生版）として開発 3つのモードで効率的な開発を実現 ○ Agent: コンテキストを理解して複雑なタスクを自動で実施 ○ Ask: 技術的な質問に的確に回答 ○ Manual: コード選択から高精度な修正・拡張を提案。人間によるコード編集の 補助

2. 下準備

2. 下準備 ● ● Cursor を開き、自分のアカウントでログイン状態になっているか確認 ○ `cmd + shift + p` -> Cursor Settings ローカルにハンズオン用の適当なディレクトリを作成、そのディレクトリを Cursor で 開く

3. Rulesを活用したAI挙動のカスタマイズ

3-1. Rulesを活用したAI挙動のカスタマイズ - Rules の種類 User Rules ● システム全体（その環境下のすべて）に適用されるルール ● Cursorの基本動作に影響 Project Rules ● ユーザー定義のカスタムルール ● 特定のプロジェクトやファイルに適用 ● プロジェクトごとの `.cursor/rules` に配置

3-1. Rulesを活用したAI挙動のカスタマイズ - Project Rules とは？ ● ● ● ● Rulesの中の一機能 AIの動作を制御するルール設定 `.cursor/rules` ディレクトリに保存 4種類の適用方法を選べる ○ Rulesを書いたからといって常に全部が適用されるわけではない

3-1. Rulesを活用したAI挙動のカスタマイズ - Project Rules が...... ないとき ● 一般的なAI応答 ● プロジェクト固有の規約・知識なし ● 汎用的なコード生成 あるとき ● プロジェクト固有のコーディングスタイルを適用させられたり ● 特定のフレームワーク/アーキテクチャに準拠した回答を得られたり ● ファイルタイプごとに異なる挙動を実現できる

ハンズオン-1. Project Rules を実際に作ってみよう

ハンズオン-1. Project Rules を実際に作ってみよう - 手順 1. 2. 「RubyのFizzBuzzコード」を、Agentモードでif文を使って書くように指定して書いて もらってみる ○ チャットウインドウが出てない場合、 `cmd + l` で開くこともできる Rulesを作って、case文を使うように強制してみる ○ `*.rb` で指定できる ○ `cmd + shift + p` でコマンドパレットを開き、`rule` で設定

ハンズオン-1. Project Rules を実際に作ってみよう - 手順

ハンズオン-1. Project Rules を実際に作ってみよう - 手順

ハンズオン-1. Project Rules を実際に作ってみよう - 手順

3-2. Project Rules 応用編 ● @file 記法で他のファイルを参照させることができます

3-2. Project Rules 応用編 ● ● @file 記法で他のファイルを参照させることができます ○ 最初に読ませたいルールを作成し、@file 記法で条件分岐を実現したり ○ 複数のルールを連鎖させたり ○ 特定のファイルに対するルールを定義したり “Agent Requested” で以下の情報を記載しておくと便利 ○ アプリケーションの概要に関する説明 ○ ディレクトリの構成 ○ コーディング規約

4. Docs / Notepads の活用

4-1. Docsの活用 “Docs” が指す2つの意味 1. 2. 外部ドキュメント ○ URLをCursorにインデックスさせて参照可能にする ○ 外部ドキュメントの内容をAIが理解して回答に活用してくれる プロジェクト内ドキュメントディレクトリ ○ プロジェクト固有のドキュメント（PRDとか仕様書とか）を整理しておける ○ それをAIが参照してコンテキストの一部として活用してくれる

4-2. Notepadsの活用 ● ● ● チャットの際にコンテキストを与えられる・@ 構文で参照可能 ~/Library/Application Support/Cursor/User/WorkspaceStorage/<UUID>/state.vscdb に保存される バージョン管理しないがよく使う、といった汎用プロンプトを置いておくとヨサソウ

4-2. Notepadsの活用 ● ● ● チャットの際にコンテキストを与えられる・@ 構文で参照可能 ~/Library/Application Support/Cursor/User/WorkspaceStorage/<UUID>/state.vscdb に保存される バージョン管理しないがよく使う、といった汎用プロンプトを置いておくとヨサソウ

ハンズオン-2. Docs を活用する

ハンズオン-2. Docsを活用する - 手順 1. 2. 3. @Docs から好きなサイトのドキュメントを追加 ○ 今回はぜひ https://docs.pixe.la にしてみましょう Cursor Setting で index 状況を確認する ドキュメントをメンションして質問してみる

• https://docs.pixe.la

ハンズオン-2. Docsを活用する - 手順

ハンズオン-2. Docsを活用する - 手順 1. 2. 3. @Docs から好きなサイトのドキュメントを追加 ○ 今回はぜひ https://docs.pixe.la にしてみましょう Cursor Setting で index 状況を確認する ドキュメントをメンションして質問してみる

• https://docs.pixe.la

ハンズオン-2. Docsを活用する - 手順

ハンズオン-2. Docsを活用する - 手順

5. Inline Edit を使う

5. Inline Edit を使う ● ● 画面右側のChatを使わず、エディタ内に限定して使うチャット ○ こっちの方が高速（な気がする） ○ 編集箇所を限定できる ○ 右側のChatに飛ばすこともできる 対象をエディタ内で選択して `cmd + k`

ハンズオン-3. Inline Edit を使ってみる

ハンズオン-3. Inline Edit を使ってみる 1. 2. 3. 4. 編集したいファイルを開く ○ ハンズオン-2. で生成させた Pixela ユーザー登録スクリプトがおすすめ 編集させたい箇所を選択 `cmd + k` で Inline Edit を開く いろいろやってみる

ハンズオン-3. Inline Edit を使ってみる 1. 2. 3. 4. 編集したいファイルを開く ○ ハンズオン-2. で生成させた Pixela ユーザー登録スクリプトがおすすめ 編集させたい箇所を選択 `cmd + k` で Inline Edit を開く いろいろやってみる

ハンズオン-3. Inline Edit を使ってみる

Cursor ハンズオン・初心者編はここまで！ ● ● おつかれさまでした！ 上級者編（予定はない......）では以下のようなものを扱います ○ MCPを利用する ○ カスタムモードの作成と利用 ○ SuperWhisperとの連携 ○ その他ベータ機能の活用方法 ○ etc.