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

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

const applePrice = 100; // この買い物では、りんご 1 個 100 円
let appleCount = 2;     // 買う個数はあとで変わる

appleCount = appleCount + 1; // もう 1 個買う
console.log(applePrice * appleCount); // 300

appleCount += 1; // 「appleCount = appleCount + 1」の短い書き方
console.log(applePrice * appleCount); // 400

const bookPrice = 500;
const bookCount = 3;
const deliveryFee = 200;

const booksPrice = bookPrice * bookCount;
const totalPrice = booksPrice + deliveryFee;
console.log(totalPrice); // 1700

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(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(2 + 3 * 4);              // 14（かけ算が先）
console.log((2 + 3) * 4);            // 20（かっこ内が先）

// + は文字列の連結にもなる。数値と混ぜると文字列になってしまう
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));                   // 否定

// 代入と複合代入（値を変えるので let を使う）
let count = 2;
count = 3;
count += 1; // count = count + 1 と同じ
console.log(count); // 4

// 前置と後置で、表示される値が違う
console.log(count++); // 4（表示してから 5 に増える）
console.log(count);   // 5
console.log(--count); // 4（4 に減ってから表示する）

// 偽とみなされる値（falsy）の代表例
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 maxCount = 5;

// + で文字列をつなぐ書き方
const messageWithPlus = maxCount + ' 件まで表示できます';

// バッククォートなら、文章の中に値を入れられる
const message = `${maxCount} 件まで表示できます`;
console.log(message); // 5 件まで表示できます
console.log(messageWithPlus === message); // true（どちらも同じ文字列）

const applePrice = 100;
const appleCount = 3;
const totalMessage = `合計は ${applePrice * appleCount} 円です`;
console.log(totalMessage); // 合計は 300 円です

// 条件を順に調べ、成績を決める
const score = 78;
let grade;

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

console.log(grade); // 良

const day = 'sat';
let dayLabel;

switch (day) {
  case 'sat':
  case 'sun':
    dayLabel = '休み';
    break; // break がないと次の処理にも進む
  default:
    dayLabel = '平日';
}

console.log(dayLabel); // 休み

// 飲み物の名前と値段を対応させる
const drinkPrices = {
  apple: 100,
  orange: 150,
  coffee: 200
};

const selectedDrink = 'orange';
// 対応する値が undefined なら 0 を使う
const price = drinkPrices[selectedDrink] ?? 0;

console.log(`${selectedDrink} の値段は ${price} 円です`); // orange の値段は 150 円です

// while: 条件を先に調べる
let remaining = 3;
while (remaining > 0) {
  console.log(`残り ${remaining} 回`);
  remaining -= 1;
}

// do...while: 処理をしてから条件を調べる
let attemptCount = 0;
do {
  attemptCount += 1;
  console.log(`${attemptCount} 回目の試行`);
} while (attemptCount < 2);

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

// for...of: 配列の値を順に取り出す
for (const fruit of ['りんご', 'みかん']) {
  console.log(fruit);
}

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);
}

// 番号も必要なら entries() と組み合わせる
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index + 1} 番目：${fruit}`);
}

// 3. forEach：配列の各要素に関数を実行する書き方
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 を使う関数宣言
function greet(name) {
  return `${name}さん、こんにちは`;
}

// アロー関数の基本形
const addOne = (number) => {
  return number + 1;
};

// 式が一つなら { } と return を省略できる。同じ処理になる
const addOneShort = (number) => number + 1;

// 処理を複数書くなら { } と return を使う
const rectangleArea = (width, height) => {
  const size = width * height;
  return size;
};

console.log(greet('山田'));         // 山田さん、こんにちは
console.log(addOne(21), addOneShort(21)); // 22 22
console.log(rectangleArea(3, 4)); // 12

// rate を省略した場合は 0.1 を使う（既定値）
const addTax = (price, rate = 0.1) => Math.round(price * (1 + rate));
console.log(addTax(1000));       // 1100
console.log(addTax(1000, 0.08)); // 1080

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(100, 200)); // 300

const itemPrices = [100, 200, 300];
console.log(sum(...itemPrices)); // 600

function repeatTwice(action) {
  action();
  action();
}

function sayHello() {
  console.log('こんにちは');
}

repeatTwice(sayHello); // 「こんにちは」が 2 回出る

function addTaxToPrice(price) {
  return Math.round(price * 1.1);
}

const prices = [100, 200, 300];
const pricesWithTax = prices.map(addTaxToPrice);
console.log(pricesWithTax); // [110, 220, 330]
console.log(prices);        // [100, 200, 300] のまま

function makeCounter() {
  // 呼び出すたびに新しい count を作るので、カウンター同士が影響しない。
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const firstCounter = makeCounter();
const secondCounter = makeCounter();
console.log(firstCounter(), firstCounter()); // 1 2
console.log(secondCounter());                 // 1

// 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.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. 待たずにここまで進む');

// 文字を数値に直す。数値にならなければ、自分で例外を投げる
function parsePrice(text) {
  const price = Number(text);
  if (Number.isNaN(price)) {
    throw new Error(`「${text}」は数値ではありません`);
  }
  return price;
}

try {
  console.log(parsePrice('1280')); // 1280
  console.log(parsePrice('千円'));  // ここで例外が投げられ、catch へ移る
  console.log('この行は実行されない');
} catch (error) {
  // error.message に、投げたときの文が入っている
  console.log(`読み取れませんでした：${error.message}`);
} finally {
  console.log('finally は、成功しても失敗しても最後に実行される');
}

console.log('catch で受け止めたので、ここから先も動く');

const prices = [300, 100, 200];

// toSorted() は並べ替えた新しい配列を返す。
const sortedPrices = prices.toSorted((left, right) => left - right);
console.log(sortedPrices); // [100, 200, 300]
console.log(prices);       // [300, 100, 200] のまま

// at(-1) で配列の最後の値を読める。
console.log(prices.at(-1)); // 200