const name = '太郎';
const age = 25;

// 従来の文字列連結
const oldStyle = '名前: ' + name + '、年齢: ' + age + '歳';

// テンプレートリテラル
const newStyle = `名前: ${name}、年齢: ${age}歳`;

// 式の埋め込み（計算や関数呼び出しもOK）
const msg = `来年は${age + 1}歳です`;
const upper = `大文字: ${name.toUpperCase()}`;

// 従来の方法（\n で改行）
const oldHtml = '<div>\n  <h1>タイトル</h1>\n  <p>本文</p>\n</div>';

// テンプレートリテラル（そのまま改行）
const newHtml = `<div>
  <h1>タイトル</h1>
  <p>本文</p>
</div>`;

// 配列から動的にリスト生成
const items = ['りんご', 'バナナ', 'みかん'];
const list = `<ul>
  ${items.map(item => `<li>${item}</li>`).join('\n  ')}
</ul>`;

// タグ関数の定義
function escapeHtml(strings, ...values) {
  const escape = (str) => String(str)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');

  return strings.reduce((result, str, i) => {
    return result + str + (i < values.length ? escape(values[i]) : '');
  }, '');
}

// タグ付きテンプレートとして使用
const userInput = '<script>alert("XSS")</script>';
const safe = escapeHtml`<p>ユーザー入力: ${userInput}</p>`;
// "<p>ユーザー入力: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</p>"

const user = {
  name: '太郎',
  address: {
    city: '東京',
    zip: '100-0001'
  }
};

// 従来の安全なアクセス（冗長）
const city1 = user && user.address && user.address.city;

// オプショナルチェーニング（簡潔）
const city2 = user?.address?.city;  // "東京"

// 存在しないプロパティ → undefined（エラーにならない）
const country = user?.address?.country;  // undefined

// user が null でも安全
const nullUser = null;
const name = nullUser?.name;  // undefined（TypeError にならない）

const obj = {
  greet() { return 'こんにちは'; },
  items: ['a', 'b', 'c']
};

// メソッドの安全な呼び出し
obj.greet?.();           // "こんにちは"
obj.nonExistent?.();     // undefined（エラーにならない）

// 配列要素の安全なアクセス
obj.items?.[0];          // "a"
obj.items?.[10];         // undefined
obj.nothing?.[0];        // undefined

// delete と組み合わせ
delete user?.address?.zip;  // 安全に削除

// APIレスポンスの安全な読み取り
async function getUserCity(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();

  // data.user が存在しない、address が null でも安全
  const city = data?.user?.address?.city ?? '不明';
  const phone = data?.user?.contacts?.find(c => c.type === 'phone')?.number;

  return { city, phone };
}

// DOM操作での安全なアクセス
const value = document.querySelector('#myInput')?.value ?? '';
const text = document.querySelector('.content')?.textContent?.trim();

// || は falsy な値（0, '', false, NaN）でも右辺を返す
0 || 10;          // 10（0 は falsy）
'' || 'default';  // "default"（空文字は falsy）
false || true;    // true（false は falsy）

// ?? は null/undefined のみ右辺を返す
0 ?? 10;          // 0（0 はそのまま）
'' ?? 'default';  // ""（空文字はそのまま）
false ?? true;    // false（false はそのまま）
null ?? 10;       // 10
undefined ?? 10;  // 10

// ページネーション — 0ページ目を許可したい
function getPage(params) {
  // || だと page=0 のとき 1 になってしまう
  const page = params.page || 1;   // page=0 → 1（バグ！）
  const page2 = params.page ?? 1;  // page=0 → 0（正しい）
  return page2;
}

// 音量設定 — 0（ミュート）を許可
const volume = userSettings.volume ?? 50;  // 未設定なら50、0ならそのまま

// フラグ設定 — false を有効な値として扱う
const darkMode = config.darkMode ?? false;

// オプショナルチェーニングとの組み合わせ
const city = user?.address?.city ?? '未設定';
const count = response?.data?.items?.length ?? 0;

// ??= — null/undefined のときだけ代入
let a = null;
a ??= 10;       // a は 10
let b = 0;
b ??= 10;       // b は 0（0 は null でも undefined でもない）

// ||= — falsy のとき代入
let c = '';
c ||= 'default'; // c は "default"
let d = 0;
d ||= 10;        // d は 10

// &&= — truthy のとき代入
let e = 'hello';
e &&= 'world';  // e は "world"
let f = '';
f &&= 'world';  // f は ""（空文字は falsy なので代入されない）

// パターン1: デフォルト値の設定
function initConfig(options) {
  options.timeout ??= 3000;
  options.retries ??= 3;
  options.baseURL ??= 'https://api.example.com';
  return options;
}
initConfig({ timeout: 5000 });
// { timeout: 5000, retries: 3, baseURL: "https://api.example.com" }

// パターン2: キャッシュの遅延初期化
class DataService {
  #cache = null;

  getCache() {
    // キャッシュが null のときだけ生成
    this.#cache ??= this.#buildCache();
    return this.#cache;
  }

  #buildCache() {
    console.log('キャッシュ構築中...');
    return new Map();
  }
}

// パターン3: オブジェクトのプロパティ初期化
const stats = {};
for (const item of items) {
  stats[item.category] ??= { count: 0, total: 0 };
  stats[item.category].count += 1;
  stats[item.category].total += item.price;
}

// パターン4: DOM要素の表示切り替え
element.textContent ||= '（データなし）';  // 空文字ならデフォルト表示

// ネストした分割代入 + リネーム + デフォルト値
const response = {
  data: {
    user: { name: '太郎', age: 25 },
    meta: { page: 1 }
  },
  status: 200
};

const {
  data: {
    user: { name: userName, age = 0 },  // リネーム + デフォルト値
    meta: { page, total = 100 }         // デフォルト値
  },
  status
} = response;

console.log(userName); // "太郎"
console.log(age);      // 25
console.log(total);    // 100（response に total がないのでデフォルト値）
console.log(status);   // 200

// スキップと残余要素
const [first, , third, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(third); // 3
console.log(rest);  // [4, 5]

// 変数のスワップ
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);  // 2, 1

// 関数の戻り値から必要な値だけ取得
function getMinMax(arr) {
  return [Math.min(...arr), Math.max(...arr)];
}
const [min, max] = getMinMax([3, 1, 4, 1, 5]);
console.log(min, max); // 1, 5

// ネストした配列
const [[a1, a2], [b1, b2]] = [[1, 2], [3, 4]];
console.log(a1, b2); // 1, 4

// オプション引数のパターン
function createUser({
  name,
  age = 20,
  role = 'user',
  address: { city = '東京', zip } = {}  // ネスト + デフォルト
} = {}) {  // 引数自体のデフォルト
  return { name, age, role, city, zip };
}

createUser({ name: '太郎' });
// { name: "太郎", age: 20, role: "user", city: "東京", zip: undefined }

createUser({ name: '花子', address: { city: '大阪', zip: '530-0001' } });
// { name: "花子", age: 20, role: "user", city: "大阪", zip: "530-0001" }

createUser();
// { name: undefined, age: 20, role: "user", city: "東京", zip: undefined }

// 配列パラメータ
function sum([a, b, ...rest]) {
  return a + b + rest.reduce((s, n) => s + n, 0);
}
sum([1, 2, 3, 4]); // 10

// APIレスポンスから必要なデータだけ抽出
async function fetchUsers() {
  const response = await fetch('/api/users');
  const {
    data: users = [],
    meta: { totalCount = 0, currentPage = 1 } = {}
  } = await response.json();

  return { users, totalCount, currentPage };
}

// イベントオブジェクトから抽出
document.addEventListener('click', ({
  target,
  clientX: x,
  clientY: y,
  shiftKey
}) => {
  console.log(`クリック: (${x}, ${y}) shift=${shiftKey}`);
  console.log(`要素: ${target.tagName}`);
});

const arr = ['a', 'b', 'c'];

// for...in — インデックス（キー）が返る
for (const key in arr) {
  console.log(key);    // "0", "1", "2"（文字列！）
  console.log(typeof key); // "string"
}

// for...of — 値が返る
for (const value of arr) {
  console.log(value);  // "a", "b", "c"
}

// 落とし穴1: プロトタイプチェーンのプロパティも列挙される
Array.prototype.customMethod = function() {};
const arr = ['a', 'b'];

for (const key in arr) {
  console.log(key);  // "0", "1", "customMethod" ← 意図しないプロパティ！
}

// 対策: hasOwnProperty でフィルタリング
for (const key in arr) {
  if (arr.hasOwnProperty(key)) {
    console.log(key);  // "0", "1"
  }
}

// 落とし穴2: 順序が保証されない（整数キー以外）
const obj = { b: 2, a: 1, 10: 'ten', 2: 'two' };
for (const key in obj) {
  console.log(key);  // "2", "10", "b", "a"（整数キーが先、追加順ではない）
}

// 文字列の反復（サロゲートペアも正しく処理）
for (const char of '𩸽を食べる') {
  console.log(char);  // "𩸽", "を", "食", "べ", "る"
}

// Map の反復
const map = new Map([['name', '太郎'], ['age', 25]]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Set の反復
const set = new Set([1, 2, 3, 2, 1]);
for (const value of set) {
  console.log(value);  // 1, 2, 3（重複なし）
}

// entries() でインデックスも取得
const fruits = ['りんご', 'バナナ', 'みかん'];
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

// NodeList の反復（DOM）
for (const el of document.querySelectorAll('.item')) {
  el.classList.add('active');
}

const config = { host: 'localhost', port: 3000, debug: true };

// Object.entries() を使う
for (const [key, value] of Object.entries(config)) {
  console.log(`${key} = ${value}`);
}

// Object.keys() — キーだけ
for (const key of Object.keys(config)) {
  console.log(key);
}

// Object.values() — 値だけ
for (const value of Object.values(config)) {
  console.log(value);
}