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

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: "大阪" };

// 値を取り出す：「オブジェクト.キー」と書く
console.log(user.name);
// [ ] の中にキーを文字列で書いても、同じように取り出せる
console.log(user["city"]);

// 分割代入：必要な項目だけを、同じ名前の変数に取り出す
// const name = user.name; const city = user.city; と書くのと同じ
const { name, city } = user;
console.log(name, city);

// 名前を変えて取り出す（name を、userName という変数に入れる）
// 既定値を付ける（user に country はないので、"日本" が入る）
const { name: userName, country = "日本" } = user;
console.log(userName, country);

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

// スプレッド構文（...）：中身を広げて、新しいオブジェクトに写す
// age だけを上書きした複製を作る。元の user は変わらない
const updated = { ...user, age: 31 };
console.log(updated, user.age);

// 省略記法：{ name: name, age: age } は、{ name, age } と書ける
const age = 31;
console.log({ name, age });

// すべての項目を順に取り出す
// Object.entries() は、[キー, 値] の組を並べた配列を返す
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}：${value}`);
}

// キーだけの配列と、値だけの配列
console.log(Object.keys(user), Object.values(user));

// 値が配列のオブジェクト：季節（キー）ごとに、花の名前の配列を持つ
const seasonalFlowers = {
  spring: ["桜", "チューリップ", "菜の花"],
  summer: ["ひまわり", "朝顔", "ラベンダー"],
  autumn: ["コスモス", "りんどう"],
  winter: ["椿", "水仙", "シクラメン"]
};

console.log(seasonalFlowers.summer);          // 夏の花の配列
console.log(seasonalFlowers.summer[0]);       // 夏の花の 1 つ目（配列の番号は 0 から数える）
console.log(seasonalFlowers.spring.length);   // 春の花の数

// キーを変数で指定するときは、. ではなく [ ] で囲む
// seasonalFlowers.season と書くと、「season」という名前のキーを探してしまう
const season = "autumn";
console.log(seasonalFlowers[season].join("・"));   // join()：配列をつないで、1 つの文字列にする

// オブジェクトの配列：同じ項目（name・season・color）を持つ花を並べる
const flowers = [
  { name: "桜", season: "spring", color: "桃" },
  { name: "ひまわり", season: "summer", color: "黄" },
  { name: "コスモス", season: "autumn", color: "桃" },
  { name: "椿", season: "winter", color: "赤" }
];

console.log(flowers[1].name);                 // 2 つ目の花（ひまわり）の名前

// for...of で、花を 1 つずつ取り出して表示する
for (const flower of flowers) {
  console.log(`${flower.name}（${flower.color}）`);
}

// 桃色の花の名前だけを取り出す（filter と map は、次の見出しで詳しく説明する）
const pinkFlowers = flowers.filter((flower) => flower.color === "桃");   // 桃色の花だけを残す
const pinkNames = pinkFlowers.map((flower) => flower.name);              // 残った花を、名前に変える
console.log(pinkNames);

// アレンジメントの料金表。1 つの商品が、1 つのオブジェクト
const arrangements = [
  { size: "S", price: 3000 },
  { size: "M", price: 5000 },
  { size: "L", price: 8000 }
];

// for...of で、商品を 1 つずつ取り出して表示する
for (const item of arrangements) {
  console.log(`${item.size} サイズ：${item.price} 円`);
}

// 配列のメソッドは、. でつないで続けて書ける（filter と map は、次の見出しで詳しく説明する）
const cheapSizes = arrangements
  .filter((item) => item.price < 6000)   // 6,000 円未満の商品だけを残す
  .map((item) => item.size);             // 残った商品を、サイズの文字に変える
console.log(cheapSizes);

// find()：条件に合う、最初の 1 つを探す（ここでは M サイズの商品）
const medium = arrangements.find((item) => item.size === "M");
console.log(`${medium.size} サイズは ${medium.price} 円です`);

const flowers = [
  { name: "桜", color: "桃" },
  { name: "ひまわり", color: "黄" },
  { name: "コスモス", color: "桃" }
];

// ① for...of で書く：空の配列を用意し、条件に合う花の名前だけを push する
const pink1 = [];
for (const flower of flowers) {
  if (flower.color === "桃") {
    pink1.push(flower.name);
  }
}
console.log(pink1);

// ② 「条件」と「変え方」を関数にして、filter と map に渡す
function isPink(flower) {
  return flower.color === "桃";   // 桃色なら true、それ以外なら false を返す
}
function toName(flower) {
  return flower.name;             // 花のオブジェクトから、名前だけを返す
}
const pink2 = flowers.filter(isPink).map(toName);
console.log(pink2);

// ③ アロー関数で、関数をその場に書く（② と同じ意味）
const pink3 = flowers
  .filter((flower) => flower.color === "桃")   // 桃色の花だけを残す
  .map((flower) => flower.name);               // 残った花を、名前に変える
console.log(pink3);

// オブジェクトの配列を表にする：1 つの花が 1 行、項目（name・season・color）が列になる
const flowers = [
  { name: "桜", season: "spring", color: "桃" },
  { name: "ひまわり", season: "summer", color: "黄" },
  { name: "椿", season: "winter", color: "赤" }
];
console.table(flowers);

// 値が配列のオブジェクトを表にする：季節が行、配列の番号が列になる
const seasonalFlowers = {
  spring: ["桜", "チューリップ", "菜の花"],
  summer: ["ひまわり", "朝顔"]
};
console.table(seasonalFlowers);

// 花の図鑑：花ごとに、名前と季節を持つ
const flowers = [
  { name: "桜", season: "spring" },
  { name: "チューリップ", season: "spring" },
  { name: "ひまわり", season: "summer" },
  { name: "朝顔", season: "summer" },
  { name: "コスモス", season: "autumn" },
  { name: "椿", season: "winter" },
  { name: "水仙", season: "winter" }
];

// 季節ごとの一覧を入れる、空のオブジェクト
const bySeason = {};

for (const flower of flowers) {
  // その季節の配列がまだなければ、空の配列を用意する
  // （まだないキーを読むと undefined になり、!undefined は true になる）
  if (!bySeason[flower.season]) {
    bySeason[flower.season] = [];
  }
  // その季節の配列に、花の名前を足す
  bySeason[flower.season].push(flower.name);
}
console.log(bySeason);

// 月から季節を引く表。1 月から 12 月の順に、12 個並べている
const seasonOfMonth = [
  "winter", "winter", "spring", "spring", "spring", "summer",
  "summer", "summer", "autumn", "autumn", "autumn", "winter"
];

// new Date().getMonth() は、今月の番号。1 月を 0、12 月を 11 と数えるので、
// 配列の番号として、そのまま使える
const now = seasonOfMonth[new Date().getMonth()];
console.log(`今月のおすすめ：${bySeason[now].join("・")}`);

// クイズの問題を並べた配列。1 問が 1 つのオブジェクト
//   question：問題文
//   choices ：選択肢の配列
//   answer  ：正解の選択肢の番号（0 から数える）
const quiz = [
  { question: "春に咲く花は？", choices: ["コスモス", "りんどう", "桜"], answer: 2 },
  { question: "夏に咲く花は？", choices: ["椿", "ひまわり", "水仙"], answer: 1 },
  { question: "秋に咲く花は？", choices: ["コスモス", "朝顔", "シクラメン"], answer: 0 },
  { question: "冬に咲く花は？", choices: ["チューリップ", "ラベンダー", "水仙"], answer: 2 }
];

// 解答：選んだ選択肢の番号を、問題の順に並べたもの。書き換えて試せる
const myAnswers = [2, 1, 1, 2];

let score = 0;   // 正解の数。あとで増やすので const ではなく let

// entries() で、問題の番号（index）と問題（item）を一緒に取り出す
for (const [index, item] of quiz.entries()) {
  const mine = item.choices[myAnswers[index]];   // 選んだ選択肢の文字
  const correct = item.choices[item.answer];     // 正解の選択肢の文字

  // index は 0 から数えるので、+ 1 して「第 1 問」から表示する
  if (myAnswers[index] === item.answer) {
    score += 1;
    console.log(`第 ${index + 1} 問 ○ ${item.question} ${mine}`);
  } else {
    console.log(`第 ${index + 1} 問 × ${item.question} ${mine}（正解は ${correct}）`);
  }
}
console.log(`${quiz.length} 問中 ${score} 問正解`);

// 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