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

by puku0x

Slide 1

Slide 1 text

実践！カスタムインストラクション＆スラッシュコマンド 1 2025/09/08 Findy AI Meetup #2 ファインディ株式会社フロントエンドテックリード新福宜侑 @puku0x

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

3 ⽣成AI 活⽤していますか？

Slide 4

Slide 4 text

4 約９割のエンジニアがAIツールを業務で利⽤ https://findy-code.io/job-market-trends/20250630

Slide 5

Slide 5 text

5 ファインディで導⼊されている⽣成AI系ツール ● GitHub Copilot ● Claude Code ● ChatGPT ● Gemini ● Devin ● Kiro ● Cursor ● Junie : GitHub Copilot と Claude Code の利⽤者が⽐較的多い

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 GitHub Copilot や Claude Code で使える機能を紹介

Slide 8

Slide 8 text

8 カスタムインストラクション

Slide 9

Slide 9 text

● ⽣成AIのコンテキストとして渡す⽂章 ○ ライブラリや、アーキテクチャ、コーディングスタイルなど ○ 設定ファイルはツールよって様々 ■ copilot-instructions.md、CLAUDE.md、AGENTS.md 9 カスタムインストラクション

Slide 10

Slide 10 text

10 カスタムインストラクションの導⼊ ● 既存のコーディングスタイル⽤ドキュメントの流⽤でも⼤丈夫 ○ ファインディでも最初はコーディングスタイルガイド全⽂をコピペで運⽤していた ● コミュニティの知⾒を活⽤ https://github.com/github/awesome-copilot/ 各種プログラミング⾔語、セキュリティ、アクセシビリティなど網羅

Slide 11

Slide 11 text

11 カスタムインストラクションのコツ ● 簡潔に書く ○ ⻑い⽂章よりも箇条書き ● 複雑な条件よりも⼤量のサンプル ○ お⼿本となるコードを丸ごとコピペするだけでも効果あり ○ ⽣成AIは確率論的な動きをすると捉えればOK ■ 「必ず〜」「〜のみ」「**重要**」などのキーワードで制御可 ● 英語的な表現を意識する（英語で書く必要はない） ○ 曖昧な表現を避ける、主語や⽬的語を省略しない ○ 「〜してください」より「〜する」「〜しない」

Slide 12

Slide 12 text

12 GitHub Copilot⽤カスタムインストラクションの特徴 ● applyTo による適⽤範囲の絞り込みが可能 ○ 管理しやすい単位で分割、ファイル毎にコンテキスト切り替え ○ GitHub Copilot Review でも対応済み👍 ○ 現在は Ask モードでのみ動作を確認（VS Code 1.103.2） --- applyTo: '**/*.jsx,**/*.tsx' description: Reactコンポーネントのグッドプラクティス ---

Slide 13

Slide 13 text

13 VS Codeの設定で更に便利に "github.copilot.chat.codeGeneration.useInstructionFiles": true, "github.copilot.chat.commitMessageGeneration.instructions": [ { "ﬁle": ".github/instructions/commit-message.instructions.md" } ], "github.copilot.chat.pullRequestDescriptionGeneration.instructions": [], /* pullRequestDescriptionGenerationはまだ実用レベルでない */ コミットメッセージの⽣成

Slide 14

Slide 14 text

14 カスタムインストラクションの例（1/5） --- applyTo: '**' description: 'コミットメッセージの生成 ' --- コミットメッセージは [Conventional Commits](https://www.conventionalcommits.org/ja/v1.0.0/) に従って記述する。 ## フォーマット :

Slide 15

Slide 15 text

15 カスタムインストラクションの例（2/5） ## フォーマット ``` [optional scope]: [optional body] [optional footer(s)] ``` ### type（必須） :

Slide 16

Slide 16 text

16 カスタムインストラクションの例（3/5） ### type（必須） - `feat`: 新機能や既存機能の変更 - `ﬁx`: バグ修正 - `docs`: ドキュメントのみの変更 - `*.md` を追加、変更した場合 - `test`: テスト追加・修正 - `*.spec.*` `*.spec.*.snap` を追加、変更した場合 : ### scope（任意） :

Slide 17

Slide 17 text

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（任意）

Slide 18

Slide 18 text

18 カスタムインストラクションの例（5/5） ## コミットメッセージの例 ``` feat(frontend-feature-xxx): add social login feat(ui): add button component ﬁx(frontend-feature-xxx): ﬁx 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 ```

Slide 19

Slide 19 text

19 カスタムインストラクションの実⾏結果コミットメッセージ⽣成

Slide 20

Slide 20 text

20 カスタムインストラクションの運⽤ ● 有⽤だが、コンテキストの絞り込みを綺麗に動かす⽅法が課題 ○ 現状は applyTo: '**' で運⽤がいちばん楽かも ● applyToを使いこなそう ○ ファインディでは慣習的に拡張⼦を分けていたため相性が良かった https://speakerdeck.com/puku0x/angularkodeingusutairugaidohaiizo?slide=16 ○ 今後は applyTo の Agent モード対応に期待 🙏 ■ VS Code 1.104.0-insider では Ask と Edit モードで動作を確認

Slide 21

Slide 21 text

21 カスタムスラッシュコマンド

Slide 22

Slide 22 text

22 カスタムスラッシュコマンド ● 再利⽤可能なプロンプトを /＜コマンド名＞で呼び出す ○ 定型作業（スキャフォールディング、PRの作成など） ○ ⾃然⾔語で書ける → スクリプトとドキュメント両⽅の側⾯ ● GitHub Copilotでは「プロンプトファイル（ *.prompt.md ）」と呼ばれる

Slide 23

Slide 23 text

23 カスタムスラッシュコマンドの導⼊ ● 所定のディレクトリ‧ファイル名に配置すれば動く ○ 最初は既存のドキュメント内の⼿順をそのままコピーでも⼤丈夫

Slide 24

Slide 24 text

24 カスタムスラッシュコマンドの例①（1/2） --- mode: 'agent' model: GPT-4.1 tools: ['runCommands'] description: 'Remove merged branches' --- ローカルの作業ブランチのうち、マージ済みのものを削除します。 ## 手順 :

Slide 25

Slide 25 text

Slide 26

Slide 26 text

26 カスタムスラッシュコマンドのコツ ● 状態の確認や計画のフェーズを挟む ● ⽭盾する内容を書かない現在の変更の内容からプルリクエストを自動的に作成する。 ## 手順ステージされた変更を確認する。 ```bash git diff --staged ``` **注意**: ステージされた変更がある場合は〜、ない場合は〜最初に書かれた⽂章に引きずられる傾向がある ⚠ 内容に⽭盾 git diﬀ --stat が最初に実⾏される場合がある

Slide 27

Slide 27 text

27 カスタムスラッシュコマンドの運⽤（１） ● Claude Code & GitHub Copilot 両対応で提供する ○ GitHub Copilot側をマスタ扱いにする ■ Claude Codeから @path/to/ﬁle でプロンプトファイル参照 ■ 必要に応じてカスタムインストラクション参照本体追加のコンテキスト

Slide 28

Slide 28 text

28 カスタムスラッシュコマンドの例②（1/7） --- description: Nx のマイグレーション --- # Nx のマイグレーション Nx ワークスペースを最新バージョンにマイグレーションするための手順を以下に示します。 Read @.github/copilot-instructions.md Read @.github/prompts/nx-migrate.prompt.md

Slide 29

Slide 29 text

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 ワークスペースを最新バージョンにマイグレーションするための手順を以下に示します。 :

Slide 30

Slide 30 text

30 カスタムスラッシュコマンドの例②（3/7） ## 手順下記の手順を一つずつ実行する。ユーザーには、毎回どの手順を実行しているかを示す。 ### 1. 最新の `develop` ブランチに切り替え現在 `develop` ブランチにいることを確認する。 ```bash git status ```

Slide 31

Slide 31 text

31 カスタムスラッシュコマンドの例②（4/7） `develop` ブランチでない場合は、以下を実行する。 ```bash git switch develop ``` `develop` ブランチの最新の状態を取得する。 ```bash git pull origin develop ```

Slide 32

Slide 32 text

32 カスタムスラッシュコマンドの例②（5/7） ### 2. 既存のマイグレーションファイルの削除 ```bash npx rimraf -g migrations.json ``` ### 3. 最新バージョンの確認 ```bash npx nx migrate latest ```

Slide 33

Slide 33 text

33 カスタムスラッシュコマンドの例②（6/7） ### 4. 依存関係のインストールユーザーにこのステップが必要であることを説明する。 - `nx migrate --run-migrations` 内で `npm install` が実行されますが、この手順は Nx 関連パッケージのマイグレーションスクリプトを正常に動作させるために必要です。 ```bash npm install ```

Slide 34

Slide 34 text

34 カスタムスラッシュコマンドの例②（7/7） ### 5. マイグレーションの実行 ```bash npx nx migrate --run-migrations --if-exists ```

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 カスタムスラッシュコマンドの例③（2/13） --- description: 'Create a pull request.' mode: 'agent' model: GPT-4.1 tools: ['codebase', 'runCommands',...] --- # プルリクエストの作成変更の内容からプルリクエストを自動的に作成します。 :

Slide 37

Slide 37 text

37 カスタムスラッシュコマンドの例③（3/13） ## 手順下記の手順を一つずつ実行する。 ### 1. 現在の状態確認 ```bash git status ``` **注意**: 現在 `develop` ブランチにいる場合、新しいブランチを作成する。そうでない場合、ブランチの作成のステップはスキップする。

Slide 38

Slide 38 text

38 カスタムスラッシュコマンドの例③（4/13） ### 2. ブランチの作成ステージされた変更を確認する。 ```bash git diff --staged ``` **注意**: ステージされた変更が存在する場合、ステージされた変更の内容のみを考慮し、新しいブランチ名を決定する。ステージされた変更が存在しない場合、 `git diff --stat` で確認し、新しいブランチ名を決定する。 :

Slide 39

Slide 39 text

39 カスタムスラッシュコマンドの例③（5/13）ブランチ命名規則は以下に従う - `feat/`: 新機能や既存機能の変更 - `ﬁx/`: バグ修正 - : 例: ```bash git switch -c feat/user-authentication ``` :

Slide 40

Slide 40 text

40 カスタムスラッシュコマンドの例③（6/13） ### 3. リント・型チェック・テストの実行 ```bash npm run lint npm run stylelint npm run typecheck ``` ```bash npm test ``` **注意**: ドキュメントのみの変更（ `docs/*` ディレクトリ、 `*.md` ファイル、 README 等）の場合は、このステップをスキップできます。

Slide 41

Slide 41 text

41 カスタムスラッシュコマンドの例③（7/13） ### 4. 変更のステージステージされた内容を確認する。 ```bash git diff --staged ``` **注意**: ステージされたファイルが既にある場合は、未ステージのファイルを無視し、このステップをスキップします。ステージされたファイルが 0 件の場合にのみ、 `git add -A` を実行します。

Slide 42

Slide 42 text

42 カスタムスラッシュコマンドの例③（8/13） ### 5. コミットの作成 `git commit` を実行しコミットを作成する。書式は [コミットメッセージのフォーマット](../instructions/commit-message.instructions.md) に従う。 **重要** コミットメッセージは必ず英語で記載する。例:

Slide 43

Slide 43 text

43 カスタムスラッシュコマンドの例③（9/13）例: ```bash git commit -m "feat(backend): add user authentication feature - Added JWT-based authentication - Added authentication middleware Co-Authored-By: Copilot <[email protected]>" ``` ### 6. プルリクエストの作成

Slide 44

Slide 44 text

44 カスタムスラッシュコマンドの例③（10/13） ### 6. プルリクエストの作成プルリクエストのタイトル（ `` ）のフォーマットは以下の通りです。 ``` [optional scope]: ``` - `` 及び `[optional scope]` は [コミットメッセージのフォーマット](../instructions/commit-message.instructions.md) に従う。 - `` は必ず日本語で記載する

Slide 45

Slide 45 text

45 カスタムスラッシュコマンドの例③（11/13）プルリクエストの概要（ `` ）は日本語で記載します。 ```bash # リモートにプッシュ git push -u origin # ghコマンドでプルリクエストを作成 gh pr create --title "" --body "" ```

Slide 46

Slide 46 text

46 カスタムスラッシュコマンドの例③（12/13） ## プルリクエストのテンプレート [プルリクエストのテンプレート ] (../PULL_REQUEST_TEMPLATE.md) を参考に、プルリクエストの内容を記載する。 ### タイトル例 - `feat(frontend): ユーザー認証機能の実装 ` - `ﬁx(frontend-feature-sign-in): ログインバリデーションエラーの修正 ` - `docs: API仕様書の更新 `

Slide 47

Slide 47 text

47 カスタムスラッシュコマンドの例③（13/13） ## 実行例 ```bash git push -u origin feat/user-proﬁle-api gh pr create --title "feat: ユーザープロフィール APIの実装" --body "## 概要ユーザープロフィールの取得・更新機能を実装しました。 ### 変更内容 - [x] 入力値バリデーション ## 備考 - #123" ```

Slide 48

Slide 48 text

48 おまけ: Claude CodeにClaude Codeの設定をさせる（1/5） --- description: デスクトップ通知の有効化 --- # デスクトップ通知の有効化 Claude Code の通知を設定します。 macOS のみ対応しています。 ## スクリプトエディタの通知設定を開く :

Slide 49

Slide 49 text

49 おまけ: Claude CodeにClaude Codeの設定をさせる（2/5） ## スクリプトエディタの通知設定を開くユーザーにスクリプトエディタの通知を許可するよう促す。 ```bash open "x-apple.systempreferences:com.apple.Notiﬁcations-Settings? id=com.apple.ScriptEditor2" ```

Slide 50

Slide 50 text

50 おまけ: Claude CodeにClaude Codeの設定をさせる（3/5） ## ローカル設定ファイルを作成する **重要** `.claude/settings.local.json` が既に存在する場合はこのステップをスキップする。 `.claude/settings.local.json` が存在しない場合は `.claude/settings.local.json` を作成する。 ## ローカル設定を更新する **重要** `.claude/settings.local.json` の `hooks` に `Notiﬁcation` 設定及び `Stop` 設定が既に存在する場合はこのステップをスキップする。

Slide 51

Slide 51 text

51 おまけ: Claude CodeにClaude Codeの設定をさせる（4/5） ```json "hooks": { "Notiﬁcation": [ { "matcher": "", "hooks": [ { "type": "command", "command": "osascript -e 'display notiﬁcation \"Claude Codeが許可を求めています 💬\" with title \"Claude Code\" subtitle \"確認待ち\" sound name \"Glass\"'" } ] } ],

Slide 52

Slide 52 text

52 おまけ: Claude CodeにClaude Codeの設定をさせる（5/5） ```json "Stop": [ { "matcher": "", "hooks": [ { "type": "command", "command": "osascript -e 'display notiﬁcation \"タスクが完了しました ✅\" with title \"Claude Code\" subtitle \"処理終了\" sound name \"Hero\"'" } ] } ] }

Slide 53

Slide 53 text

53 カスタムスラッシュコマンドの運⽤（2） ● ⾮常に便利、チームメンバーへの周知が課題 ○ ⽣成AIの利⽤を前提としてREADME⾒直し中

Slide 54

Slide 54 text

54 まとめ ● AIツールの利⽤は当たり前となった ● カスタムインストラクションやスラッシュコマンドは有⽤ ○ ⾃然⾔語で書けるのでエンジニア以外でもメンテ可能 ○ コツを押さえて再現性を⾼める ● ツール乱⽴で疲れないために ○ プロンプトの⼆重管理を避ける⼯夫 ○ AGENTS.md など、標準化に期待