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

by Yuki Horikoshi

Embed

Start on current slide

Slide 1

Slide 1 text

効率的な開発を実現するAI アシスタントの活用法 2025.04.22 Tue. SmartHR ほりゆう SmartHR PdE Cursor わいわい講座 for PdE 1

Slide 2

Slide 2 text

自己紹介名前: ほりゆう所属: 技術統括本部/ タレントマネジメントプロダクト開発本部/PdE 経歴: 元高等学校の国語科教師→Rails エンジニア趣味: マジック好きなエディタ: Cursor 2

Slide 3

Slide 3 text

今日はよろしくお願いします 3

Slide 4

Slide 4 text

話している最中の質問も歓迎です 4

Slide 5

Slide 5 text

⚠️ 注意：今日の研修はv0.49.x までの話です 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Rules の種類 User Rules システム全体に適用されるルール Cursor の基本動作に影響 Project Rules ユーザー定義のカスタムルール特定のプロジェクトやファイルに適用 .cursor/rules に配置 8

Slide 9

Slide 9 text

Project Rules とは？ Rules の中の1 機能 AI の動作を制御するルール設定 .cursor/rules ディレクトリに保存対象ファイルが参照された時に自動適用 gitignore スタイルのパターンマッチングで指定できる 9

Slide 10

Slide 10 text

# TypeScriptフロントエンドルール ## ルール - 常にTypeScriptの型を厳密に使用すること - Reactコンポーネントは関数コンポーネントで実装 - スタイリングにはTailwind CSSを使用 10

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Project Rules の効果 Before: 一般的なAI 応答プロジェクト固有の知識なし汎用的なコード生成 After: プロジェクト固有のコーディングスタイルを適用特定のフレームワーク/ アーキテクチャに準拠して回答ファイルタイプごとに異なる挙動 12

Slide 13

Slide 13 text

2.1. ハンズオン：Project Rules を実際に作ってみましょう 13

Slide 14

Slide 14 text

ハンズオン手順空のディレクトリを作成 Cursor で開く Ruby のFizzBuzz をAgent モードでif 文を使うように指定して書いてもらう Rules を作って、case 文を使うように強制してみる *.rb で指定できます command + shift + p でコマンドパレットを開いてRules と入力 14

Slide 15

Slide 15 text

高度なProject Rules 活用法 @file 記法で他のファイルを参照可能できます @src/components/Button.tsx 最初に読ませたいルールを作成し、@file 記法で条件分岐を実現する複数のルールを連鎖させる特定のファイルに対するルールを定義できる Agent Requested で次の情報を置いておくのが個人的におすすめです 15

Slide 16

Slide 16 text

2.2. おすすめ：Agent Requested ルールに記載すべき情報アプリケーションの概要説明それぞれのディレクトリの構成コーディング規約 16

Slide 17

Slide 17 text

3. Docs / Notepads / Rules の違い 17

Slide 18

Slide 18 text

Docs の活用よく耳にするDocs には2 つの意味があると思っています。 1. 外部ドキュメントのインデックス機能 URL をCursor にインデックスさせて参照可能にする外部ドキュメントの内容をAI が理解して回答に活用してくれる 2. プロジェクト内docs ディレクトリプロジェクト固有のドキュメントを整理 AI が参照してコンテキストとして活用 18

Slide 19

Slide 19 text

Notepads の活用チャットの際にコンテキストを共有 @ 構文で参照可能 ~/Library/Application Support/Cursor/User/workspaceStorage//state.vscdb に保存されるバージョン管理しない汎用プロンプトを置いておくと良さそうです詳細： https://docs.cursor.com/beta/notepads 19

Slide 20

Slide 20 text

3.1. ハンズオン：Docs の活用 20

Slide 21

Slide 21 text

ハンズオン手順 @Docs から好きなサイトのドキュメントを追加 Cursor Setting でindex 状況を確認するドキュメントをメンションして質問してみる 21

Slide 22

Slide 22 text

4. MCP (Model Context Protocol) の活用 22

Slide 23

Slide 23 text

MCP とは？ AI と外部ツール・データソースを接続するためのプロトコル AI が外部の情報をリアルタイムで取得・操作可能にする WEB ページ調査よりもより直接的にデータが取得できる 23

Slide 24

Slide 24 text

MCP の活用例 GitHub MCP でコード検索・PR 作成 Figma MCP でデザインシステム連携をしてUI 実装支援 24

Slide 25

Slide 25 text

4.1. ハンズオン：GitHub との連携を試してみましょう 25

Slide 26

Slide 26 text

GitHub MCP の設定手順(Docker なし) modelcontextprotocol のリポジトリを使用 GitHub 公式のMCP も公開されたので、Docker のある方は後者を推奨 PAT を発行（ご自身のリポジトリをRead 権限で指定） Cursor Setting からMCP を選択事前にnode.js のインストールが必要になります 26

Slide 27

Slide 27 text

{ "mcpServers": { "github": { "command": "npx", "args": [ "@modelcontextprotocol/server-github" ], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "github_pat_xxxx" } } } } GitHub の情報が取れるかAgent モードで試してみてください 27

Slide 28

Slide 28 text

GitHub MCP の設定手順(Docker あり) PAT を発行（ご自身のリポジトリをRead 権限で指定） Cursor Setting からMCP を選択 28

Slide 29

Slide 29 text

{ "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

Slide 30

Slide 30 text

5. その他ベータ機能の活用方法 30

Slide 31

Slide 31 text

Custom modes (BETA) カスタムモードの作成を許可特定の作業に特化したモードを定義例）Edit はしないが、MCP を使えるモードなど 31

Slide 32

Slide 32 text

ベータ機能の活用 Play sound on finish チャット応答完了時に音声通知 Review changes チャットセッション中のLLM による変更を一覧表示、変更内容をグループ化して確認可能 Web Search Tool エージェント/ アスクモードでウェブ検索が可能、最新情報を活用したコード生成 32

Slide 33

Slide 33 text

その他のベータ機能 Auto Approve: AI の提案を自動的に適用 Command Deny List: 特定のコマンドの実行を禁止ローカルモデル統合: ローカルで実行可能なAI モデルとの連携 Rules generation: チャットから直接Rules を生成する機能プロジェクト構造のコンテキスト化: ディレクトリ構造をプロンプトに含める機能 Global ignore files: プロジェクト横断的な無視パターンを設定 33

Slide 34

Slide 34 text

時間があれば：SuperWhisper との連携音声入力ツール「SuperWhisper 」と組み合わせた開発体験声でCursor に指示を出し、コーディングを効率化「このコードにユニットテストを追加して」「このバグを修正して」「このAPI のドキュメントを要約して」ハンズフリーでAI プログラミングが可能に詳細は: https://superwhisper.com/ 34

Slide 35

Slide 35 text

まとめ基本機能の理解: Agent モード、Manual モード、Ask モードを分けて活用 Rules 活用: まずはプロジェクトの情報を与えてみましょう Docs の活用: 外部ドキュメントや内部docs ディレクトリを活用しましょう MCP 連携: GitHub やFigma など外部サービスとの連携をしてみましょうベータ機能: 最新機能を追うようにして、積極的に試しましょう 35

Slide 36

Slide 36 text

Q&A ご質問があればどうぞ！ 36