メニュー
互換性分析、段階的ロールアウト、包括的テストを伴うメジャー依存関係バージョンアップグレードを管理します。フレームワークバージョンのアップグレード、メジャー依存関係の更新、またはライブラリの破壊的変更の管理時に使用します。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
自動メトリクス、人間によるフィードバック、およびベンチマークを使用して、LLMアプリケーションの包括的な評価戦略を実装します。LLMのパフォーマンスをテストし、AIアプリケーションの品質を測定し、または評価フレームワークを確立する場合に使用します。
LLMのパフォーマンス、信頼性、制御性を本番環境で最大化するための高度なプロンプトエンジニアリング技術をマスターします。プロンプトの最適化、LLM出力の改善、または本番環境プロンプトテンプレートの設計時に使用します。
建設的なフィードバックを提供し、早期にバグを発見し、チームの士気を維持しながら知識共有を促進する効果的なコードレビュー実践をマスター。プルリクエストのレビュー、レビュー基準の確立、開発者のメンタリング時に使用。
体系的なデバッグ技術、プロファイリングツール、根本原因分析をマスターし、あらゆるコードベースや技術スタックでバグを効率的に追跡。バグ調査、パフォーマンス問題、予期しない動作の調査時に使用。
PlaywrightとCypressを使用したエンドツーエンドテストをマスターし、バグを捕捉し、信頼性を向上させ、高速デプロイメントを可能にする信頼性の高いテストスイートを構築。E2Eテストの実装、不安定なテストのデバッグ、テスト基準の確立時に使用。
rebase、cherry-pick、bisect、worktree、reflogを含む高度なGitワークフローをマスターし、クリーンな履歴を維持し、あらゆる状況から回復。複雑なGit履歴の管理、フィーチャーブランチでの協働、リポジトリ問題のトラブルシューティング時に使用。
| name | dependency-upgrade |
| description | 互換性分析、段階的ロールアウト、包括的テストを伴うメジャー依存関係バージョンアップグレードを管理します。フレームワークバージョンのアップグレード、メジャー依存関係の更新、またはライブラリの破壊的変更の管理時に使用します。 |
English | 日本語
メジャー依存関係バージョンアップグレード、互換性分析、段階的アップグレード戦略、包括的テストアプローチをマスターします。
MAJOR.MINOR.PATCH (例: 2.3.1)
MAJOR: 破壊的変更
MINOR: 新機能、後方互換性あり
PATCH: バグ修正、後方互換性あり
^2.3.1 = >=2.3.1 <3.0.0 (マイナーアップデート)
~2.3.1 = >=2.3.1 <2.4.0 (パッチアップデート)
2.3.1 = 正確なバージョン
# npm
npm outdated
npm audit
npm audit fix
# yarn
yarn outdated
yarn audit
# メジャーアップデートを確認
npx npm-check-updates
npx npm-check-updates -u # package.jsonを更新
# パッケージがインストールされた理由を確認
npm ls package-name
yarn why package-name
# 重複パッケージを検索
npm dedupe
yarn dedupe
# 依存関係を可視化
npx madge --image graph.png src/
// compatibility-matrix.js
const compatibilityMatrix = {
'react': {
'16.x': {
'react-dom': '^16.0.0',
'react-router-dom': '^5.0.0',
'@testing-library/react': '^11.0.0'
},
'17.x': {
'react-dom': '^17.0.0',
'react-router-dom': '^5.0.0 || ^6.0.0',
'@testing-library/react': '^12.0.0'
},
'18.x': {
'react-dom': '^18.0.0',
'react-router-dom': '^6.0.0',
'@testing-library/react': '^13.0.0'
}
}
};
function checkCompatibility(packages) {
// マトリックスに対してパッケージバージョンを検証
}
# 1. 現在のバージョンを特定
npm list --depth=0
# 2. 破壊的変更を確認
# CHANGELOG.mdとMIGRATION.mdを読む
# 3. アップグレード計画を作成
echo "アップグレード順序:
1. TypeScript
2. React
3. React Router
4. テストライブラリ
5. ビルドツール" > UPGRADE_PLAN.md
# すべてを一度にアップグレードしない！
# ステップ1: TypeScriptを更新
npm install typescript@latest
# テスト
npm run test
npm run build
# ステップ2: Reactを更新（一度に1つのメジャーバージョン）
npm install react@17 react-dom@17
# 再度テスト
npm run test
# ステップ3: 他のパッケージを続ける
npm install react-router-dom@6
# 以下同様...
// tests/compatibility.test.js
describe('Dependency Compatibility', () => {
it('should have compatible React versions', () => {
const reactVersion = require('react/package.json').version;
const reactDomVersion = require('react-dom/package.json').version;
expect(reactVersion).toBe(reactDomVersion);
});
it('should not have peer dependency warnings', () => {
// npm lsを実行して警告を確認
});
});
# changelogパーサーを使用
npx changelog-parser react 16.0.0 17.0.0
# または手動で確認
curl https://raw.githubusercontent.com/facebook/react/main/CHANGELOG.md
# Reactアップグレードcodemods
npx react-codeshift <transform> <path>
# 例: ライフサイクルメソッドを更新
npx react-codeshift \
--parser tsx \
--transform react-codeshift/transforms/rename-unsafe-lifecycles.js \
src/
// migration-script.js
const fs = require('fs');
const glob = require('glob');
glob('src/**/*.tsx', (err, files) => {
files.forEach(file => {
let content = fs.readFileSync(file, 'utf8');
// 古いAPIを新しいAPIに置き換え
content = content.replace(
/componentWillMount/g,
'UNSAFE_componentWillMount'
);
// インポートを更新
content = content.replace(
/import { Component } from 'react'/g,
"import React, { Component } from 'react'"
);
fs.writeFileSync(file, content);
});
});
// アップグレード前後でテストが合格することを確認
npm run test
// 必要に応じてテストユーティリティを更新
npm install @testing-library/react@latest
// tests/integration/app.test.js
describe('App Integration', () => {
it('should render without crashing', () => {
render(<App />);
});
it('should handle navigation', () => {
const { getByText } = render(<App />);
fireEvent.click(getByText('Navigate'));
expect(screen.getByText('New Page')).toBeInTheDocument();
});
});
// visual-regression.test.js
describe('Visual Regression', () => {
it('should match snapshot', () => {
const { container } = render(<App />);
expect(container.firstChild).toMatchSnapshot();
});
});
// cypress/e2e/app.cy.js
describe('E2E Tests', () => {
it('should complete user flow', () => {
cy.visit('/');
cy.get('[data-testid="login"]').click();
cy.get('input[name="email"]').type('user@example.com');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});
// renovate.json
{
"extends": ["config:base"],
"packageRules": [
{
"matchUpdateTypes": ["minor", "patch"],
"automerge": true
},
{
"matchUpdateTypes": ["major"],
"automerge": false,
"labels": ["major-update"]
}
],
"schedule": ["before 3am on Monday"],
"timezone": "America/New_York"
}
# .github/dependabot.yml
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
open-pull-requests-limit: 5
reviewers:
- "team-leads"
commit-message:
prefix: "chore"
include: "scope"
// rollback.sh
#!/bin/bash
# 現在の状態を保存
git stash
git checkout -b upgrade-branch
# アップグレードを試行
npm install package@latest
# テストを実行
if npm run test; then
echo "Upgrade successful"
git add package.json package-lock.json
git commit -m "chore: upgrade package"
else
echo "Upgrade failed, rolling back"
git checkout main
git branch -D upgrade-branch
npm install # package-lock.jsonから復元
fi
# npm
npm install --package-lock-only # ロックファイルのみ更新
npm ci # ロックファイルからクリーンインストール
# yarn
yarn install --frozen-lockfile # CIモード
yarn upgrade-interactive # インタラクティブアップグレード
# npm 7+: 厳格なピア依存関係
npm install --legacy-peer-deps # ピア依存関係を無視
# npm 8+: ピア依存関係をオーバーライド
npm install --force
# すべてのワークスペースパッケージを更新
npm install --workspaces
# 特定のワークスペースを更新
npm install package@latest --workspace=packages/app
アップグレード前:
- [ ] 現在の依存関係バージョンをレビュー
- [ ] 破壊的変更のためにchangelogを読む
- [ ] フィーチャーブランチを作成
- [ ] 現在の状態をバックアップ（git tag）
- [ ] 完全なテストスイートを実行（ベースライン）
アップグレード中:
- [ ] 一度に1つの依存関係をアップグレード
- [ ] ピア依存関係を更新
- [ ] TypeScriptエラーを修正
- [ ] 必要に応じてテストを更新
- [ ] 各アップグレード後にテストスイートを実行
- [ ] バンドルサイズへの影響を確認
アップグレード後:
- [ ] 完全なリグレッションテスト
- [ ] パフォーマンステスト
- [ ] ドキュメントを更新
- [ ] ステージングにデプロイ
- [ ] エラーを監視
- [ ] 本番環境にデプロイ