実践！カスタムインストラクション＆スラッシュコマンド

Findy AI Meetup in Fukuoka #2
https://findy-inc.connpass.com/event/365777/

Transcript

1. 実践！カスタムインストラクション ＆ スラッシュコマンド 1 2025/09/08 Findy AI Meetup #2 ファインディ株式会社 フロントエンド テックリード 新福 宜侑 @puku0x
3. 3 ⽣成AI 活⽤していますか？
4. 4 約９割のエンジニアがAIツールを業務で利⽤ https://findy-code.io/job-market-trends/20250630
5. 5 ファインディで導⼊されている⽣成AI系ツール • GitHub Copilot • Claude Code • ChatGPT • Gemini • Devin • Kiro • Cursor • Junie : GitHub Copilot と Claude Code の利⽤者が⽐較的多い
6. 6 ファインディでの⽣成AIツール活⽤事例 GitHub Copilot と Claude Code についての記事を公開中 https://tech.findy.co.jp/entry/2025/07/23/070000 https://tech.findy.co.jp/entry/2024/12/25/070000
7. 7 GitHub Copilot や Claude Code で使える機能を紹介
8. 8 カスタムインストラクション
9. • ⽣成AIのコンテキストとして渡す⽂章 ◦ ライブラリや、アーキテクチャ、コーディングスタイル など ◦ 設定ファイルはツールよって様々 ▪ copilot-instructions.md、CLAUDE.md、AGENTS.md 9 カスタムインストラクション
10. 10 カスタムインストラクションの導⼊ • 既存のコーディングスタイル⽤ドキュメントの流⽤でも⼤丈夫 ◦ ファインディでも最初はコーディングスタイルガイド全⽂を コピペで運⽤していた • コミュニティの知⾒を活⽤ https://github.com/github/awesome-copilot/ 各種プログラミング⾔語、セキュリティ、アクセシビリティなど網羅
11. 11 カスタムインストラクションのコツ • 簡潔に書く ◦ ⻑い⽂章よりも箇条書き • 複雑な条件よりも⼤量のサンプル ◦ お⼿本となるコードを丸ごとコピペするだけでも効果あり ◦ ⽣成AIは確率論的な動きをすると捉えればOK ▪ 「必ず〜」「〜のみ」「**重要**」などのキーワードで制御可 • 英語的な表現を意識する（英語で書く必要はない） ◦ 曖昧な表現を避ける、主語や⽬的語を省略しない ◦ 「〜してください」より「〜する」「〜しない」
12. 12 GitHub Copilot⽤カスタムインストラクションの特徴 • applyTo による適⽤範囲の絞り込みが可能 ◦ 管理しやすい単位で分割、ファイル毎にコンテキスト切り替え ◦ GitHub Copilot Review でも対応済み👍 ◦ 現在は Ask モードでのみ 動作を確認（VS Code 1.103.2） --- applyTo: '**/*.jsx,**/*.tsx' description: Reactコンポーネントのグッドプラクティス ---
13. 13 VS Codeの設定で更に便利に "github.copilot.chat.codeGeneration.useInstructionFiles": true, "github.copilot.chat.commitMessageGeneration.instructions": [ { "file": ".github/instructions/commit-message.instructions.md" } ], "github.copilot.chat.pullRequestDescriptionGeneration.instructions": [], /* pullRequestDescriptionGenerationはまだ実用レベルでない */ コミットメッセージの⽣成
14. 14 カスタムインストラクションの例（1/5） --- applyTo: '**' description: 'コミットメッセージの生成 ' --- コミットメッセージは [Conventional Commits](https://www.conventionalcommits.org/ja/v1.0.0/) に従って記述する。 ## フォーマット :
15. 15 カスタムインストラクションの例（2/5） ## フォーマット ``` <type>[optional scope]: <description> [optional body] [optional footer(s)] ``` ### type（必須） :
16. 16 カスタムインストラクションの例（3/5） ### type（必須） - `feat`: 新機能や既存機能の変更 - `fix`: バグ修正 - `docs`: ドキュメントのみの変更 - `*.md` を追加、変更した場合 - `test`: テスト追加・修正 - `*.spec.*` `*.spec.*.snap` を追加、変更した場合 : ### scope（任意） :
17. 17 カスタムインストラクションの例（4/5） ### scope（任意） - ディレクトリ名が `package.json` または `package-lock.json` の時 `deps` - ディレクトリ名が `.github/**` の時 `github` - ディレクトリ名が `apps/frontend/**` の時 `frontend-app` - ディレクトリ名が `libs/frontend/feature-xxx/**` の時 `frontend-feature-xxx` - ディレクトリ名が `libs/ui/**` の時 `ui` : ### description（必須） ### body（任意） ### footer（任意）
18. 18 カスタムインストラクションの例（5/5） ## コミットメッセージの例 ``` feat(frontend-feature-xxx): add social login feat(ui): add button component fix(frontend-feature-xxx): fix validation docs(*): update README.md refactor(frontend-feature-xxx): refactor form logic test(frontend-feature-xxx): add tests for useXxx ci(github): update ci.yml chore(deps): update dependencies ```
19. 19 カスタムインストラクションの実⾏結果 コミット メッセージ⽣成
20. 20 カスタムインストラクションの運⽤ • 有⽤だが、コンテキストの絞り込みを綺麗に動かす⽅法が課題 ◦ 現状は applyTo: '**' で運⽤ がいちばん楽かも • applyToを使いこなそう ◦ ファインディでは慣習的に拡張⼦を分けていたため相性が良かった https://speakerdeck.com/puku0x/angularkodeingusutairugaidohaiizo?slide=16 ◦ 今後は applyTo の Agent モード対応に期待 🙏 ▪ VS Code 1.104.0-insider では Ask と Edit モードで動作を確認
21. 21 カスタムスラッシュコマンド
22. 22 カスタムスラッシュコマンド • 再利⽤可能なプロンプトを /＜コマンド名＞ で呼び出す ◦ 定型作業（スキャフォールディング、PRの作成など） ◦ ⾃然⾔語で書ける → スクリプトとドキュメント両⽅の側⾯ • GitHub Copilotでは「プロンプトファイル（ *.prompt.md ）」 と呼ばれる
23. 23 カスタムスラッシュコマンドの導⼊ • 所定のディレクトリ‧ファイル名に配置すれば動く ◦ 最初は既存のドキュメント内の⼿順をそのままコピーでも⼤丈夫
24. 24 カスタムスラッシュコマンドの例①（1/2） --- mode: 'agent' model: GPT-4.1 tools: ['runCommands'] description: 'Remove merged branches' --- ローカルの作業ブランチのうち、マージ済みのものを削除します。 ## 手順 :
25. 25 カスタムスラッシュコマンドの例①（2/2） ## 手順 ### 1. マージ済みブランチの確認 ```bash git branch --merged|egrep -v '\*|develop|master|main' ``` ### 2. マージ済みブランチの削除 ```bash git branch --merged|egrep -v '\*|develop|master|main'|xargs git branch -D ```
26. 26 カスタムスラッシュコマンドのコツ • 状態の確認や計画のフェーズを挟む • ⽭盾する内容を書かない 現在の変更 の内容からプルリクエストを自動的に作成する。 ## 手順 ステージされた変更 を確認する。 ```bash git diff --staged ``` **注意**: ステージされた変更がある場合は〜、ない場合は〜 最初に書かれた⽂章に 引きずられる傾向がある ⚠ 内容に⽭盾 git diff --stat が最初に 実⾏される場合がある
27. 27 カスタムスラッシュコマンドの運⽤（１） • Claude Code & GitHub Copilot 両対応で提供する ◦ GitHub Copilot側をマスタ扱いにする ▪ Claude Codeから @path/to/file でプロンプトファイル参照 ▪ 必要に応じてカスタムインストラクション参照 本体 追加のコンテキスト
28. 28 カスタムスラッシュコマンドの例②（1/7） --- description: Nx のマイグレーション --- # Nx のマイグレーション Nx ワークスペースを最新バージョンにマイグレーションするための手順を以下に示しま す。 Read @.github/copilot-instructions.md Read @.github/prompts/nx-migrate.prompt.md
29. 29 カスタムスラッシュコマンドの例②（2/7） --- mode: 'agent' model: GPT-4.1 tools: ['codebase', 'changes', 'editFiles', ''runCommands', 'Nx Mcp Server'] description: 'Migrate your Nx workspace to the latest version.' --- # Nx のマイグレーション Nx ワークスペースを最新バージョンにマイグレーションするための手順を以下に示しま す。 :
30. 30 カスタムスラッシュコマンドの例②（3/7） ## 手順 下記の手順を一つずつ実行する。 ユーザーには、毎回どの手順を実行しているかを示す。 ### 1. 最新の `develop` ブランチに切り替え 現在 `develop` ブランチにいることを確認する。 ```bash git status ```
31. 31 カスタムスラッシュコマンドの例②（4/7） `develop` ブランチでない場合は、以下を実行する。 ```bash git switch develop ``` `develop` ブランチの最新の状態を取得する。 ```bash git pull origin develop ```
32. 32 カスタムスラッシュコマンドの例②（5/7） ### 2. 既存のマイグレーションファイルの削除 ```bash npx rimraf -g migrations.json ``` ### 3. 最新バージョンの確認 ```bash npx nx migrate latest ```
33. 33 カスタムスラッシュコマンドの例②（6/7） ### 4. 依存関係のインストール ユーザーにこのステップが必要であることを説明する。 - `nx migrate --run-migrations` 内で `npm install` が実行されますが、この手順は Nx 関連パッケージのマイグレーションスクリプトを正常に動作させるために必要です。 ```bash npm install ```
34. 34 カスタムスラッシュコマンドの例②（7/7） ### 5. マイグレーションの実行 ```bash npx nx migrate --run-migrations --if-exists ```
35. 35 カスタムスラッシュコマンドの例③（1/13） --- description: プルリクエストの作成 --- Read @.github/copilot-instructions.md Read @.github/prompts/create-pull.prompt.md IF THERE ARE ANY STAGED CHANGES, DETERMINE THE BRANCH NAME BASED ONLY ON THE STAGED CHANGES. YOU MUST ADD THE PULL REQUEST IS CREATED BY CLAUDE IN THE COMMIT MESSAGE
36. 36 カスタムスラッシュコマンドの例③（2/13） --- description: 'Create a pull request.' mode: 'agent' model: GPT-4.1 tools: ['codebase', 'runCommands',...] --- # プルリクエストの作成 変更の内容からプルリクエストを自動的に作成します。 :
37. 37 カスタムスラッシュコマンドの例③（3/13） ## 手順 下記の手順を一つずつ実行する。 ### 1. 現在の状態確認 ```bash git status ``` **注意**: 現在 `develop` ブランチにいる場合、新しいブランチを作成する。そうでない 場合、ブランチの作成のステップはスキップする。
38. 38 カスタムスラッシュコマンドの例③（4/13） ### 2. ブランチの作成 ステージされた変更を確認する。 ```bash git diff --staged ``` **注意**: ステージされた変更が存在する場合、ステージされた変更の内容のみを考慮 し、新しいブランチ名を決定する。ステージされた変更が存在しない場合、 `git diff --stat` で確認し、新しいブランチ名を決定する。 :
39. 39 カスタムスラッシュコマンドの例③（5/13） ブランチ命名規則は以下に従う - `feat/`: 新機能や既存機能の変更 - `fix/`: バグ修正 - : 例: ```bash git switch -c feat/user-authentication ``` :
40. 40 カスタムスラッシュコマンドの例③（6/13） ### 3. リント・型チェック・テストの実行 ```bash npm run lint npm run stylelint npm run typecheck ``` ```bash npm test ``` **注意**: ドキュメントのみの変更（ `docs/*` ディレクトリ、 `*.md` ファイル、 README 等） の場合は、このステップをスキップできます。
41. 41 カスタムスラッシュコマンドの例③（7/13） ### 4. 変更のステージ ステージされた内容を確認する。 ```bash git diff --staged ``` **注意**: ステージされたファイルが既にある場合は、未ステージのファイルを無視し、こ のステップをスキップします。ステージされたファイルが 0 件の場合にのみ、 `git add -A` を実行します。
42. 42 カスタムスラッシュコマンドの例③（8/13） ### 5. コミットの作成 `git commit` を実行しコミットを作成する。 書式は [コミットメッセージのフォーマッ ト](../instructions/commit-message.instructions.md) に従う。 **重要** コミットメッセージは必ず英語で記載する。 例:
43. 43 カスタムスラッシュコマンドの例③（9/13） 例: ```bash git commit -m "feat(backend): add user authentication feature - Added JWT-based authentication - Added authentication middleware Co-Authored-By: Copilot <175728472+Copilot@users.noreply.github.com>" ``` ### 6. プルリクエストの作成
44. 44 カスタムスラッシュコマンドの例③（10/13） ### 6. プルリクエストの作成 プルリクエストのタイトル（ `<PR title>` ） のフォーマットは以下の通りです。 ``` <type>[optional scope]: <description> ``` - `<type>` 及び `[optional scope]` は [コミットメッセージのフォーマッ ト](../instructions/commit-message.instructions.md) に従う。 - `<description>` は必ず日本語で記載する
45. 45 カスタムスラッシュコマンドの例③（11/13） プルリクエストの概要（ `<PR description>` ） は日本語で記載します。 ```bash # リモートにプッシュ git push -u origin <branch-name> # ghコマンドでプルリクエストを作成 gh pr create --title "<PR title>" --body "<PR description>" ```
46. 46 カスタムスラッシュコマンドの例③（12/13） ## プルリクエストのテンプレート [プルリクエストのテンプレート ] (../PULL_REQUEST_TEMPLATE.md) を参考に、プルリクエストの内容を記載する。 ### タイトル例 - `feat(frontend): ユーザー認証機能の実装 ` - `fix(frontend-feature-sign-in): ログインバリデーションエラーの修正 ` - `docs: API仕様書の更新 `
47. 47 カスタムスラッシュコマンドの例③（13/13） ## 実行例 ```bash git push -u origin feat/user-profile-api gh pr create --title "feat: ユーザープロフィール APIの実装" --body "## 概要 ユーザープロフィールの取得・更新機能を実装しました。 ### 変更内容 - [x] 入力値バリデーション ## 備考 - #123" ```
48. 48 おまけ: Claude CodeにClaude Codeの設定をさせる（1/5） --- description: デスクトップ通知の有効化 --- # デスクトップ通知の有効化 Claude Code の通知を設定します。 macOS のみ対応しています。 ## スクリプトエディタの通知設定を開く :
49. 49 おまけ: Claude CodeにClaude Codeの設定をさせる（2/5） ## スクリプトエディタの通知設定を開く ユーザーにスクリプトエディタの通知を許可するよう促す。 ```bash open "x-apple.systempreferences:com.apple.Notifications-Settings? id=com.apple.ScriptEditor2" ```
50. 50 おまけ: Claude CodeにClaude Codeの設定をさせる（3/5） ## ローカル設定ファイルを作成する **重要** `.claude/settings.local.json` が既に 存在する場合はこのステップをスキップする。 `.claude/settings.local.json` が存在しない場合は `.claude/settings.local.json` を作成 する。 ## ローカル設定を更新する **重要** `.claude/settings.local.json` の `hooks` に `Notification` 設定及び `Stop` 設 定が既に存在する場合はこのステップをスキップする。
51. 51 おまけ: Claude CodeにClaude Codeの設定をさせる（4/5） ```json "hooks": { "Notification": [ { "matcher": "", "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"Claude Codeが許可を求めています 💬\" with title \"Claude Code\" subtitle \"確認待ち\" sound name \"Glass\"'" } ] } ],
52. 52 おまけ: Claude CodeにClaude Codeの設定をさせる（5/5） ```json "Stop": [ { "matcher": "", "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"タスクが完了しました ✅\" with title \"Claude Code\" subtitle \"処理終了\" sound name \"Hero\"'" } ] } ] }
53. 53 カスタムスラッシュコマンドの運⽤（2） • ⾮常に便利、チームメンバーへの周知が課題 ◦ ⽣成AIの利⽤を前提としてREADME⾒直し中
54. 54 まとめ • AIツールの利⽤は当たり前となった • カスタムインストラクションやスラッシュコマンドは有⽤ ◦ ⾃然⾔語で書けるのでエンジニア以外でもメンテ可能 ◦ コツを押さえて再現性を⾼める • ツール乱⽴で疲れないために ◦ プロンプトの⼆重管理を避ける⼯夫 ◦ AGENTS.md など、標準化に期待
55. 55 ⽣成AI時代の新サービスも開発中！ https://findy.co.jp/3146/
56. We’re hiring! https://careers.findy.co.jp/ 56