JavaScript 入門 → 応用

// ===== 変数の宣言 =====
let name = "田中花子";    // 文字列 (String)
let age  = 25;           // 数値 (Number)
let isStudent = true;   // 真偽値 (Boolean)
let score = null;        // null（値なし）
let address;             // undefined（未定義）

// const は変更できない定数
const PI = 3.14159;

// ===== 型の確認 =====
console.log(typeof name);      // "string"
console.log(typeof age);       // "number"
console.log(typeof isStudent); // "boolean"

// ===== テンプレートリテラル（便利！）=====
console.log(`${name}さんは${age}歳です`);

const score = 75;

// if文の基本
if (score >= 90) {
  console.log("優秀！A判定");
} else if (score >= 70) {
  console.log("合格！B判定");
} else if (score >= 50) {
  console.log("もう少し C判定");
} else {
  console.log("要復習 D判定");
}

// switch文（値が多い場合に便利）
const day = "水曜";
switch (day) {
  case "月曜":
  case "火曜":
    console.log("週の前半"); break;
  case "水曜":
    console.log("週の真ん中！"); break;
  default:
    console.log("週の後半");
}

// 三項演算子（コンパクトな if/else）
const result = score >= 60 ? "合格" : "不合格";
console.log(`判定: ${result}`);

// ===== for ループ（回数指定）=====
for (let i = 1; i <= 5; i++) {
  console.log(`${i}回目: こんにちは！`);
}

// ===== while ループ（条件が true の間）=====
let count = 0;
while (count < 3) {
  console.log(`カウント: ${count}`);
  count++;
}

// ===== for...of（配列の各要素に対して）=====
const fruits = ["りんご", "バナナ", "みかん"];
for (const fruit of fruits) {
  console.log(`🍎 ${fruit}`);
}

// ===== break / continue =====
for (let n = 1; n <= 10; n++) {
  if (n === 5) break;       // 5で終了
  if (n % 2 === 0) continue; // 偶数をスキップ
  console.log(`奇数: ${n}`);
}

// ① 関数宣言
function greet(name) {
  return `こんにちは、${name}さん！`;
}
console.log(greet("花子"));

// ② アロー関数（モダンな書き方）
const add = (a, b) => a + b;
console.log(add(3, 4));   // 7

// ③ デフォルト引数
const power = (base, exp = 2) => base ** exp;
console.log(power(3));    // 9 (3の2乗)
console.log(power(2, 10)); // 1024

// ④ 複数の値を返す（配列・オブジェクト）
const minMax = (arr) => ({
  min: Math.min(...arr),
  max: Math.max(...arr)
});
const { min, max } = minMax([3, 1, 7, 2, 9]);
console.log(`最小: ${min}, 最大: ${max}`);

// ===== 配列の基本 =====
const nums = [10, 20, 30, 40, 50];
console.log(nums[0]);        // 10（0始まり）
console.log(nums.length);   // 5

// ===== 高階関数（超重要！）=====
// map: 全要素を変換して新配列を作る
const doubled = nums.map(n => n * 2);
console.log(doubled);       // [20,40,60,80,100]

// filter: 条件に合う要素だけ抽出
const big = nums.filter(n => n > 25);
console.log(big);            // [30,40,50]

// reduce: 全要素を1つの値にまとめる
const total = nums.reduce((acc, n) => acc + n, 0);
console.log(`合計: ${total}`); // 150

// ===== オブジェクト =====
const user = {
  name: "太郎",
  age: 28,
  greet() { return `私は${this.name}です`; }
};
console.log(user.greet());

// 分割代入
const { name, age } = user;
console.log(`${name} (${age}歳)`);

// ===== 要素の取得 =====
const btn   = document.getElementById("myBtn");
const title = document.querySelector("h1");
const items = document.querySelectorAll(".item");

// ===== 内容の変更 =====
title.textContent = "新しいタイトル"; // テキスト変更
title.innerHTML   = "<span>HTML変更</span>";

// ===== スタイルの変更 =====
title.style.color      = "#ff6b6b";
title.style.fontSize   = "24px";

// ===== クラスの操作 =====
title.classList.add("active");
title.classList.remove("hidden");
title.classList.toggle("highlight");

// ===== イベントリスナー =====
btn.addEventListener("click", () => {
  alert("ボタンがクリックされました！");
});

// ===== 要素の追加 =====
const li = document.createElement("li");
li.textContent = "新しいアイテム";
document.querySelector("ul").appendChild(li);

// ===== Promise の基本 =====
const wait = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

// ===== async/await（Promiseをシンプルに書く）=====
async function loadData() {
  console.log("データ読み込み開始...");
  await wait(1000);            // 1秒待つ
  console.log("完了！");
  return { status: "ok" };
}
loadData().then(data =>
  console.log("結果:", data));

// ===== fetch で Web API からデータ取得 =====
async function getUser(id) {
  try {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/users/${id}`
    );
    const user = await res.json();
    console.log(`名前: ${user.name}`);
    console.log(`メール: ${user.email}`);
  } catch (err) {
    console.error("エラー:", err);
  }
}
getUser(1);

// ===== モダンJS構文まとめ =====
// スプレッド演算子
const a = [1,2,3]; const b = [4,5];
console.log([...a, ...b]);  // [1,2,3,4,5]

// Optional chaining (?.)  Nullish coalescing (??)  
const obj = { user: { name: "太郎" } };
console.log(obj?.user?.name);   // "太郎"
console.log(obj?.admin?.role ?? "一般ユーザー");