【TypeScript】はてな2つ(??)演算子の使い方と||との違いを解説

// 数値の例
const score = 0;
console.log(score || 100);  // 100（0はfalsyなので右辺が返される）
console.log(score ?? 100);  // 0（0はnullでもundefinedでもないので左辺が返される）

// 文字列の例
const message = '';
console.log(message || 'デフォルト');  // 'デフォルト'（空文字はfalsyなので右辺が返される）
console.log(message ?? 'デフォルト');  // ''（空文字はnullでもundefinedでもないので左辺が返される）

// ブール値の例
const flag = false;
console.log(flag || true);   // true（falseはfalsyなので右辺が返される）
console.log(flag ?? true);   // false（falseはnullでもundefinedでもないので左辺が返される）

左辺 ?? 右辺

// 基本的な使用例
let userName: string | null = null;
let displayName = userName ?? 'ゲスト';
console.log(displayName); // 'ゲスト'

userName = '山田太郎';
displayName = userName ?? 'ゲスト';
console.log(displayName); // '山田太郎'

// 関数の引数でのデフォルト値設定
function greet(name?: string) {
  const actualName = name ?? '名無し';
  return `こんにちは、${actualName}さん！`;
}

console.log(greet());        // 'こんにちは、名無しさん！'
console.log(greet('佐藤'));  // 'こんにちは、佐藤さん！'

// オブジェクトのプロパティでの使用
interface User {
  id: number;
  name: string;
  email?: string;
}

const user: User = {
  id: 1,
  name: '田中',
  // email は省略
};

const userEmail = user.email ?? 'メールアドレス未設定';
console.log(userEmail); // 'メールアドレス未設定'

interface ApiResponse {
  id: number;
  name: string;
  description?: string;
  imageUrl?: string;
  tags?: string[];
}

function processApiData(data: ApiResponse) {
  return {
    id: data.id,
    name: data.name,
    description: data.description ?? '説明がありません',
    imageUrl: data.imageUrl ?? '/images/default.png',
    tagCount: (data.tags ?? []).length
  };
}

// 使用例
const apiData: ApiResponse = {
  id: 1,
  name: '商品A'
  // description, imageUrl, tags は未定義
};

const processed = processApiData(apiData);
console.log(processed);
// {
//   id: 1,
//   name: '商品A',
//   description: '説明がありません',
//   imageUrl: '/images/default.png',
//   tagCount: 0
// }

interface AppConfig {
  theme?: 'light' | 'dark';
  language?: 'ja' | 'en';
  pageSize?: number;
  autoSave?: boolean;
}

function createConfig(userConfig: AppConfig = {}): Required<AppConfig> {
  return {
    theme: userConfig.theme ?? 'light',
    language: userConfig.language ?? 'ja',
    pageSize: userConfig.pageSize ?? 20,
    autoSave: userConfig.autoSave ?? true
  };
}

// 使用例
const config1 = createConfig();
console.log(config1);
// { theme: 'light', language: 'ja', pageSize: 20, autoSave: true }

const config2 = createConfig({ theme: 'dark', pageSize: 50 });
console.log(config2);
// { theme: 'dark', language: 'ja', pageSize: 50, autoSave: true }

// 環境変数の安全な取得
const port = process.env.PORT ?? '3000';
const dbUrl = process.env.DATABASE_URL ?? 'mongodb://localhost:27017/myapp';
const logLevel = process.env.LOG_LEVEL ?? 'info';

console.log(`サーバーはポート${port}で起動します`);
console.log(`データベースURL: ${dbUrl}`);
console.log(`ログレベル: ${logLevel}`);

interface Address {
  prefecture: string;
  city: string;
  street?: string;
}

interface User {
  id: number;
  name: string;
  address?: Address;
}

const user: User = {
  id: 1,
  name: '鈴木',
  // address は未定義
};

// オプショナルチェーンと??演算子の組み合わせ
const prefecture = user.address?.prefecture ?? '都道府県不明';
const city = user.address?.city ?? '市区町村不明';
const street = user.address?.street ?? '番地不明';

console.log(`住所: ${prefecture} ${city} ${street}`);
// '住所: 都道府県不明 市区町村不明 番地不明'

// より深いネストの場合
interface Company {
  name: string;
  address?: Address;
}

interface Employee {
  name: string;
  company?: Company;
}

const employee: Employee = {
  name: '高橋'
  // company は未定義
};

const companyCity = employee.company?.address?.city ?? '勤務地不明';
console.log(`勤務地: ${companyCity}`); // '勤務地: 勤務地不明'

function expensiveCalculation() {
  console.log('重い計算が実行されました');
  return 100;
}

const value1 = 42;
const result1 = value1 ?? expensiveCalculation();
// 'expensiveCalculation'は呼び出されず、ログも出力されない

const value2 = null;
const result2 = value2 ?? expensiveCalculation();
// 'expensiveCalculation'が呼び出され、ログが出力される

// 推奨されない書き方
const result1 = a && b ?? c; // エラーになる可能性がある

// 推奨される書き方
const result2 = (a && b) ?? c;
const result3 = a && (b ?? c);

// これはSyntaxErrorになる
// const result = a || b ?? c;

// 正しい書き方
const result1 = (a || b) ?? c;
const result2 = a || (b ?? c);

// ??= 演算子の使用例
let config: { name?: string; theme?: string } = {};

// 以下の2行は同じ意味
config.name = config.name ?? 'デフォルト名';
config.name ??= 'デフォルト名';

// オブジェクトの初期化に便利
function initializeUser(user: Partial<User>) {
  user.name ??= '名無し';
  user.email ??= 'no-email@example.com';
  user.role ??= 'guest';

  return user as User;
}