読んで、決めて、
書き換える。

console.log('こんにちは、JavaScript');
console.log(1 + 2);
console.log('今日の日付：', new Date().toLocaleDateString('ja-JP'));

const name = '山田';        // 入れ替えない
let count = 0;              // あとで増える

count = count + 1;
count += 1;                 // 同じ意味の短い書き方
console.log(name, count);

// const でも「中身」は変えられる（箱を差し替えられないだけ）
const scores = [10, 20];
scores.push(30);
console.log(scores);

// ブロック { } の外からは見えない
{
  const secret = 'ここだけ';
  console.log(secret);
}
// console.log(secret);  ← ここで使うとエラーになる

const text = 'あいうえお';         // 文字列 string
const price = 1280;               // 数値 number（整数も小数も同じ）
const isOpen = true;              // 真偽値 boolean
const nothing = null;             // 「空」だと明示した状態
let notSet;                       // undefined（まだ入れていない）

const list = ['赤', '青', '緑'];   // 配列 array
const user = { name: '山田', age: 30 };  // オブジェクト object

console.log(typeof text, typeof price, typeof isOpen);
console.log(typeof nothing, typeof notSet);
console.log(list.length, list[0]);
console.log(user.name, user['age']);

// 文字列の中に値を埋め込む（テンプレートリテラル）
console.log(`${user.name}さんは${user.age}歳、商品は${price.toLocaleString()}円`);

// 四則演算
console.log(3 + 4, 10 - 4, 6 * 7);   // 7 6 42
console.log(10 / 3);                 // 3.333…（整数どうしでも小数になる）
console.log(10 % 3);                 // 1（余り）
console.log(2 ** 10);                // 1024（べき乗）

// + は文字列の連結にもなる。数値と混ぜると文字列になってしまう
console.log('合計' + 100, '1' + 1, '1' - 1);   // 合計100 / 11 / 0

// 大小の比較
console.log(2 < 5, 5 > 5, 5 >= 5, 5 <= 4);   // true false true false

// 等しい／等しくない。型まで見るこの 2 つを使う
console.log(1 === 1, 1 === '1');             // true false
console.log(1 !== 2, 1 !== '1');             // true true
console.log(1 == '1', 1 != '1');             // true false ← 型を無視するので危険

// 組み合わせる
const age = 20;
console.log(age >= 18 && age < 65);          // かつ
console.log(age < 18 || age >= 65);          // または
console.log(!(age >= 18));                   // 否定

// 偽とみなされる値（falsy）はこの 6 つだけ
for (const value of [false, 0, '', null, undefined, NaN]) {
  console.log(value, '→', Boolean(value));
}

// ?? は「null か undefined のときだけ」右を使う
const input = 0;
console.log(input || 10);   // 10  ← 0 も偽なので置き換わってしまう
console.log(input ?? 10);   // 0   ← こちらが意図どおり

// ?. は途中が無ければ undefined を返す（エラーで止まらない）
const data = { user: { name: '山田' } };
console.log(data.user?.name);
console.log(data.company?.name);

const score = 78;

if (score >= 90) {
  console.log('優');
} else if (score >= 70) {
  console.log('良');
} else {
  console.log('可');
}

// 短い分岐は三項演算子で 1 行に
console.log(score >= 60 ? '合格' : '不合格');

// 値で分けるなら switch
const day = 'sat';
switch (day) {
  case 'sat':
  case 'sun':
    console.log('休み');
    break;              // break を忘れると次に流れ込む
  default:
    console.log('平日');
}

// 配列を回すなら for...of が読みやすい
for (const fruit of ['りんご', 'みかん']) {
  console.log(fruit);
}

// 回数を数えるなら for
for (let i = 1; i <= 3; i++) {
  if (i === 2) continue;   // この回だけ飛ばす
  console.log(`${i} 回目`);
}

// 番号も欲しいときは entries()
for (const [index, name] of ['A', 'B'].entries()) {
  console.log(index, name);
}

const fruits = ['りんご', 'みかん', 'ぶどう'];

// 1. for 文：番号（添字）を自分で進める。いちばん基本の形
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// 2. for...of：番号が要らないなら、こちらが読みやすい
for (const fruit of fruits) {
  console.log(fruit);
}

// 3. forEach：配列に「1 つずつ処理して」と頼む。2 つめの引数が番号
fruits.forEach((fruit, index) => {
  console.log(`${index + 1} 番目：${fruit}`);
});

// for と for...of は途中で抜けられる
for (const fruit of fruits) {
  if (fruit === 'みかん') break;   // ここで終わり
  console.log('見つける前：', fruit);
}

const items = [
  { name: 'えんぴつ', price: 120, stock: 5 },
  { name: 'ノート', price: 280, stock: 0 },
  { name: '消しゴム', price: 90, stock: 12 }
];

// map：全部を別の形に変える（個数は変わらない）
console.log(items.map((item) => item.name));

// filter：条件に合うものだけ残す
console.log(items.filter((item) => item.stock > 0).map((i) => i.name));

// find：最初の 1 つを探す（無ければ undefined）
console.log(items.find((item) => item.price < 100));

// reduce：ひとつの値にまとめる（合計・最大など）
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log('合計', total);

// some / every：ひとつでも / 全部が
console.log(items.some((i) => i.stock === 0), items.every((i) => i.price > 50));

// 元の配列を壊さない並べ替え（toSorted）
const byPrice = items.toSorted((a, b) => a.price - b.price);
console.log(byPrice.map((i) => i.price), items.map((i) => i.price));

// at(-1) で最後の要素
console.log(['春', '夏', '秋', '冬'].at(-1));

// includes / join / スプレッド
console.log(['赤', '青'].includes('青'), ['赤', '青'].join(' と '));
console.log([...[1, 2], ...[3, 4]]);

const user = { name: '山田', age: 30, city: '大阪' };

// 分割代入：必要なものだけ取り出す
const { name, city } = user;
console.log(name, city);

// 名前を変えて取り出す／既定値を付ける
const { name: userName, country = '日本' } = user;
console.log(userName, country);

// 配列も同じように取り出せる
const [first, second] = ['金', '銀'];
console.log(first, second);

// スプレッドで複製しつつ一部を上書き（元は壊さない）
const updated = { ...user, age: 31 };
console.log(updated, user.age);

// 省略記法：変数名とキー名が同じなら 1 回でよい
const age = 31;
console.log({ name, age });

// 一覧として回す
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}：${value}`);
}
console.log(Object.keys(user), Object.values(user));

// 関数宣言。呼び出しより後ろに書いてもよい（巻き上げ）
function greet(name) {
  return `${name}さん、こんにちは`;
}

// アロー関数。式なので、書いた後でしか使えない
const double = (n) => n * 2;              // { } と return を省略できる
const area = (w, h) => {
  const size = w * h;
  return size;
};

console.log(greet('山田'), double(21), area(3, 4));

// 既定値。渡されなければこれを使う
const tax = (price, rate = 0.1) => Math.round(price * (1 + rate));
console.log(tax(1000), tax(1000, 0.08));

// 残り全部を配列で受け取る
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4));

// 関数を引数に渡せる（これがコールバック）
const twice = (fn, value) => fn(fn(value));
console.log(twice(double, 5));

// 外側の変数を覚えたままの関数（クロージャ）
const makeCounter = () => {
  let count = 0;
  return () => ++count;
};
const next = makeCounter();
console.log(next(), next(), next());

class Cart {
  #items = [];                    // # で始まると外から触れない（プライベート）
  static taxRate = 0.1;           // クラス自体に属する値

  constructor(owner) {            // new したときに 1 度だけ走る
    this.owner = owner;
  }

  add(name, price) {              // メソッド
    this.#items.push({ name, price });
    return this;                  // this を返すと .add().add() とつなげられる
  }

  get count() {                   // ゲッター：() を付けずに読める
    return this.#items.length;
  }

  get total() {
    const sum = this.#items.reduce((a, item) => a + item.price, 0);
    return Math.round(sum * (1 + Cart.taxRate));
  }

  toString() {
    return `${this.owner}のカート：${this.count} 点 / ${this.total} 円`;
  }
}

const cart = new Cart('山田');
cart.add('えんぴつ', 120).add('ノート', 280);
console.log(cart.count, cart.total);
console.log(String(cart));

// 継承：元のクラスを受け継いで、一部だけ変える
class GiftCart extends Cart {
  get total() {
    return super.total + 300;     // 包装代を足す
  }
}

const gift = new GiftCart('鈴木');
gift.add('ノート', 280);
console.log(String(gift));

// 1. 探す（CSS セレクタがそのまま使える）
const title = document.querySelector('#title');
const message = document.querySelector('.message');
const list = document.querySelector('#list');

// 2. 書き換える
title.textContent = 'JavaScript で書き換えた見出し';
message.textContent = `いまは ${new Date().toLocaleTimeString('ja-JP')} です`;

// 3. 作って足す
const fruits = ['りんご', 'みかん', 'ぶどう'];
for (const fruit of fruits) {
  const li = document.createElement('li');
  li.textContent = fruit;
  list.append(li);
}

// 4. クラスと属性
title.classList.add('is-active');
title.dataset.role = 'heading';        // data-role="heading" になる
title.style.color = '#2f80b8';         // 直接スタイルを当てることもできる

// 5. まとめて処理する
for (const li of document.querySelectorAll('#list li')) {
  li.style.fontWeight = '700';
}

// ボタンの動作は次の章で
document.querySelector('#paint').addEventListener('click', () => {
  message.style.backgroundColor = '#eaf2f8';
});

// クリック
const counter = document.querySelector('[data-count]');
let count = 0;

counter.addEventListener('click', () => {
  count += 1;
  counter.textContent = `押した回数：${count}`;
});

// 入力のたびに反応する
const who = document.querySelector('#who');
const hello = document.querySelector('.hello');

who.addEventListener('input', (event) => {
  const name = event.target.value.trim();
  hello.textContent = `こんにちは、${name || 'ゲスト'}さん`;
});

// イベント委譲：親で 1 つだけ受けて、どれが押されたかを調べる
// ボタンが増えても登録し直さなくてよい
document.querySelector('.menu').addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (!button) return;

  hello.style.color = button.dataset.color;
});

// 「あとで終わる処理」を作る
const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

console.log('1. ここが先に動く');

// async を付けた関数の中では await で「終わるまで待つ」と書ける
async function main() {
  const first = await wait(10, 'お茶');
  console.log('3. 届いた：', first);

  // 順番に待つ必要がないものは、まとめて待つほうが速い
  const [a, b] = await Promise.all([wait(10, 'パン'), wait(10, '牛乳')]);
  console.log('4. まとめて：', a, b);

  // 失敗するかもしれない処理は try / catch で囲む
  try {
    await Promise.reject(new Error('通信に失敗しました'));
  } catch (error) {
    console.log('5. 捕まえた：', error.message);
  }
}

main();
console.log('2. 待たずにここまで進む');

const people = [
  { name: '山田', team: '営業' },
  { name: '鈴木', team: '開発' },
  { name: '佐藤', team: '営業' }
];

// Object.groupBy：キーごとにまとめる
console.log(Object.groupBy(people, (p) => p.team));

// 元を壊さない配列操作
const nums = [3, 1, 2];
console.log(nums.toSorted(), nums.toReversed(), nums.with(0, 99), nums);

// findLast / at
console.log(nums.findLast((n) => n < 3), nums.at(-1));

// Set の演算
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
console.log(a.union(b), a.intersection(b), a.difference(b));

// イテレータヘルパー：途中で打ち切れるので無駄がない
const evens = nums.values().filter((n) => n % 2 === 1).map((n) => n * 10).toArray();
console.log(evens);

// structuredClone：入れ子のオブジェクトも丸ごと複製
const original = { user: { name: '山田' } };
const copy = structuredClone(original);
copy.user.name = '別人';
console.log(original.user.name, copy.user.name);

// Promise.withResolvers：resolve / reject を外に取り出せる
const { promise, resolve } = Promise.withResolvers();
resolve('あとから解決できる');
promise.then((value) => console.log(value));