.js

/*
 * Tree Shaking（ツリーシェイキング）とは？
 *ビルドツール（webpack, Rollup, Viteなど）が、「使われていないコード」を自動的に削除する最適化アプローチ。
 * utils.js に 10個の関数があるとして、そのうち2つしか使わなかった場合、ビルド時に残りの8個は削除される。
 */

// ========================================
// Classを使った場合
// ========================================
class UserService {
  getUserName(user) {
    return user.name;
  }

  getUserEmail(user) {
    return user.email;
  }

  getUserAge(user) {
    return user.age;
  }

  formatUserProfile(user) {
    return `${user.name} (${user.age})`;
  }
}

// インスタンス化すると全メソッドがバンドルに含まれる
const service = new UserService();
console.log(service.getUserName({ name: "太郎" }));
// → getUserEmail, getUserAge, formatUserProfile も
//   使っていないのにバンドルされる

// ========================================
// 関数を使った場合
// ========================================
export function getUserName(user) {
  return user.name;
}

export function getUserEmail(user) {
  return user.email;
}

export function getUserAge(user) {
  return user.age;
}

export function formatUserProfile(user) {
  return `${user.name} (${user.age})`;
}

// 使った関数だけがバンドルされる
console.log(getUserName({ name: "太郎" }));
// → getUserName のみバンドルされる
//   (getUserEmail, getUserAge, formatUserProfile は削除される)

// ========================================
// オブジェクトを使った場合
// ========================================
const userUtils = {
  getUserName(user) {
    return user.name;
  },

  getUserEmail(user) {
    return user.email;
  },

  getUserAge(user) {
    return user.age;
  },

  formatUserProfile(user) {
    return `${user.name} (${user.age})`;
  },
};

// オブジェクト全体が参照されるため全メソッドがバンドルされる
console.log(userUtils.getUserName({ name: "太郎" }));
// → クラスと同様、全メソッドがバンドルされる