Manages major dependency version upgrades with compatibility analysis, staged rollouts, and comprehensive testing. Use this for framework version upgrades, major dependency updates, or to manage breaking changes in libraries.
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エラーを修正
- [ ] 必要に応じてテストを更新
- [ ] 各アップグレード後にテストスイートを実行
- [ ] バンドルサイズへの影響を確認
アップグレード後:
- [ ] 完全なリグレッションテスト
- [ ] パフォーマンステスト
- [ ] ドキュメントを更新
- [ ] ステージングにデプロイ
- [ ] エラーを監視
- [ ] 本番環境にデプロイ
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer