671 Views
July 06, 25
スライド概要
岡山でAI駆動開発をやっていく会 vol.1( https://okayama-ai-dev.connpass.com/event/358082/ )で使用した、Cursor 初心者向けハンズオンの資料です。
Customer x Engineering Practitioner Creator of http://pixe.la Founder of Okayama.なんか - http://okayama-nanka.org
Cursor 初心者向けハンズオン 2025-07-06 岡山でAI駆動開発をやっていく会 vol.1 / a-know Special thanks to: @yuki82511988(ほりゆう)san
自己紹介 ● ● ● ● a-know / いのうえ プロダクトエンジニア @ 株式会社SmartHR(フルリモート) 岡山県岡山市出身 / 倉敷市在住 keywords ○ ドライブ / 個人開発 / 地域ITコミュニティ pixe.la 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 状況を確認する ドキュメントをメンションして質問してみる
ハンズオン-2. Docsを活用する - 手順
ハンズオン-2. Docsを活用する - 手順 1. 2. 3. @Docs から好きなサイトのドキュメントを追加 ○ 今回はぜひ https://docs.pixe.la にしてみましょう Cursor Setting で index 状況を確認する ドキュメントをメンションして質問してみる
ハンズオン-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.