🔃

コードを書き換えたときのバージョン管理「メジャー」を変更する主な例（`MAJOR.MINOR.PATCH`）

に公開
npm
update
version
commit
package.json
tech

🍄 メジャーバージョンとは？

メジャー（major）バージョンは、セマンティックバージョニング（MAJOR.MINOR.PATCH）における最も大きな単位で、互換性を壊す変更を含むときに使用。既存の利用者のコードが動かなくなる可能性があるため、慎重な判断と明確な告知が必要。基本的には新しい機能の追加やデザインの変更など大規模に構造が変わったりするもの。コードだけでみるとAPIや、新しい関数や型など追加される

新しい機能を追加する → 既存のコードは壊れる？
└─ Yes → メジャー
└─ No → マイナーの例
　　　　→パッチの例

🌿 メジャーの目的

  • 関数や API の仕様変更（引数の順番や型の変更）
  • コンポーネントの構造変更（props の必須化や削除）
  • データ構造の変更（フィールド名の変更や削除）
  • 挙動の変更（デフォルト値や処理順の変更）
  • 廃止された機能の削除

🧭 メジャーの特徴

特性 説明
⚠️ 互換性が壊れる 既存のコードがそのままでは動かなくなる可能性がある
📢 告知が重要 changelog や README、リリースノートで明確に変更点を伝える必要がある
🧪 テストが必須 影響範囲が広いため、回帰テストや統合テストを徹底する必要がある
🧹 移行ガイド推奨 利用者がスムーズに移行できるよう、変更点と対応方法を記載する

🛠️ npm でのメジャー更新

npm version major

このコマンドを使うと、package.json のバージョンが 1.2.3 → 2.0.0 のように更新され、Git タグやコミットも自動で作成。

🍄 メジャーバージョン修正例

1. 🧭 関数・API の仕様変更

目的：関数の引数や戻り値の構造を変更することで、既存の呼び出しコードが壊れる。

例1：引数の順番変更

// Before
function calculate(price, taxRate) { ... }

// After
function calculate(taxRate, price) { ... } // 呼び出し側が要修正

例2：戻り値の構造変更

// Before
return { name: "Taka" };

// After
return { user: { name: "Taka" } }; // 呼び出し側の解析が変わる

例3：関数の削除

// Before
export function legacyLogin() { ... }

// After
// legacyLogin は削除された → 呼び出し側がエラーになる

2. 🧱 UI コンポーネントの構造変更

目的：コンポーネントの props や構成を変更することで、既存の使用方法が壊れる。

例1：props の必須化

// Before
<MyCard />

// After
<MyCard title="必須です" /> // title が必須になった

例2：コンポーネント名の変更

// Before
<Modal />

// After
<Dialog /> // 呼び出し側の修正が必要

例3：props の削除

// Before
<Button size="small" />

// After
<Button /> // size は廃止された

3. 🧪 データ構造・型の変更

目的：型やフィールド名の変更により、既存のデータ処理が壊れる。

例1：型の変更（string → number）

// Before
type User = { age: string };

// After
type User = { age: number }; // 既存のデータが不一致になる可能性

例2：フィールド名の変更

// Before
{
  "username": "taka"
}

// After
{
  "user_name": "taka"
}

例3：フィールドの削除

// Before
{
  "id": 1,
  "name": "Taka",
  "nickname": "TK"
}

// After
{
  "id": 1,
  "name": "Taka"
} // nickname が削除された

4. ⚙️ 挙動・デフォルトの変更

目的：関数やコンポーネントのデフォルトの動作が変わることで、見た目や処理結果が変化する。

例1：ソート順の変更

// Before
sortItems(items); // 昇順

// After
sortItems(items); // 降順に変更された

例2：非表示 → 表示に変更

// Before
{isAdmin && <AdminPanel />} // デフォルト false

// After
{!isHidden && <AdminPanel />} // 表示条件が逆転

5. 🌐 外部インターフェースの変更（URL・イベント）

目的：API エンドポイントやイベント名の変更により、外部との接続が壊れる。

例1：API URL の変更

// Before
fetch("/api/user");

// After
fetch("/v2/user"); // URL が変わると呼び出し側が壊れる

例2：イベント名の変更

// Before
element.addEventListener("onOpen", handler);

// After
element.addEventListener("open", handler); // イベント名が変わる

Discussion