<form action=""></form>

 <!-- どこで検索するか -->
    <form action="https://www.youtube.com/results">
      <!-- https://www.youtube.com/results?search_query=検索結果 -->
      <input type="text" name="search_query" placeholder="検索名" />
      <button type="submit">Youtubeで検索</button>
    </form>

/* 1文字目だけスタイルを当てる */
h2:first-letter {
  font-size: 50px;
}

/* 1行目だけ指定してスタイルを当てる */
p::first-line {
  color: purple;
}

9 % 2
1

3 ** 3
= 27
3の3乗の計算

0/0
= NaN

NaN / NaN
= Nan

200 + 0/0
= NaN

let year = 1985;

let hoge = 5;
let hogehoge = 1;
let total = hoge + hogehoge;

<!-- 足し算 -->
let score = 0;
score +=1;
=  1

score++;
2

<!-- 引き算 -->
score--;
1

<!-- NG -->
<!-- 空白が入るのはNG -->
let hello world

<!-- 数字で始めるのはNG -->
let 123hello

<!-- 単語の先頭文字を大文字にする -->
let currentYear

<!-- NG -->
<!-- 何の数字？ -->
let y = 1995;

<!-- Booleanの変数名の先頭にはis,hasをつける。 -->
let isLogginedInUser

let userName = "山田";

const cat = "string cat";
cat[0]
<!-- 結果はs
変数catの0文字目 -->

<!-- 文字数を数える -->
cat.length

let hello = 'hello world';
const upperHello = hello.toUpperCase();
upperHello;
<!-- 結果 -->
HELLO WORLD

<!-- メソッドは組み合わせられる -->
let greeting = '    hello world  ';
const trimGreeting = greeting.trim().toUpperCase();

<!-- 結果 -->
'HELLO WORLD'

const hello = "hello world";
hello.replace("hello", "goodnight")
<!-- 結果 -->
'goodnight world'

let product = 'チョコレート'
let price = 100;
let quantity = 4;

`${product}を${quantity}個買って${price}円だった。`

<!-- ユーザーログイン前 -->
let loggedInUser = null;

<!-- ユーザーがログインした -->
loggedInUser = 'tom';

  // 比較演算子
  const math = 10 === 10;
  // console.log(math);

  // == 等価
  // 値が等しいかチェックするが、型が等しいかはチェックしない
  const math2 = null == undefined;
  // console.log(math2); // trueになる

  const math3 = 1 !== 1;
  // console.log(math3);

  // === 厳密な等価
  // 比較の際は基本===を使用する。

const mystery = 'Prompt7';

if(mystery[0] === 'P' && mystery.length > 5 && mystery.indexOf('7') !== -1){
    console.log("正解！");
}

  // or ||
  // 片方の式がtrueならtrueと言える
  const age = 18;

  // 0歳以上5歳未満 or 65歳以上
  if ((age >= 0 && age < 5) || age >= 65) {
    console.log("無料");
  } else if (age >= 5 && age < 10) {
    console.log("子供料金1000円");
  } else if (age >= 10 && age < 65) {
    console.log("大人料金5000円");
  } else {
    console.log("無効な年齢です");
  }

  // NOT演算子 !
  // trueとfalseの値を判定させる
  // falsyな場合、trueに変換、truthな場合、falsyに変換
  let userName = prompt("ユーザー名を入力してね");

  // userNameが"""空文字でfalsyなので!で反転してtruthyになってif文の中身が実行される
  if (!userName) {
    userName = prompt("問題が起きました。ユーザー名を入力してね。");
  }

  // SWITCH文
  // ケースが実行されるとその下まで実行されるbreakで逃げないとずっと実行される
  // switch文の特定を活かして、6,7が一緒の出力をしたいならbreakを入れずに7にスキップさせることもできる
  const day = 7;

  switch (day) {
    case 1:
      console.log("月曜日");
      break;
    case 2:
      console.log("火曜日");
      break;
    case 3:
      console.log("水曜日");
      break;
    case 4:
      console.log("木曜日");
      break;
    case 5:
      console.log("金曜日");
      break;
    case 6:
    case 7:
      console.log("週末");
      break;
    default:
      console.log("無効な数字です");
  }

  // 配列の基本
  let students = ["smith", "paul", "john", "teresa"];
  console.log(students);

  students[0] = "dave";

  // pushメソッドを使用して配列の最後に要素を追加する
  students.push("ringo", "ando");
  console.log(students);

  // popメソッドを使用して配列の最後の要素を取り除く
  const person = students.pop();
  console.log(person);
  console.log(students);

  // shiftメソッドを使用して配列の先頭の要素を取り除く
  const person1 = students.shift();
  console.log(person1);

  // unshiftメソッドを使用して配列の先頭に要素を追加する
  students.unshift("VIP");
  console.log(students);


  // include()あるか？
  console.log(students.includes("smith"));

  // indexOf()何番目にあるか・
  console.log(students.indexOf("smith"));

  // reverse()要素が逆順になる 注意：元々の配列が変更される。不変性が破壊される、本当は新しい配列を作った方がいい。
  students.reverse();
  console.log(students);

  // slice()メソッド 不変性は保たれる、別の配列として切り取る、あんまり使わない
  console.log(beatles.slice(1));

  // splice()メソッド 元の配列を変更する、不変性が破壊される。splice(何番目から, 何個消すか)
  console.log(beatles.splice(0, 2));
  console.log(beatles);

  // splice(何番目から, 何個消すか, 何を追加するか)
  console.log(students.splice(1, 0, "secondary"));
  console.log(students);

  // sort()メソッド 並び替えができる、本質は関数の中で自分で並び順を決めて使う
  let scores = [1, 49, 89, 100, 90, 0];
  console.log(scores.sort());

  // 配列の等価性は中身じゃなくて、全く同じ配列を参照しているかどうかを判定している
  let numbers = [1, 2, 3, 4, 5];
  let numbersCopy = numbers;

  console.log(numbers === numbersCopy); // true 同じ配列

  // 配列のネスト
  const board = [
    ["0", null, "x"],
    ["0", null, "これだよ！"],
    ["0", null, "x"],
    ["0", null, "x"],
    ["0", null, "x"],
    ["0", null, "x"],
  ];

  // 配列の1番目と2番目にアクセス
  console.log(board[1][2]); // これだよ！

  // オブジェクト
  // プロパティの集合体、キーと値のペア、インデックスではなく、キーを使ってアクセスする。
  // データにラベリングをできる、順序はない

  // オブジェクトリテラル {}で囲んでkeyとvalueのペアのこと
  const person = {
    firstName: "taro",
    lastName: "yamada",
  };

  // オブジェクトのキーはStringに変換される
  console.log(person.firstName); // personのkey:firstNameにアクセスする
  console.log(person["firstName"]);

  const restaurant = {
    name: "Ichiran Ramen",
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: "Brooklyn",
    state: "NY",
    zipcode: "11206",
  };

  const fullAddress = `${restaurant.address}${restaurant.city}${restaurant.state}${restaurant.zipcode}`;
  console.log(fullAddress);

  // forループ
  // for(初期値; 条件式; 増減式 )
  // 初期値iを1として、iが10以下の間はiに+1処理を繰り返す
  for (let i = 1; i <= 10; i++) {
    console.log(`出力結果は${i}です。`);
  }

 // ループのネスト
  for (let i = 0; i <= 10; i++) {
    console.log(`iは${i}`);

    for (let j = 1; j < 4; j++) {
      console.log(`  jは${j}`);
    }
  }

  const student = [
    ["伊藤", "田中", "前田"],
    ["明智", "豊富", "卑弥呼"],
    ["伊能", "中大兄皇子", "綱吉"],
  ];

  for (let i = 0; i < student.length; i++) {
    // まず配列を変数に格納する
    const row = student[i];
    console.log(`${i + 1}行目`);

    // 変数に格納した配列をさらにrowの長さ分ループさせる
    for (let j = 0; j < row.length; j++) {
      console.log(row[j]);
    }
  }

  // whileループ
  // 更新式を書いていないと簡単に無限ループに陥るので注意
  let num = 0;
  while (num < 10) {
    console.log(num);
    num++;
  }

  // パスワード一致するまでループ
  const SECRET = "secret";
  let guest = ""; // 初期値は空文字

  while (SECRET !== guest) {
    guest = prompt("パスワードを入力してください。");
  }
  guest = alert("認証成功");

  // breakでループを抜けることができる
  let input = prompt("何か入力");
  while (true) {
    input = prompt(input);

    // 入力された値がquitなら終了
    if (input === "quit") {
      break;
    }
  }

  // クイズゲーム
  let maximum = parseInt(prompt("好きな数字を入力してね。"));

  // 数字が入るまで繰り返し入力を求める
  while (!maximum) {
    maximum = parseInt(prompt("エラーです。有効な数字を入力してください。"));
  }

  const targetNum = Math.floor(Math.random() * maximum) + 1;

  console.log(targetNum);
  let guess = parseInt(prompt("1つ数字を決めました。数字を当ててみてね。"));
  let count = 1;

  // guessで受け取った文字列を整数に変換してランダムに生成されるtargetNumと比較
  // 数値で比較するために必要、これがないと永遠に終わらない
  // parseInt(guess)では、受け取ったguessを整数にした上で比較をするので、guessの値自体を変えるものではない。
  while (parseInt(guess) !== targetNum) {
    // ユーザーがqを入力するとループを抜ける
    // guessは文字列の入力も受け取る(ここではparaIntしてないのでこれは成り立つ)
    if (guess === "q") break;

    count++;
    if (guess > targetNum) {
      guess = prompt("その値よりは小さいです！");
    } else {
      guess = prompt("その値よりは大きいです！");
    }
  }

  if (guess === "q") {
    alert("終了します。");
  } else {
    alert(`正解！🎉おめでとう！！${count}回で正解しました！`);
  }

  // 対象の配列と一個一個の名前を用意するだけで全て取り出せる
  for (let subreddit of subreddits) {
    console.log(subreddit);
  }

  // stringも列挙可能なオブジェクトのため1文字づつ取り出せる
  for (let char of "helloWorld") {
    console.log(char);
  }

  let input = prompt("コマンドを入力してください。(new,list,delete,quit)");
  const todos = ["水やりをする", "種まきをする"];

  while (input !== "quit" && input !== "q") {
    // list
    if (input === "list") {
      console.log("-----------");
      for (let i = 0; i < todos.length; i++) {
        console.log(`${i}:${todos[i]}`);
      }
      console.log("-----------");

      // new
    } else if (input === "new") {
      const newTodo = prompt("新しいtodoを入力してください。");
      todos.push(newTodo);
      console.log(`${newTodo}を追加しました。`);

      // delete
    } else if (input === "delete") {
      const index = parseInt(prompt("削除したいindexを入力"));

      // indexに入力された値がNaNでないかの判定
      if (!Number.isNaN(index)) {
        const deleted = todos.splice(index, 1); // 入力された数値の位置から1個削除 splice(削除する位置, 何個削除するか)
        // splice()は必ず配列として返すから、その中の唯一の中身を取り出すためにdeleted[0]としている。
        console.log(`${deleted[0]}を削除しました。`);
      } else {
        console.log("有効なindexを入力してください。");
      }
    }
    input = prompt("コマンドを入力してください。(new,list,delete,quit)");
  }

  console.log("アプリを終了します。");

 // 関数(function)

  // JavaScriptのホイストで変数や関数の宣言をコードの先頭に移動させるので定義した関数の上で呼び出しても実行される
  // ただ基本的には関数を上で定義して、下で実行するのが良さげ
  singSong();

  // 関数を定義
  function singSong() {
    console.log("あああああ");
    console.log("Whoooooooooooooo");
    console.log("Uhooooooooooo");
  }

  // 定義した関数を実行
  singSong();

  // 引数
  // 関数の入力値のようなもの
  // 関数は機械のようなもの、実行すれば動く

  // greet(パラメーター)
  function greet(firstName, lastName) {
    console.log(`Hello! ${firstName} ${lastName}`);
  }

  // // 引数
  greet("Tommy", "muscle");

  // 引数を渡さないと、そこにはundefinedが返ってくる
  greet("Tommy");
  greet();

  // 複数の引数
  function greet(firstName, lastName) {
    console.log(`Hello! ${firstName} ${lastName[0]}さん`);
  }
  greet("MukiMuki", "muscle");

  // strで受け取った値を第二引数の数分連結させて出力する関数
  function repeat(str, count) {
    let result = "";
    for (let i = 0; i < count; i++) {
      result += str;
    }
    console.log(result);
  }

  // hello!!の文字列を3回結合
  repeat("hello!!", 3);

  // returnを使うと関数から値を返すことができる、returnした時点でその関数の実行が終わる。
  function add(x, y) {
    if (typeof x !== "number" || typeof y !== "number") {
      return false;
    }
    // if文の中身がtrueになって中の処理が実行されると、その時点でreturn false が返されて処理は終わり
    // そうじゃないならif文を通り越して下の処理が実行されて終わり。つまりreturnが返せる値は一つのみ。
    // returnが実行されると処理は終わり
    return x + y;
  }

  let total = add(5, 8);
  console.log(total);

  let deadlyAnimal = "ヒョウモンダコ";

  function handleAnimal() {
    let deadlyAnimal = "カサゴ";
    console.log(deadlyAnimal);
  }

  handleAnimal(); // カサゴ
  console.log(deadlyAnimal); // ヒョウモンダコ
  // 関数の外では影響がないのでヒョウモンダコが出力される

  // レキシカルスコープはコードのどこで定義したかで決まる、実行時ではない
  let x = "ああああ";

  function hoge() {
    console.log(x);
  }

  function moge() {
    let x = "かきくけこ";
    hoge();
  }

  hoge(); // ああああ
  moge(); // ああああ

  // 関数式
  // 関数を変数に格納できる。呼び出す時も変数として呼び出せる。
  const add = function (x, y) {
    return x + y;
  };

  console.log(add(3, 6));

  const square = function (num) {
    return num * num;
  };

  console.log(square(8));

  // 高階関数、関数とやり取りをする関数。
  // 引数として関数を受け取る、戻り値に関数を指定する
  function callTwice(func) {
    func();
    func();
  }

  function callTenTimes(f) {
    for (let i = 0; i < 10; i++) {
      f();
    }
  }

  function rollDie() {
    const roll = Math.floor(Math.random() * 6) + 1;
    console.log(roll);
  }

  // 実行しない！！！渡すだけ！
  callTwice(rollDie);
  callTenTimes(rollDie);

  // メソッド:オブジェクトのキーに関数を定義できる。
  const myMath = {
    PI: 3.14,
    square: function (num) {
      return num * num;
    },
    cube: function (num) {
      return num * num * num;
    },
  };

  console.log(myMath.square);

  // 省略形
  const myMath2 = {
    PI: 3.14,
    square(num) {
      return num * num;
    },
    cube(num) {
      return num * num * num;
    },
  };

  const square = {
    area(side) {
      return side * side;
    },

    perimeter(side) {
      return side * 4;
    },
  };

  console.log(square.area(10));
  console.log(square.perimeter(10));

  // this
  // このオブジェクト内が必ず参照されるわけではない！
  const cat = {
    name: "タマ",
    color: "gray",
    breed: "アメショ",

    cry() {
      // console.log(name); // 出力されない🙅‍♀️
      console.log(this);
      console.log(`${this.name}がにゃーと鳴く`); // 出力される🙆
    },
  };

  // .の左側にあるものがthisになる
  const cry2 = cat.cry;

  // エラーが起きた場合の処理、エラーが起きると処理がそこで終わってしまう。
  try {
    hello.tuUpperCase();
  } catch {
    console.log("エラー");
  }

  console.log("処理の続き");

  // catch(e)とすることで、エラー内容を確認することもできる。
  function shout(msg) {
    try {
      console.log(msg.toUpperCase().repeat(3));
    } catch (error) {
      console.log(error);
      console.log("文字列を入れてね");
    }
  }

  shout("hello");
  shout(1234); // 数字が入るとcatchの処理に移る

  // forEach、あくまで配列のメソッド、stringには使用できない。
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  // 配列の中身を1個づつ取り出して処理をする
  numbers.forEach(function (el) {
    console.log(el);
  });

  // // for ofでも同じことはできるしわかりやすい？
  for (let elem of numbers) {
    console.log(elem);
  }

  const movies = [
    { title: "Amadeus", score: 99 },
    { title: "Bool", score: 80 },
    { title: "Candy", score: 79 },
    { title: "Eden", score: 59 },
  ];

  // for each ver
  movies.forEach(function (movie) {
    console.log(`${movie.title} - ${movie.score} / 100`);
  });

  // for ofでも同じことはできる。
  for (let movie of movies) {
    console.log(`${movie.title} - ${movie.score} / 100`);
  }

  // mapメソッド
  // for eachと違うのは、returnして処理された各々の値・要素で、新しい配列にマッピングすることができる。
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const doubles = numbers.map(function (num) {
    return num * 2;
  });
  console.log(doubles); // [2,4,6,8,10,12,14,16,18,20]

  const movies = [
    { title: "Amadeus", score: 99 },
    { title: "Bool", score: 80 },
    { title: "Candy", score: 79 },
    { title: "Eden", score: 59 },
  ];

  const newMovies = movies.map(function (movie) {
    return movie.title;
  });

  console.log(newMovies);

 // 暗黙的リターンは一つの式だけの時有効。
 const add = (x, y) => x + y;
 console.log(add(3, 7));

 const movies = [
   { title: "Amadeus", score: 99 },
   { title: "Bool", score: 80 },
   { title: "Candy", score: 79 },
   { title: "Eden", score: 59 },
 ];

 const newMovies = movies.map((movie) => {
   return `${movie.title} - ${movie.score} / 100`;
 });

 console.log(newMovies);

    const movies = [
    { title: "Amadeus", score: 99, year: 1999 },
    { title: "Bool", score: 82, year: 1997 },
    { title: "Candy", score: 79, year: 1980 },
    { title: "Eden", score: 100, year: 2024 },
    { title: "Youtube", score: 100, year: 1996 },
  ];

  // mapメソッドと組み合わせも可能
  // 配列moviesの中でscoreが80以上のものをfilterした新しい配列を作成し、mapメソッドでその配列のtitleだけを取り出して配列を作成する。
  const goodMovie = movies
    .filter((movie) => movie.score > 80 && movie.year > 1990)
    .map((movie) => movie.title);

  console.log(goodMovie);

  const budMovie = movies.filter((movie) => {
    return movie.score < 70;
  });

  // console.log(budMovie);
  const validUserNames = (names) => {
    return names.filter((name) => name.length < 10);
  };

  console.log(validUserNames(["taros", "tomtom", "testmessssssss", "tommy"]));

 array.reduce((accumulator, currentValue) => {
    // 処理
    return accumulator;
  }, initialValue);

  // accumulator: 蓄積値（前回の処理結果）
  // currentValue: 現在処理している配列の要素
  // initialValue: 初期値（省略可能）

  const apiResponse = [
    { id: 1, status: "完了" },
    { id: 2, status: "未完了" },
    { id: 3, status: "未完了" },
    { id: 4, status: "完了" },
    { id: 5, status: "完了" },
    { id: 6, status: "完了" },
    { id: 7, status: "未完了" },
  ];

  const displayData = apiResponse.reduce((acc, item) => {
    // ステータスごとにグループ化
    acc[item.status] = acc[item.status] || [];
    acc[item.status].push(item);
    return acc;
  }, {});

  // displayData の中身
  // {
  //   "完了": [
  //     { id: 1, status: "完了" },
  //     { id: 4, status: "完了" },
  //     { id: 5, status: "完了" },
  //     { id: 6, status: "完了" }
  //   ],
  //   "未完了": [
  //     { id: 2, status: "未完了" },
  //     { id: 3, status: "未完了" },
  //     { id: 7, status: "未完了" }
  //   ]
  // }

  const user = {
    name: "田中",

    // メソッドの定義
    greet: function () {
      // setTimeout のコールバックで通常の関数を使用
      setTimeout(function () {
        console.log(`こんにちは、${this.name}です`);
        // this.name は undefined になる
        // なぜなら、この function() のスコープでの this はグローバルを指すため
      }, 1000);
    },

    // 別のメソッド - こちらは正しく動作する例
    greetCorrect: function () {
      // アロー関数を使用
      setTimeout(() => {
        console.log(`こんにちは、${this.name}です`);
        // "こんにちは、田中です" と出力される
        // アロー関数は親スコープの this を維持するため
      }, 1000);
    },
  };

  // デフォルト引数の設定
  function rollDie(numSize = 6) {
    return Math.floor(Math.random() * numSize + 1);
  }
  console.log(rollDie()); // 引数を設定しなかった場合、デフォルト値の6が適用される
  const greed = (msg = "こんにちわ", person = "誰か") => {
    console.log(`${msg}、${person}さん`);
  };
  // 飛ばしたい時はundefinedを使用する
  console.log(greed(undefined, "田中"));

// スプレッド構文
  // 列挙可能なオブジェクトなら展開可能
  const nums = [13, 4, 5, 6, 9, 56];
  console.log(Math.max(...nums)); // 出力:中に入るのはnumsの配列の値、配列を展開できる。
  console.log(...nums); // 出力:13 4 5 6 9 56
  const str = "Hello";
  console.log(...str); // H e l l o 1文字づつ展開される

  // 配列リテラル
  const num1 = [1, 2, 3, 4, 5, 6];
  const num2 = [7, 8, 9, 10, 11, 12];
  const newArray = [...num1, 100, 101, 102, 103, ...num2]; // 新しい配列を合体して作成できる
  console.log(newArray);

  // 元の配列は変更せず、新しく作成される配列は別の配列として作成される
  const num1Copy = [...num1]; // 1,2,3,4,5,6と中身は同じ配列だが、、、
  console.log(num1 === num1Copy); // falseになる

  // stringを展開して一文字づつを値にした配列を作成することも可能
  const string = "あいうえお";
  const array = [...string];
  console.log(array); // あ、い、う、え、お

  // オブジェクトリテラルの場合
  const feline = {
    legs: 4,
    family: "猫科",
  };

  const canine = {
    family: "犬科",
    bark: true,
  };

  const cat = { ...feline, color: "black" };
  // console.log(cat);

  // 合体可能だが、共通のプロパティのfamilyは後から展開した方の値に上書きされる。。。
  const catDog = { ...feline, ...canine };
  // console.log(catDog);

  // 例)ユーザーが入力したデータを受け取る
  const formData = {
    email: "xxx@gmail.com",
    password: "secret",
    username: "John",
  };

  // 元のオブジェクトformDataを直接更新するのではなく、新しいオブジェクトuserとして、formDataをコピーして、その後にプロパティを追加していく。
  const user = { ...formData, id: 123, isVerified: false };
  console.log(user);
  console.log(formData);

  // レスト構文 残余引数、スプレッド構文に似ているが違うもの
  function sum() {
    return arguments.reduce((total, num) => total + num);
  }
  // sum(1, 2, 3);

  function sum(...nums) {
    console.log(nums);
    return nums.reduce((total, num) => total + num);
  }
  sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

  // 残りのものに引数が入る
  function runResult(gold, silver, ...rest) {
    console.log(`金: ${gold}`);
    console.log(`銀: ${silver}`);
    console.log(`その他: ${rest}`);
  }

  // 第一引数に"田中くん",第二引数に"マイケル"それ以降の引数はすべてrestの引数に配列として入る。
  runResult(
    "田中くん",
    "マイケル",
    "Johnくん",
    "smithさん",
    "エミリー",
    "ミッシェル"
  );

  function calculateTotal(shopName, date, ...prices) {
    console.log(shopName); // 'スーパー' (string)
    console.log(date); // '2024-01-01' (string)
    console.log(prices); // [200, 300, 500, 1000] (number[]配列)

    // prices配列に対してreduceを使って合計を計算
    const total = prices.reduce((sum, price) => sum + price, 0);
    // 1周目: sum(0) + price(200) = 200
    // 2周目: sum(200) + price(300) = 500
    // 3周目: sum(500) + price(500) = 1000
    // 4周目: sum(1000) + price(1000) = 2000

    return `${date}の${shopName}での合計金額は${total}円です。`;

 // 分割代入
  const scores = [12345, 34234, 4343, 344343, 99999, 34343];

  // 分割代入を使用すると、変数の順番に配列の順が入っていく。
  const [gold, silver, bronze] = scores;
  console.log(gold);

  // レスト構文を使用すると残りの値を格納することもできる
  const [golden, ...rest] = scores;
  console.log(...rest);

  // オブジェクトの分割代入:頻度高め、使用したい情報だけを取り出して使用することが多い。
  // オブジェクトから個別のプロパティを変数に割り当てることができる
  // 基本プロパティ名と一緒、変数名を指定することもできる
  const user = {
    email: "string@gmail.com",
    password: "string0000",
    firstName: "taro",
    lastName: "yamada",
    born: 1999,
    died: 2100,
    city: "NewYork",
    state: "California",
  };

  const user2 = {
    email: "string@gmail.com",
    password: "string0000",
    firstName: "taro",
    lastName: "yamada",
    born: 1999,
    city: "NewYork",
    state: "California",
  };

  const { firstName, lastName, email } = user;

  // :の後に変数名を指定すると変数の名前も変更することができる
  const { born: birthYear } = user;
  console.log(birthYear); // 1999

  // 変数の初期値の設定もできる
  const { died = "N/A" } = user2;
  console.log(died);

// 関数パラメーターの分割代入
  const user = {
    email: "string@gmail.com",
    password: "string0000",
    firstName: "taro",
    lastName: "yamada",
    born: 1999,
    died: 2100,
    city: "NewYork",
    state: "California",
  };

  const user2 = {
    email: "string@gmail.com",
    password: "string0000",
    firstName: "John",
    lastName: "Smith",
    born: 1999,
    city: "NewYork",
    state: "California",
  };

  // 引数として渡ってきたuserオブジェクトは、パラメーターの段階で、分割代入される
  // Reactで頻繁に使用
  function fullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
  }

  console.log(fullName(user2));

  const movies = [
    { title: "Amadeus", score: 99 },
    { title: "Bool", score: 80 },
    { title: "Candy", score: 79 },
    { title: "Eden", score: 59 },
    { title: "titan", score: 92 },
  ];

  // コールバック関数でも分割代入を使用可能 scoreプロパティをそのまま使用している
  const hightMovies = movies.filter(({ score }) => score >= 90);

  console.log(hightMovies);

  // map関数を使用
  const review = movies.map(({ title, score }) => {
    return `${title}は${score}点です。`;
  });

  console.log(review);

// HTMLからIDを取得する
const banner = document.getElementById("toc");

// HTMLからタグをすべて取得する
const allImg = document.getElementsByTagName("div");

// for-ofでループを回すこともできる。
for (let img of allImg) {
  img.src =
    "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Partridge_Silkie_hen.jpg/900px-Partridge_Silkie_hen.jpg";
}

// HTMLからクラス名をすべて取得する
const classes = document.getElementsByClassName("square");
for (let img of classes) {
  img.src =
    "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Partridge_Silkie_hen.jpg/900px-Partridge_Silkie_hen.jpg";
}

// 最初に見つけた要素を一つだけ返す、属性も使用できる。aタグのtitle属性とか。
const selector = document.querySelector("a[title='ヒツジ']");

// 当てはまる全ての要素を取得できる
// aタグのlink要素だけを取得して表示する
const links = document.querySelectorAll("p a");
for (let link of links) {
  console.log(link.href);
}
console.log(links);

// // 取得した要素の操作。コンセプトを理解する。
const h1 = document.querySelector("h1");

// textContentはnode内の全てのコンテンツを取得する
// innerTextはページ上で見えてるものを取得する。

const allLink = document.querySelectorAll("a");
for (let link of allLink) {
  link.innerText = "私はリンクです！！！";
}

// p要素の中の全てのHTML要素が取得できる。html要素を含めて更新
const head = (document.querySelector("h1").innerHTML =
  "<b>ううううわおお！！！！</b>");
console.log(head);

// 属性操作について。
// 取得する形式が違うかったりするので注意が必要。
// getAttribute
const firstLink = document.querySelector("a");
console.log(firstLink.getAttribute("href")); // /wiki/%E5%BA%AD 相対パス,HTMLの要素そのまま

const firstLinks = document.querySelector("a").href;
console.log(firstLinks); // http://127.0.0.1:5500/wiki/%E5%BA%AD 絶対パス,完全なURL

// setAttributeで取得した属性に対して新しい値をセットすることもできる
console.log(firstLink.setAttribute("href", "https://google.com"));

const eggImg = document.querySelector("img");

eggImg.setAttribute("src", "https://devsprouthosting.com/images/chicken.jpg");
eggImg.setAttribute("alt", "chicken");
console.log(eggImg);

// CSSスタイルを変更する
const h1 = document.querySelector("h1");
console.log(h1.style); // これでCSSを確認しても、CSSファイルで設定されたCSSは当たっていない、インラインスタイルのCSSだけが確認できる。
console.log((h1.style.color = "green")); // JSで直接スタイルを変える
console.log((h1.style.fontSize = "1.8rem")); // 必ずstringでプロパティを定義する必要がある。

const links = document.querySelectorAll("a");
for (let link of links) {
  link.style.color = "pink";
  link.style.textDecorationColor = "magenta";
  link.style.padding = "0 2em";
}

const div = document.querySelector("#container");
const divImg = document.querySelector("img");
div.style.textAlign = "center";
divImg.style.width = "150px";
divImg.style.borderRadius = "50%";

// 配列の中にcolorのプロパティの値を格納し、取得したspan要素に順番に色を当ててレインボーにする。
const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
const strings = document.querySelectorAll("span");

let i = 0;
for (let string of strings) {
  string.style.color = colors[i];
  i++;
}

const h2 = document.querySelector("h2");

// クラスを追加していくことができる
h2.classList.add("pink");
h2.classList.add("border");

// クラスを外すこともできる
h2.classList.remove("border");

// クラスの付け外しをすることもできる、ハンバーガーメニューのボタンとか
// 今の状態がそのクラスがついているかどうかを判断してtoggleさせている
h2.classList.toggle("pink");

const listItem = document.querySelectorAll("li");
for (let item of listItem) {
  item.classList.toggle("highlight");
}

const firstBold = document.querySelector("b");

// 親要素を辿ることができる
console.log(firstBold.parentElement);

// 子要素も同様に辿れる
console.log(firstBold.children);

const squareImg = document.querySelector(".square");

// 次の要素を取得する
console.log(squareImg.nextElementSibling); // 実際の兄弟"要素"が返ってくる
// console.log(squareImg.nextSibling); // ノードが返ってくる

// 前の要素を取得する
console.log(squareImg.previousElementSibling);

// 要素を作成してHTMLに挿入する
// appendChild ver
const newImg = document.createElement("img");
console.log(
  (newImg.src =
    "https://plus.unsplash.com/premium_photo-1732736768058-42f76dc6e6e3?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8")
);
newImg.classList.add("square");
document.body.appendChild(newImg);

// 新しいh3要素を作成して、
const newH3 = document.createElement("h3");

// h3の中身を更新して
newH3.innerText = "これは新規追加のh3です!!";

// body要素等に挿入する
document.body.appendChild(newH3);

// append() ver
// 最後に直接挿入することができる
const p = document.querySelector("p");
p.append(
  "Whooooooooooooooooooooooooo",
  "aaaaaaaaaaaaaaaaa",
  "eeeeeeeeeeeeeeeee"
);

const newB = document.createElement("b");

// 先頭に直接追加する
newB.append("やっぴーー");

p.prepend(newB);

// 兄弟要素に追加する
const newH2 = document.createElement("h2");
newH2.append("鶏だよ");

const h1 = document.querySelector("h1");
h1.insertAdjacentElement("afterend", newH2); // (どこのポジションに, 何を追加するか)

const h3 = document.createElement("h3");
h3.innerText = "これはH3";
newH2.after(h3);

const container = document.querySelector("#container");

// for文でid:containerの中にボタン作成を100回繰り返す。
for (let i = 0; i < 100; i++) {
  const newButton = document.createElement("button");
  newButton.innerText = `ボタン${i + 1}`;
  container.appendChild(newButton);
}

// remove()を使用すれば削除される自分自身だけ考えればOK
const img = document.querySelector("img");
img.remove();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ポケモン図鑑</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <h1>ポケモン図鑑</h1>
    <section id="container"></section>
    <script src="app.js"></script>
  </body>
</html>

#CSS
.pokemon {
  display: inline-block;
  text-align: center;
}

.pokemon img {
  display: block;
}

const container = document.querySelector("#container");
const baseUrl =
  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/";

for (let i = 1; i <= 1025; i++) {
  const pokemon = document.createElement("div"); // 外側のdiv
  pokemon.classList.add("pokemon");

  const label = document.createElement("span"); // 番号を表示するためのlabel
  label.innerText = `#${i}`; // ラベルのテキストを#1,#2,#3...のようにテキストを挿入

  const newImg = document.createElement("img"); // 画像を表示するためのimg
  newImg.src = `${baseUrl}${i}.png`;

  // divの中に作詞したlabel,newImgを入れる
  pokemon.appendChild(newImg);
  pokemon.appendChild(label);

  // id:containerの中に作成されたdiv要素自体を入れる
  container.appendChild(pokemon);
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSEvent</title>
  </head>
  <body>
    <h1>Event</h1>

    <!-- htmlに直接記述することもできるが使い回ししづらいなどあるので非推奨 -->
    <button onclick="console.log('クリックされました！');">Click Me</button>
    <button id="v2">Click JS ver</button>
    <button id="v3">Click JS v3</button>

    <button id="hello">Hello</button>
    <button id="goodbye">Goodbye</button>

    <script type="module" src="app.js"></script>
  </body>
</html>

const btn = document.querySelector("#v2");

// クリックイベントを登録する
btn.onclick = function () {
  console.log("クリックされたよ！！");
};

function scream() {
  console.log("入ったよ！！");
}

// このやり方だと、複数のイベントを登録できない。。。
btn.onmouseenter = scream;
btn.onclick = function () {
  console.log("2個目の処理");
};

const h1 = (document.querySelector("h1").onclick = function () {
  console.log("h1だよ！");
});

// addEventListener(推奨),第3引数を設定して、オプションを設定できる。1回だけの呼び出しにしたりとか。
const button = document.querySelector("#v3");
button.addEventListener(
  "click",
  function () {
    alert("発火！！");
  },
  { once: true }
);

const helloBtn = document.querySelector("#hello");
const byeBtn = document.querySelector("#goodbye");

helloBtn.addEventListener("click", function () {
  console.log("hello");
});
byeBtn.addEventListener("click", function () {
  console.log("goodbye");
});

// ランダムなrgb()の値を生成するための関数
const makeRandomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  return `rgb(${r},${g},${b})`;
};

// イベントの中のコールバック関数の中ではthisはその関数がコールバックとして設定されている要素になる。
const buttons = document.querySelectorAll("button");
for (let button of buttons) {
  button.addEventListener("click", colorRize);
}

const h2s = document.querySelectorAll("h2");
for (let h2 of h2s) {
  h2.addEventListener("click", colorRize);
}

function colorRize() {
  this.style.backgroundColor = makeRandomColor();
  this.style.color = makeRandomColor();
}

#index.html
 <div id="container">
      クリックして隠す
      <button id="changeColor">色を変える</button>
    </div>
<style>
    .hide {
      display: none;
      visibility: hidden;
    }
  </style>

#app.js
const button = document.querySelector("#changeColor");
const container = document.querySelector("#container");

button.addEventListener("click", function (e) {
  e.stopPropagation(); // バブリングをストップするプロパティ
  container.style.backgroundColor = makeRandomColor();
});

container.addEventListener("click", function () {
  container.classList.add("hide");
});

const makeRandomColor = () => {
  const r = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  return `rgb(${r},${g},${b})`;
};

// フォームのイベント
const tweetForm = document.querySelector("#tweetForm");

// 送信した時のイベント
tweetForm.addEventListener("submit", function (e) {
  e.preventDefault(); // デフォルトの挙動を止める,formはデフォルトでページ遷移してしまうので止める。

  // formのelementsの中のname属性のvalueを取得する
  const userNameInput = tweetForm.elements.username;
  const postInput = tweetForm.elements.tweet;

  addPost(userNameInput.value, postInput.value);

  // 送信後はinputの中身を空にする
  userNameInput.value = "";
  postInput.value = "";
});

// 受け取った値で新しいポストを作成する処理
const addPost = (userNameInput, postInput) => {
  const newPost = document.createElement("li");
  const bTag = document.createElement("b");
  const tweets = document.querySelector("#tweets"); // ポストを表示する場所

  bTag.append(userNameInput); // bタグの中にuserNameInputで取得した値を入れる
  newPost.append(bTag); // newPostの中にbTagを挿入する
  newPost.append(` - ${postInput}`); // newPostの中にpostInputで取得した値を入れる

  tweets.append(newPost); // tweetsの中にnewPostを挿入する
};

// イベントデリゲーション
// 要素自身ではなく、親要素に処理を任せる
tweets.addEventListener("click", function (e) {
  if (e.target.nodeName === "LI") {
    e.target.remove();
  } else if (e.target.nodeName === "B") {
    e.target.parentElement.remove();
  }
});

const p1 = {
  score: 0,
  button: document.querySelector("#p1Button"),
  display: document.querySelector("#p1Display"),
};

const p2 = {
  score: 0,
  button: document.querySelector("#p2Button"),
  display: document.querySelector("#p2Display"),
};

const resetButton = document.querySelector("#reset");
const winningScoreSelect = document.querySelector("#winningScore");

let winningScore = 3;
let isGameOver = false;

function updateScores(player, opponent) {
  if (!isGameOver) {
    player.score += 1;
    player.display.textContent = player.score;

    if (player.score === winningScore) {
      isGameOver = true;
      player.display.classList.add("winner");
      opponent.display.classList.add("loser");
      player.button.disabled = true;
      opponent.button.disabled = true;
    }
  }
}

p1.button.addEventListener("click", function () {
  updateScores(p1, p2);
});

p2.button.addEventListener("click", function () {
  updateScores(p2, p1);
});

// 勝利得点の変更
winningScoreSelect.addEventListener("change", function () {
  winningScore = parseInt(this.value);
  reset();
  console.log(typeof winningScore);
});

// リセットボタン
resetButton.addEventListener("click", reset);

// 得点のリセット処理関数
function reset() {
  isGameOver = false;

  // p1,p2それぞれに同じ処理を加える
  for (let p of [p1, p2]) {
    p.score = 0;
    p.display.textContent = 0;
    p.display.classList.remove("winner", "loser");
    p.button.disabled = false;
  }
}

const multiply = (x, y) => x * y;

const square = (x) => multiply(x, x);

const isRightTriangle = (a, b, c) => square(a) + square(b) === square(c);

console.log("before!!!");

isRightTriangle(3, 4, 5);

console.log("after!!!");

console.log("サーバーにリクエストを送信"); // 最初に実行される処理

// この処理に来た時点で、ブラウザにsetTimeoutで3秒測るように依頼だけをして次に進む、タイマーの管理はブラウザーがする
setTimeout(() => {
  console.log("サーバーからレスポンスが来ました！"); // 最後に実行される処理、3秒経過後にブラウザからコールバックを実行するように依頼が来る
}, 3000);

console.log("ここがファイルの末端"); // 2番目に実行される処理

// コールバックがネストしまくるとコードの見通しが悪くなる。。。
setTimeout(() => {
  document.body.style.background = "red";
  setTimeout(() => {
    document.body.style.background = "orange";
    setTimeout(() => {
      document.body.style.background = "green";
      setTimeout(() => {
        document.body.style.background = "blue";
      }, 1000);
    }, 1000);
  }, 1000);
}, 1000);

// promise
const fakeRequestPromise = (url) => {
  return new Promise((resolve, reject) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
      if (delay > 4000) {
        reject("コネクションタイムアウト");
      } else {
        resolve(`ダミーデータ(${url})`);
      }
    }, delay);
  });
};

fakeRequestPromise("yelp.com/page1")
  // 1個目のリクエスト
  .then((data) => {
    console.log("成功1");
    console.log(data);
    return fakeRequestPromise("yelp.com/page2"); // thenの中でpromiseを返すことで、次のthenに繋げることができる
  })

  // 2個目のリクエスト
  .then((data) => {
    console.log("成功2");
    console.log(data);
    return fakeRequestPromise("yelp.com/page3");
  })

  // 3個目のリクエスト
  .then((data) => {
    console.log("成功3");
    console.log(data);
  })

  // どこかで失敗した場合の処理
  .catch((error) => {
    console.log(error);
    console.log("失敗！");
  });

// promiseの作成
const fakeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const rand = Math.random();
    setTimeout(() => {
      if (rand < 0.7) {
        resolve("dummy-data"); // 成功の場合に返す値
        return; // resolveの後はreturnで関数の処理を終わらせる。resolveの後にrejectを実行させないため
      }
      reject("コネクションタイムアウト"); // 失敗の場合に返す値
    }, 1000);
  });
};

fakeRequest("/hoge/hoge1")
  .then((data) => {
    console.log("成功", data);
  })
  .catch((err) => {
    console.log("エラー！", err);
  });

// asyncをつけることでPromiseにできる
const sing = async () => {
  return "らららららら"; // Promiseを返す
};

// Promiseを返すのでthen()が使える、dataの中には Promiseのresolve(成功時の値)が入ってくる
sing()
  .then((data) => {
    console.log("成功：", data); // 結果：成功:らららららら
  })
  .catch((err) => {
    console.log("エラ−！！", err);
  });

const login = async (username, password) => {
  if (!username || !password) {
    throw new Error("ユーザー名またはパスワードがありません");
  }
  if (password === "secret") {
    return "ようこそ！！！";
  }

  throw new Error("パスワードが間違ってます");
};

const fakeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
      if (delay > 4000) {
        reject("コネクションタイムアウト"); // 失敗時の処理
      } else {
        resolve(`ダミーデータ(${url})`); // 成功時の処理
      }
    }, delay);
  });
};

async function makeRequest() {
  try {
    // この中のawaitで発生したエラー（reject）は全てcatchされます
    const data1 = await fakeRequest("/hoge1"); // リクエストをawaitして変数に格納する
    console.log(`data1: ${data1}`);
    const data2 = await fakeRequest("/hoge2"); // リクエストをawaitして変数に格納する
    console.log(`data2: ${data2}`);
  } catch (e) {
    // どちらかのリクエストでrejectされた場合、
    // eにはrejectで渡された"コネクションタイムアウト"が入ってくる
    console.log("エラー発生！！！", e);
  }
}

makeRequest();