エンジニア向けCursor勉強会 @ SmartHR

SmartHRで開催したエンジニア向けCursorの勉強会の資料を修正・補足したものです。

Transcript

1. 効率的な開発を実現するAI アシスタントの活用法 2025.04.22 Tue. SmartHR ほりゆう SmartHR PdE Cursor わいわい講座 for PdE 1
2. 自己紹介 名前: ほりゆう 所属: 技術統括本部/ タレントマネジメントプロダクト開発本部/PdE 経歴: 元高等学校の国語科教師→Rails エンジニア 趣味: マジック 好きなエディタ: Cursor 2
3. 今日はよろしくお願いします 3
4. 話している最中の質問も歓迎です 4
5. ⚠️ 注意：今日の研修はv0.49.x までの話です 5
6. 1. Cursor の基本おさらい Microsoft のVisual Studio Code （VS Code ）のフォーク（派生版） として開発 3 つのモードで効率的な開発を実現 Agent: コンテキストを理解して複雑なタスクを自動化 Manual: コード選択から高精度な修正・拡張を提案 Ask: 技術的な質問に的確に回答 6
7. 2. Rules を活用したAI 挙動のカスタマイズ 7
8. Rules の種類 User Rules システム全体に適用されるルール Cursor の基本動作に影響 Project Rules ユーザー定義のカスタムルール 特定のプロジェクトやファイルに適用 .cursor/rules に配置 8
9. Project Rules とは？ Rules の中の1 機能 AI の動作を制御するルール設定 .cursor/rules ディレクトリに保存 対象ファイルが参照された時に自動適用 gitignore スタイルのパターンマッチングで指定できる 9
10. # TypeScriptフロントエンドルール ## ルール - 常にTypeScriptの型を厳密に使用すること - Reactコンポーネントは関数コンポーネントで実装 - スタイリングにはTailwind CSSを使用 10
12. Project Rules の効果 Before: 一般的なAI 応答 プロジェクト固有の知識なし 汎用的なコード生成 After: プロジェクト固有のコーディングスタイルを適用 特定のフレームワーク/ アーキテクチャに準拠して回答 ファイルタイプごとに異なる挙動 12
13. 2.1. ハンズオン：Project Rules を実際に作っ てみましょう 13
14. ハンズオン手順 空のディレクトリを作成 Cursor で開く Ruby のFizzBuzz をAgent モードでif 文を使うように指定して書いて もらう Rules を作って、case 文を使うように強制してみる *.rb で指定できます command + shift + p でコマンドパレットを開いてRules と入 力 14
15. 高度なProject Rules 活用法 @file 記法で他のファイルを参照可能できます @src/components/Button.tsx 最初に読ませたいルールを作成し、@file 記法で条件分岐を実現す る 複数のルールを連鎖させる 特定のファイルに対するルールを定義できる Agent Requested で次の情報を置いておくのが個人的におすすめで す 15
16. 2.2. おすすめ：Agent Requested ルールに記 載すべき情報 アプリケーションの概要説明 それぞれのディレクトリの構成 コーディング規約 16
17. 3. Docs / Notepads / Rules の違い 17
18. Docs の活用 よく耳にするDocs には2 つの意味があると思っています。 1. 外部ドキュメントのインデックス機能 URL をCursor にインデックスさせて参照可能にする 外部ドキュメントの内容をAI が理解して回答に活用してくれる 2. プロジェクト内docs ディレクトリ プロジェクト固有のドキュメントを整理 AI が参照してコンテキストとして活用 18
19. Notepads の活用 チャットの際にコンテキストを共有 @ 構文で参照可能 ~/Library/Application Support/Cursor/User/workspaceStorage/<UUID>/state.vscdb に 保存される バージョン管理しない汎用プロンプトを置いておくと良さそうです 詳細： https://docs.cursor.com/beta/notepads 19
20. 3.1. ハンズオン：Docs の活用 20
21. ハンズオン手順 @Docs から好きなサイトのドキュメントを追加 Cursor Setting でindex 状況を確認する ドキュメントをメンションして質問してみる 21
22. 4. MCP (Model Context Protocol) の活用 22
23. MCP とは？ AI と外部ツール・データソースを接続するためのプロトコル AI が外部の情報をリアルタイムで取得・操作可能にする WEB ページ調査よりもより直接的にデータが取得できる 23
24. MCP の活用例 GitHub MCP でコード検索・PR 作成 Figma MCP でデザインシステム連携をしてUI 実装支援 24
25. 4.1. ハンズオン：GitHub との連携を試してみ ましょう 25
26. GitHub MCP の設定手順(Docker なし) modelcontextprotocol のリポジトリを使用 GitHub 公式のMCP も公開されたので、Docker のある方は後者 を推奨 PAT を発行（ご自身のリポジトリをRead 権限で指定） Cursor Setting からMCP を選択 事前にnode.js のインストールが必要になります 26
27. { "mcpServers": { "github": { "command": "npx", "args": [ "@modelcontextprotocol/server-github" ], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "github_pat_xxxx" } } } } GitHub の情報が取れるかAgent モードで試してみてください 27
28. GitHub MCP の設定手順(Docker あり) PAT を発行（ご自身のリポジトリをRead 権限で指定） Cursor Setting からMCP を選択 28
29. { "mcpServers": { "github": { "command": "docker", "args": [ "run", "-i", "--rm", "-e", "GITHUB_PERSONAL_ACCESS_TOKEN", "ghcr.io/github/github-mcp-server" ], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "github_pat_" } }, } } GitHub の情報が取れるかAgent モードで試してみてください 29
30. 5. その他ベータ機能の活用方法 30
31. Custom modes (BETA) カスタムモードの作成を許可 特定の作業に特化したモードを定義 例）Edit はしないが、MCP を使えるモードなど 31
32. ベータ機能の活用 Play sound on finish チャット応答完了時に音声通知 Review changes チャットセッション中のLLM による変更を一覧表示、変更内 容をグループ化して確認可能 Web Search Tool エージェント/ アスクモードでウェブ検索が可能、最新情報を 活用したコード生成 32
33. その他のベータ機能 Auto Approve: AI の提案を自動的に適用 Command Deny List: 特定のコマンドの実行を禁止 ローカルモデル統合: ローカルで実行可能なAI モデルとの連携 Rules generation: チャットから直接Rules を生成する機能 プロジェクト構造のコンテキスト化: ディレクトリ構造をプロンプト に含める機能 Global ignore files: プロジェクト横断的な無視パターンを設定 33
34. 時間があれば：SuperWhisper との連携 音声入力ツール「SuperWhisper 」と組み合わせた開発体験 声でCursor に指示を出し、コーディングを効率化 「このコードにユニットテストを追加して」 「このバグを修正して」 「このAPI のドキュメントを要約して」 ハンズフリーでAI プログラミングが可能に 詳細は: https://superwhisper.com/ 34
35. まとめ 基本機能の理解: Agent モード、Manual モード、Ask モードを分けて 活用 Rules 活用: まずはプロジェクトの情報を与えてみましょう Docs の活用: 外部ドキュメントや内部docs ディレクトリを活用しま しょう MCP 連携: GitHub やFigma など外部サービスとの連携をしてみまし ょう ベータ機能: 最新機能を追うようにして、積極的に試しましょう 35
36. Q&A ご質問があればどうぞ！ 36