TypeScriptクラス(class)入門！定義・継承と使わない設計

// クラスの宣言
class UserProfile {
  name: string = "名無し";
}

// 1. クラスを「型」として利用する（インスタンスの型付け）
// user変数はUserProfileクラスのインスタンスしか受け付けない
const user: UserProfile = new UserProfile();
user.name = "Taro";

// 2. 関数の引数にクラスの型を指定する
function printUser(u: UserProfile) {
  console.log(`ユーザー名: ${u.name}`);
}

printUser(user); // 正常に動作する

// ❌ エラーになる例（オブジェクトの形が同じでも、明示的な型指定などで怒られる場合がある）
// const fakeUser = { name: "Jiro" }; 
// 厳密にはTypeScriptの構造的部分型により通ることもありますが、
// instanceofなどで判定するロジックがある場合はバグの原因になります。

class Product {
  // ❌ 悪い例：初期化していないとTSに怒られる
  // title: string; 

  // ⭕️ 基本的な書き方（宣言とコンストラクタでの初期化）
  id: number;
  
  constructor(id: number) {
    this.id = id;
  }
}

// ✨ 実務でよく使うベストプラクティス（省略記法）
class PremiumProduct {
  // コンストラクタの引数に public や private をつけるだけで、
  // プロパティの宣言と代入を自動でやってくれる
  constructor(
    public id: number,
    public title: string,
    private price: number // 外部からはアクセスできない変数
  ) {}

  showDetails() {
    // クラス内部からは private 変数にアクセス可能
    console.log(`${this.title} (ID: ${this.id}) - ¥${this.price}`);
  }
}

const item = new PremiumProduct(101, "高級キーボード", 15000);
console.log(item.title); // "高級キーボード"
// console.log(item.price); // 🚨 エラー: price は private プロパティです

class ConfigManager {
  // typescript クラス 定数 (static と readonly の組み合わせ)
  // インスタンス化しなくても ConfigManager.MAX_USERS でアクセスでき、書き換え不可
  public static readonly MAX_USERS: number = 100;

  // インスタンスごとの読み取り専用プロパティ
  public readonly appName: string;

  constructor(appName: string) {
    this.appName = appName;
    // this.appName = "変更"; // 🚨 コンストラクタ以降は再代入不可
  }

  // 一般的なメソッドの定義（this抜けのリスクあり）
  printAppInfo() {
    console.log(`アプリ名: ${this.appName}`);
  }

  // ✨ アロー関数を使ったメソッド定義（thisが固定されるため安全）
  safePrintAppInfo = () => {
    console.log(`[安全] アプリ名: ${this.appName}`);
  }
}

console.log(`最大ユーザー数: ${ConfigManager.MAX_USERS}`);

const config = new ConfigManager("MyAwesomeApp");

// setTimeoutにコールバックとして渡すテスト
// 通常のメソッドは実行時に this が失われ、this.appName が undefined になる
setTimeout(config.printAppInfo, 100); 

// アロー関数で定義したメソッドは this が保持されるため安全に動作する
setTimeout(config.safePrintAppInfo, 100);

// 親クラス（Base Class）
class Animal {
  constructor(public name: string) {}

  makeSound(): void {
    console.log(`${this.name}が鳴いています...`);
  }
}

// 子クラス（Derived Class）: Animalを継承
class Dog extends Animal {
  public breed: string;

  constructor(name: string, breed: string) {
    // 🚨 注意: 子クラスでコンストラクタを持つ場合、必ず最初に super() を呼ぶ！
    super(name); 
    this.breed = breed;
  }

  // 親クラスのメソッドをオーバーライド（独自の実装に上書き）
  makeSound(): void {
    console.log(`${this.name}（${this.breed}）: ワンワン！`);
  }

  // 子クラス独自のメソッド
  fetchItem(item: string): void {
    console.log(`${this.name}が${item}を取ってきました。`);
  }
}

const myDog = new Dog("ポチ", "柴犬");
myDog.makeSound();     // "ポチ（柴犬）: ワンワン！" (オーバーライドされた処理)
myDog.fetchItem("ボール"); // "ポチがボールを取ってきました。"

// 抽象クラス（インスタンス化不可）
abstract class PaymentProcessor {
  constructor(protected amount: number) {}

  // ⭕️ 共通処理（子クラスでそのまま使える）
  printReceipt(): void {
    console.log(`領収書: ¥${this.amount} のお支払いを完了しました。`);
  }

  // ⭕️ 抽象メソッド（中身は書かず、子クラスでの実装を強制する）
  abstract processPayment(): void;
}

// ❌ エラー: 抽象クラスは直接インスタンス化できない
// const processor = new PaymentProcessor(1000); 

// --- 子クラスの実装 ---

class CreditCardPayment extends PaymentProcessor {
  // 🚨 必須: 親クラスの abstract メソッドを実装しないとコンパイルエラーになる
  processPayment(): void {
    console.log(`クレジットカードで ¥${this.amount} の決済処理を行っています...`);
    // クレジットカード特有のAPI通信処理などがここに入る
  }
}

class PayPayPayment extends PaymentProcessor {
  // 🚨 必須: 同様に独自の実装を行う
  processPayment(): void {
    console.log(`PayPayで ¥${this.amount} の決済処理を行っています...`);
    // PayPay特有のAPI通信処理などがここに入る
  }
}

// 実際の利用シーン
const payment1 = new CreditCardPayment(5000);
payment1.processPayment(); // "クレジットカードで ¥5000 の決済処理を行っています..."
payment1.printReceipt();   // "領収書: ¥5000 のお支払いを完了しました。" (親の共通処理)

const payment2 = new PayPayPayment(1200);
payment2.processPayment(); // "PayPayで ¥1200 の決済処理を行っています..."
payment2.printReceipt();   // "領収書: ¥1200 のお支払いを完了しました。"

class ProductService {
  // ⭕️ 安全な実装：Minifyの影響を受けない明示的な識別子を定義する
  public static readonly CLASS_NAME = 'ProductService';
  
  // インスタンスからもアクセスできるようにする場合は public readonly を使う
  public readonly typeName = 'ProductService';

  fetchProduct() {
    // 開発環境のログなど、圧縮されてもシステムが壊れない用途にのみ使用可能
    console.log(`[${this.constructor.name}] 商品データを取得しています...`);
  }
}

class OrderService {}

const productService = new ProductService();
const orderService = new OrderService();

// --- 1. 一般的なクラス名の取得（typescript クラス 名 取得） ---
console.log(productService.constructor.name); // 開発環境: "ProductService", 本番環境: "a" などの可能性あり
console.log(orderService.constructor.name);   // 開発環境: "OrderService", 本番環境: "b" などの可能性あり

// --- 2. ❌ 危険な実装（本番環境で動かなくなる） ---
function processServiceBad(service: any) {
  if (service.constructor.name === 'ProductService') {
    console.log("商品サービスの処理を実行");
  }
}
// 本番ビルド後、service.constructor.name が "a" になると上の分岐に一生入らない

// --- 3. ⭕️ 安全な実装（実務でのベストプラクティス） ---
function processServiceGood(service: any) {
  // 静的に定義した識別子、または instanceof を使って判定する
  if (service instanceof ProductService) {
    console.log("商品サービスの処理を実行（安全）");
  }
  
  // ログ出力などで名前が欲しい場合も、明示的に定義したプロパティを使う
  if (service.typeName) {
    console.log(`実行クラス: ${service.typeName}`);
  }
}

productService.fetchProduct();
processServiceGood(productService);

// ❌ 悪い例：他言語の癖で、無意味なユーティリティクラスを作ってしまう
class DateFormatter {
  // すべてがstaticで状態を持たないなら、クラスにする意味がない
  static formatToJp(date: Date): string {
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  }
}
// 呼び出し：DateFormatter.formatToJp(new Date());


// ⭕️ 良い例（モダンなTS）：個別の関数として定義し、直接エクスポートする
// utils/date.ts のような別ファイルに定義するイメージ
export function formatToJp(date: Date): string {
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
}
// 呼び出し：formatToJp(new Date());
// ※使う関数だけを import するため、Tree-shakingが効きやすい！

// --- 従来のクラスベースのアプローチ（状態と振る舞いが同居） ---
class UserAccount {
  constructor(public id: number, public name: string, public isPremium: boolean) {}

  upgrade() {
    this.isPremium = true; // 🚨 自身の状態を直接書き換える（ミュータブル）
  }
}

const user1 = new UserAccount(1, "Taro", false);
user1.upgrade(); 


// --- ✨ モダンな関数型アプローチ（Typeと関数の分離） ---

// 1. データ構造は単なるType（またはInterface）で定義する
type User = {
  readonly id: number;
  readonly name: string;
  readonly isPremium: boolean;
};

// 2. ユーザーを生成するファクトリー関数
function createUser(id: number, name: string): User {
  return { id, name, isPremium: false };
}

// 3. データを操作する関数（🚨 元のデータを書き換えず、新しいデータを返す）
function upgradeUser(user: User): User {
  // ❌ 悪い例：user.isPremium = true; return user;
  
  // ⭕️ 良い例：スプレッド構文で元のデータをコピーしつつ、必要な箇所だけ上書きした「新オブジェクト」を返す
  return {
    ...user,
    isPremium: true
  };
}

// 実際の利用例
const baseUser = createUser(2, "Jiro");

// upgradeUser関数にデータを渡し、アップグレードされた「新しいユーザーデータ」を受け取る
const upgradedUser = upgradeUser(baseUser);

console.log(baseUser.isPremium);    // false (元のデータは保たれている：安全！)
console.log(upgradedUser.isPremium); // true  (新しいデータ)