Nx × AI によるモノレポ活用 〜コードジェネレーター編〜

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

Transcript

1. Nx × AI によるモノレポ活⽤ 〜コードジェネレーター編〜 1 2025/08/04 Findy AI Meetup ファインディ株式会社 フロントエンド テックリード 新福 宜侑 @puku0x
3. 3 ファインディでは、ほぼ全てのフロントエンドでNxが採⽤されています 開発基盤にNxを採⽤ https://nx.dev/
4. 4 Nxの採⽤理由 • モダンなツール ◦ ViteやESLint等がすぐに使える ◦ nx migrate による⾃動更新 • ⼤規模化に強い ◦ nx affected による変更検知 ◦ Nx Cloudのリモートキャッシュ • エコシステムが充実 ◦ 各種プラグイン、エディタ拡張、⽣成AI…
5. 5 最近のNxはAIツールとの連携が強化
6. 6 Nx Console VS Code / IntelliJ⽤の拡張 ジェネレーターUIや メニューの拡張 などが便利
7. 7 Nx Console - カスタムインストラクションの⾃動追加 { "nxConsole.generateAiAgentRules": true } --- applyTo: '**' --- // This file is automatically generated by Nx Console You are in an nx workspace using Nx 21.2.2 and npm as the package manager. You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
8. 8 Nx MCP Nxワークスペース⽤の公式MCPサーバー https://nx.dev/blog/nx-made-cursor-smarter Nxワークスペースの情報 ↓ ⽣成AIのコンテキスト https://nx.dev/features/enhance-AI
9. 9 Nx MCPサーバーの有効化 VS Codeでの設定例 { "servers": { "nx-mcp": { "command": "npx", "args": ["nx-mcp@latest", "${workspaceFolder}"] } }
10. 10 MCP活⽤のシチュエーション コンテキスト不⾜の例 ◯◯のフィーチャーライブラリを 作成してください はい npx nx g @nrwl/react:library feature-xxx --directory=xxx --no-interactive いや、そうじゃなくて カスタムのジェネレーターがあって...
11. 11 Nx MCPサーバーの機能 ワークスペース内で利⽤可能なジェネレーターを列挙するツールがある https://nx.dev/blog/nx-made-cursor-smarter
12. 12 Nx MCPサーバーを有効にした場合 適切なツールが選ばれる NxのMCPを使って◯◯のフィーチャー ライブラリを作成してください
13. 13 MCPが重要な理由 ユーザビリティ 冪等性 Nxジェネレーター △ オプションを覚える必要あり ◯ AIによるコード生成 ◯ 自然言語で操作可 △ MCPサーバーから起動することで ⾃然⾔語で操作できるNxジェネレーターができる
14. 14 理屈は分かるが... 全ての開発者が 「何を聞けば良いか」 を把握している訳ではない
15. 15 再現性を上げるには？
16. 16 プロンプトファイル（*.prompt.md） ※Claude Codeのカスタムスラッシュコマンドでも同様のことができます https://code.visualstudio.com/docs/copilot/copilot-customization#_prompt-files-experimental
17. 17 --- mode: 'agent' model: GPT-4.1 tools: ['runCommands', 'terminalLastCommand', 'nx-mcp'] description: 'Adding a new feature for frontend.' --- # フィーチャーの追加 - ジェネレーターの列挙にNx MCPを使⽤する ## ⼿順 1. ユーザーにフィーチャの属性を尋ねる - 1. ⼀覧 - 2. 詳細 - 3. 作成 - 4. 編集 - 5. その他 2. ユーザーにフィーチャーの名前（ `name` ）を尋ねる - 属性によって例⽰を切り替える - 1. ⼀覧: `例: frontend-features-<name>-list` - 2. 詳細: `例: frontend-features-<name>-detail` - 3. 作成: `例: frontend-features-<name>-create` - 4. 編集: `例: frontend-features-<name>-edit` - 5. その他: `例: frontend-feature-<name>` 3. ジェネレーターを起動する - 属性によって起動するジェネレーターを切り替える - Nx MCPを使⽤して、下記に対応するジェネレーター名に近いものを使⽤する - 1. ⼀覧: `frontend-features-list` - 2. 詳細: `frontend-features-detail` - 3. 作成: `frontend-features-create` - 4. 編集: `frontend-features-edit` - 5. その他: `frontend-feature` - ユーザーにはルートディレクトリで実⾏するのを推奨する - ユーザーには `npx nx` から起動するのを推奨する - 必要に応じてジェネレーターのオプションを例⽰する - 属性が1〜4の場合 `featureComponentType` の指定を求める - 1. `page` - 2. `container` - 3. `component` - 4. `graphql` - Nx MCPを使⽤して、利⽤するNxジェネレーターのオプションを例⽰する 4. ユーザーに実⾏した場合の予測結果を⽰す - このステップでは、挙動の確認のため `--dry-run` オプションを付ける - Nx MCPを使⽤して、利⽤するNxジェネレーターを確認する - Nx MCPを使⽤して、利⽤するNxジェネレーターのオプションを確認する - ユーザーの承認を得た後、次のステップに進む 5. ジェネレーターを実⾏する - Nx MCPを使⽤して、利⽤するNxジェネレーターを確認する - Nx MCPを使⽤して、利⽤するNxジェネレーターのオプションを確認する プロンプトファイルの例（.github/prompts/add-feature.prompt.md）
18. 18 プロンプトファイルの起動（VS Codeの場合） チャットから でも起動できる ファイルから 起動
19. 19 プロンプトファイルの実⾏結果
20. 20 Nx MCP！
21. 21 できた！
22. 22 まとめ • NxジェネレーターとNx MCPの組み合わせ ◦ モノレポ内の情報 → AIのコンテキスト ◦ ⾃然⾔語で書ける＆冪等性のあるコード⽣成が可能 • プロンプトファイル（カスタムスラッシュコマンド）で再現性を確保 ◦ AIツールの活⽤ → 今後の業務標準化 ◦ REAMDEのあり⽅も変わる...? • Nx CloudのAI機能も⾯⽩そう ◦     はいいぞ！ https://nx.dev/
23. We’re hiring! https://careers.findy.co.jp/ 23