🔃

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

に公開
npm
update
version
package.json
miner
tech

🍄 マイナーバージョンとは？

マイナー（minor）バージョンは、セマンティックバージョニング（MAJOR.MINOR.PATCH）における中間の単位で、互換性を保ったまま新機能を追加する、、既存の利用者に影響を与えずに新しい可能性を広げるときに使用。既存の機能は壊さず、プロジェクトに新しい可能性を広げる更新。

バージョン管理「パッチ」の例はこちら

🌿 マイナーの目的

  • 新機能の追加：既存の API や UI に新しい機能を加える
  • オプションの拡張：設定や引数の追加など、柔軟性の向上
  • 内部構造の改善：リファクタリングや抽象化による拡張性の強化
  • 非破壊な変更：既存の使用方法に影響を与えない改善

🧭 マイナーの特徴

特性 説明
✅ 互換性あり 既存の機能や API を壊さずに拡張できる
🌱 拡張性重視 新しい使い方やオプションを追加することで、利用範囲が広がる
🧪 テストが重要 新機能が既存の動作に影響しないか、回帰テストや統合テストが必要
📘 履歴が明確 changelog や Git のタグで、追加された機能を記録できる

🛠️ npm でのマイナー更新

npm version minor

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

🌳 例：マイナー更新に該当する変更

  • 新しい API 関数の追加（例：getUserProfile()）
  • UI コンポーネントに新しい props を追加（例：<Button icon="..." />）
  • 設定ファイルに新しいオプションを追加（例：enableCache: true）
  • 内部構造の抽象化（例：共通ロジックの hooks 化）

🍄 マイナーバージョン修正例

これらはすべて「既存の機能を壊さずに、新しい機能や選択肢を追加する」変更

1. 🧩 新機能の追加（非破壊）

目的：既存の機能を壊さずに、新しい機能や API を追加する。

例1：新しい関数の追加

// Before
export function getUser(id) {
  return fetch(`/api/users/${id}`);
}

// After
export function getUser(id) {
  return fetch(`/api/users/${id}`);
}

export function getUserProfile(id) {
  return fetch(`/api/users/${id}/profile`);
}

例2：新しいユーティリティの追加

// Before
export function formatDate(date) { ... }

// After
export function formatDate(date) { ... }
export function formatCurrency(amount) { ... } // 新機能

2. 🎛️ オプション・引数の拡張

目的：関数やコンポーネントに新しい引数やオプションを追加し、柔軟性を高める。

例1：関数にオプション引数を追加

// Before
function greet(name) {
  return `Hello, ${name}`;
}

// After
function greet(name, emoji = "👋") {
  return `${emoji} Hello, ${name}`;
}

例2：オプションオブジェクトの拡張

// Before
function connect({ host }) {
  ...
}

// After
function connect({ host, timeout = 5000 }) {
  ...
}

3. 🧱 UI コンポーネントの拡張

目的：既存の UI コンポーネントに新しい props やバリエーションを追加する。

例1：新しい props の追加

// Before
<Button label="Submit" />

// After
<Button label="Submit" icon="check" />

例2：バリエーションの追加

// Before
<Card title="Info" />

// After
<Card title="Info" variant="outlined" />

4. ⚙️ 設定・構成の拡張

目的：設定ファイルや CLI に新しいオプションやフラグを追加する。

例1：設定ファイルの拡張

// Before
{
  "theme": "light"
}

// After
{
  "theme": "light",
  "enableCache": true
}

例2：CLI フラグの追加

# Before
$ mycli build

# After
$ mycli build --watch

5. 🧪 API・データ構造の拡張

目的：API のレスポンスやデータ構造に新しいフィールドを追加する。

例1：API レスポンスの拡張

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

// After
{
  "id": 1,
  "name": "Taka",
  "avatarUrl": "https://..."
}

例2：翻訳キーの追加

// Before
{
  "submit": "送信"
}

// After
{
  "submit": "送信",
  "cancel": "キャンセル"
}

6. 🧠 内部構造の抽象化・再利用性向上

目的：既存の処理を壊さずに、内部構造を抽象化・再利用しやすくする。

例1：共通ロジックの hooks 化（React）

// Before
function fetchData() {
  const res = await fetch("/api/data");
  return res.json();
}

// After
function useFetchData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(setData);
  }, []);
  return data;
}

例2：ロジックのユーティリティ化

// Before
function submitForm(data) {
  // バリデーション + 送信処理
}

// After
function validate(data) { ... }
function submitForm(data) {
  if (validate(data)) {
    // 送信処理
  }
}

Discussion