// 基本アロー関数で記述する
const fnArrow = (number) => {
  console.log(number);
  return number * 2;
};

// オブジェクトをそのまま返すときは()で挟む
const fnArrowObj = (number) => ({
  result: number * 2,
});

console.log(fnArrow(2)); // 結果は4
console.log(fnArrowObj(2)); // 結果はresult: 4

// これは動作しません（エラー）
const getData = () => {
  name: "John",
  age: 30
};

// これが正しい書き方（丸括弧で囲む）
const getData = () => ({
  name: "John",
  age: 30
});

// 一つのファイルにつき一つだけデフォルトエクスポートを設定できる。
const funcB = () => {
  console.log("funcB output");
};

export default funcB;

import funcB from "./module.js";

funcB();

// 引数の中に関数が返ってくる
function print(callback) {
  console.log(callback); // fnの関数が入っている
  const result = callback(4); // callback(4)は渡された関数fn(4)として実行される
  console.log(result); // 計算結果8が表示される
}

// numberの引数を初期値3と設定する
function fn(number) {
  return number * 2;
}

// 動きなど、デバックしたい時にデバック行の前に挿入
// debugger;

// OKパターン🥰
// 関数のみ渡す
print(fn);

// NGパターン🤔
print(fn());
// これだとfn関数が "実行" されてしまい、実行結果が渡ってしまう。。。
// コールバックとして関数を渡すときは実行せずに ()をつけずに関数のみ渡すよう注意

// htmlのbutton要素を取得して変数buttonを定義
const button = document.querySelector("button");

// コンソールに"hello"を出力する関数
const helloFunc = (e) => {
  console.log(e.target.textContent);
  console.log("hello");
};

// buttonがクリックされた際のイベント
// あらかじめ定義した関数を実行
button.addEventListener("click", helloFunc);

// もしくは直接処理を記述
button.addEventListener("click", () => {
  console.log("weeeee");
});

const arry = [10, 20, 30, 40, 60, 80, 100];

// mapメソッドを使用した場合
// 新しい配列newArry2を定義
const newArry2 = arry.map((val) => {
  console.log(val); // valはarryの配列の中身を一つづつ取り出している
  return val * 2; // 取り出してきたval一つづつに対して*2を実行
});

console.log(newArry2);

// filterメソッドを使用して値が50以上のもののみをnewArry3に格納する
const newArry3 = newArry2.filter((val) => val > 50);
console.log(newArry3);

// 連結することも可能
const newArry2 = arry.map((val) => val * 2).filter((val) => val > 50);
// 配列arryの中で値を2倍し、かつ値が50以上のものを抽出してnewArry2を作成する。

// オブジェクトの定義
const objAddress = { country: "Japan", state: "Tokyo", city: "Shinjuku" };

// 分割代入を使った書き方
const fnObject = ({ country, state, city }) => {
  console.log(`国名: ${country}`);
  console.log(`都市名: ${state}`);
  console.log(`町名: ${city}`);
};

// オブジェクトの定義
const objAddress = { country: "Japan", state: "Tokyo", city: "Shinjuku" };

// 分割代入を使った書き方
const fnObject = ({ country, state, city }) => {
  console.log(`国名: ${country}`);
  console.log(`都市名: ${state}`);
  console.log(`町名: ${city}`);
};

fnObject(objAddress);

// 例2
const user = {
  name: "トム",
  age: 27,
  hobby: "サウナ",
};

const { name, age, hobby } = user;
console.log(`${name}さんは${age}歳で趣味は${hobby}です！`);

// 配列を準備
const partyPack = [3, 1, 4, 1, 5, 10, 2, 6];
const snack = [1, 2, 3, 15, 72];

// const result = Math.max(3, 1, 4, 1, 5, 10, 2, 6);
// スプレッド演算子、...の後に配列の変数を渡すと、配列の保持する要素が展開されて引数に渡される
const result = Math.max(...partyPack, ...snack); //数値の中で1番大きいものを取り出す
console.log(result);

// 元ある配列から、新しい配列を作成する際に使用する
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1]; // arr1を展開している
let newArr1 = arr1;

// newArr1に1000を追加すると、newArr1はもちろん配列に1000が加わるが、
// 参照元のarr1の配列にも1000が加わる
newArr1.push(1000);
console.log(newArr1);
console.log(arr1);

console.log("ここからはスプレッド演算子");

// だが、スプレッド演算子で新しく作成した配列newArrに300を加えて出力すると、
// newArrだけに変更が加えられて、参照元のarr1には追加されない。新しい配列として定義される
newArr.push(300);
console.log(newArr);
console.log(arr1);

// オブジェクトの場合
const obj = {
  name: "Tom",
  age: 22,
};
const newObj = { ...obj };
console.log(newObj);

const obj2 = { ...obj, mail: "email@gmail.com" };
console.log(obj2);

// 三項演算子（ ? : ）
// if文を簡略化する際に使用
const a = true;
let resultA = a ? 10 : -1;

console.log(resultA);

// よく使う書き方
function getResult() {
  return a ? "aはtrue" : "aはfalse";
}

console.log(getResult());

// 成績評価の例2
const score = 80;

let result = score >= 80 ? "合格" : "不合格";
console.log(`点数は${score}点なので${result}です。`);

// ラーメンの注文処理をasyncで書いてみる
setOrder();

// 非同期で実行
async function setOrder() {
  try {
    // 注文が入る
    console.log("ラーメン１丁入りました！");

    // 注文を復唱する
    await new Promise((resolve) => {
      console.log("へい！ラーメンかしこまり！！！！");
      resolve();
    }, 1000);

    // スープ完成
    await new Promise((resolve) => {
      setTimeout(() => {
        console.log("スープができたぜ！");
        resolve();
      }, 3000);
    });

    // ラーメン完成！
    await new Promise((resolve) => {
      setTimeout(() => {
        console.log("ラーメン完成！！");
        resolve();
      }, 2000);
    });

    // エラーの場合の出力
  } catch (e) {
    console.log("注文はお受けできません。。。", e);
  }
}

    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);



 // アロー関数でも定義できる
      const Example = () => {
        return (
          <div>
            <h2>私は関数コンポーネントですよ</h2>
            <h3>ヘディング3</h3>
          </div>
        );
      };

      //   先頭が大文字じゃなく小文字だと、htmlのタグと認識されてしまうため
      root.render(<Example />);

// 作業ディレクトリに移動する
cd /Users/作業ディレクトリ

// viteをインストール フォルダ名を決める
npm create vite@latest my-react-blog

選択画面では
React
JavaScript or TypeScript を選択

// 作成したディレクトリに移動
cd my-react-blog

// 新しいVS codeを立ち上げr
code .

// 用意されたnode_modulesをインストールする
npm install

// 開発環境を立ち上げる(NPM SCRIPTSのdevを押すでもOK)
npm run dev

// 自動的に立ち上がるローカルホストをクリックしてブラウザ立ち上げ
http://localhost:3000/

開発準備完了！

const List = () => {
  return (
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
    </ul>
  );
};

const PrimaryButton = () => {
  return (
    <>
      <button>メインのボタン</button>
    </>
  );
};

const SecondaryButton = () => {
  return (
    <>
      <button>2番目のボタン</button>
    </>
  );
};

export { List, PrimaryButton, SecondaryButton };

import "./Child.css";

// コンポーネント呼び出せばタブ補完で読み込んでくれた！
import { List, PrimaryButton, SecondaryButton } from "./List";

const Child = () => {
  return (
    <div className="component">
      <h3>Hello Component</h3>
      <List />
      <div>
        <p>メインのボタン</p>
        <PrimaryButton /> // コンポーネントの呼び出し
        <SecondaryButton /> // コンポーネントの呼び出し
      </div>
    </div>
  );
};

// デフォルトエクスポート
export default Child;

// Childコンポーネントを下記ファイルから読みこむ、デフォルトエクスポートの読み込み
import Child from "./components/Child";

const Example = () => {
  return <Child />;
};

export default Example;

import "./Child.css";

const Child = () => {
  return (
    <>
      <div className="component">
        <h3>Hello Component</h3>
      </div>
      <h3>Hello Fragment</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ab
        iure possimus quis asperiores placeat tempora ullam! Animi vero aliquid
        repellat veritatis fugiat laboriosam enim quibusdam sint odit vitae
        dolorem iste ea amet sapiente, suscipit commodi corrupti possimus
        tempora dolores omnis illo optio! Ab laboriosam magni culpa neque veniam
        mollitia?
      </p>
    </>
  );
};

export default Child;

/* POINT 式と文
式：何らかの値を返すもの（変数に代入できるもの）
文：変数宣言、for文、if文、switch文やセミコロンで区切るもの。
*/

import "./Child.css";

const Child = () => {
  const hello = () => {
    console.log("hello");
  };

  return (
    <div className="component">
      <h3>式と文</h3>
      {hello()} {/* 関数を実行して返す */}
      <p>trueならHelloを返す {true ? "Hello" : "Bye"}</p>{" "}
      {/* 三項演算子を値で返す */}
      <p>計算式は返す{1 * 20}</p>
    </div>
  );
};

export default Child;

import "./Expression.css";

const Expression = () => {
  // 変数・関数を定義できる
  const title = "Expression";

  // 配列を定義して一つづつ展開してHTMLに表示できる
  const arry = ["item1", "item2", "item3", "item4"];

  // 関数も定義して使える
  const hello = (arg) => `${arg} Function`;
  const Jsx = <h3>Hello JSX</h3>;

  return (
    <div className={title.toLowerCase()}>
      <h3>Hello {title}</h3> {/* 変数は{}で使用できる */}
      <h3>{arry}</h3> {/* 変数arryは配列なので中身が一つづつ展開される */}
      <h3>{hello("hello")}</h3>
      {/* 画面上に表示されないコメントの書き方 */}
      {<h3>Hello JSX</h3>}
      {Jsx}
    </div>
  );
};

export default Expression;

// Example.jsx（親コンポーネント）
const Example = () => {
  return (
    <>
      <Child />  {/* propsなし */}
      <Child color="red" />  {/* colorというpropsを渡している */}
      <Child color="blue" message="こんにちは" />  {/* 複数のpropsを渡せる */}
    </>
  );
};

// Child.jsx（子コンポーネント）
const Child = (props) => {
  // propsは親から渡された値をすべて持つオブジェクト
  console.log(props);  // { color: "red" } や { color: "blue", message: "こんにちは" }
  
  return (
    <div className={`component ${props.color}`}>
      <h3>{props.message}</h3>
    </div>
  );
};

import "./Child.css";

// 分割代入も使用可能
const Child = ({ color, message, snack, juice }) => {
  return (
    <div className={`component ${color}`}>
      <h3>Hello Component</h3>
      <h3>{message}</h3>
      <p>
        今日のおやつは{snack}で、飲み物は{juice}です。
      </p>
    </div>
  );
};

export default Child;

import Child from "./components/Child";

const Example = () => {
  const hello = (arg) => `Hello ${arg}`;

  // オブジェクトを定義
  const array = {
    color: "red",
    num: 124,
  };
  return (
    <>
      <Child
        {...array}
        name="ジョン"
        age="27"
        hobby="サウナ"
        from="香川県"
        fn={hello}
        bool
        obj={{
          name: "Tom",
          age: 18,
        }}
      />
      <Child
        {...array}
        name="真一郎"
        age={10}
        hobby="旅行"
        from="島根県"
        fn={hello}
        obj={{
          name: "emy",
          age: 10,
        }}
      />
    </>
  );
};

export default Example;

import "./Child.css";

// 分割代入も使用可能
const Child = ({ color, name, age, hobby, from, num, fn, bool, obj }) => {
  return (
    <article className={`component ${color}`}>
      <h2>私の名前は{name}です。</h2>
      <p>
        年齢は{age}歳で、趣味は{hobby}です。
      </p>
      <p>出身地は{from}です！</p>
      <h3>好きな素数は{num}です。</h3>
      <p>{fn("の意味はこんにちわ!!")}</p>
      <p>ブーリアンは定義されている？{bool ? "true" : "false"}</p>
      <p>
        名前は{obj.name}で、年齢は{obj.age}です。
      </p>
    </article>
  );
};

export default Child;

import Profile from "./components/Profile";
import Container from "./components/Container";

const profile = [
  { name: "Takashi", age: 19, country: "Japan", color: "blue" },
  { name: "Jane", age: 28, country: "UK", color: "red" },
];

const Example = () => {
  return (
    <div>
      {/* コンポーネントを呼び出す際に終了タグをつけて間にコンポーネントを挟んで使用することもできる */}
      <Container title="Childrenとは？">
        {/* タグで囲まれた中身がChildrenとされる */}
        <Profile {...profile[0]} />
        <Profile {...profile[1]} />
      </Container>
    </div>
  );
};

export default Example;

import "./Container.css";
import Profile from "./Profile";

// childrenをpropsで渡す
const Container = ({ title, children }) => {
  return (
    <div className="container">
      <h3>{title}</h3>
      {/* 👍childrenを使う */}
      {children}

      {/* 👎これじゃダメなの？ */}
      {/* <Profile {...profile[0]} /> */}
    </div>
  );
};

export default Container;

// このようなHTMLは、
  const sample2 = (
    <div>
      <h1>Hello!</h1>
      <h2>Good to see you.</h2>
    </div>
  );

// JSXだとこのような形で関数形式で出力される
    React.createElement("div", null),
    React.createElement("h1", null, "Hello!"),
    React.createElement("h2", null, "Good to see you.")

const Example = () => {
  // クリックされた時に処理したい関数を定義する
  const clickHandler = () => {
    alert("クリックされましたぜ！");
  };

  const clickHandler2 = () => {
    console.log("こっちはコンソールに出力！");
  };

  return (
    <>
      {/* 関数を即座に実行しないように注意！関数名の最後に()はつけない！ */}
      {/* onClickで関数を指定してクリックイベントを登録する */}
      <button onClick={clickHandler}>クリックしてね</button>
      <button onClick={clickHandler2}>クリックしてね2</button>
    </>
  );
};

export default Example;

import "./Example.css";

const Example = () => {
  return (
    <div>
      <h3>コンソールを確認してください。</h3>
      {/* クリックされた時 */}
      <button className="c-btn" onClick={() => console.log("onClick検知")}>
        ClickMe
      </button>
      <label>
        入力値のイベント：
        <input
          type="text"
          // フォーカスされた時
          onFocus={() => console.log("onFocus検知")}
          // フォーカスが外れた時
          onBlur={() => console.log("onBlur検知")}
        />
      </label>
      <div>
        <label>
          入力値を取得：
          {/* 値が変更された時、eで値を取得してその中身をコンソールに出力 */}
          <input type="text" onChange={(e) => console.log(e.target.value)} />
        </label>
      </div>
      <div
        className="hover-event"
        // マウスが要素に入った時
        onMouseEnter={() => console.log("カーソルが入ってきました。")}
        // マウスが要素から離れた時
        onMouseLeave={() => console.log("カーソルが出ていきました。")}
      >
        ホバーしてね！
      </div>
    </div>
  );
};

export default Example;

// 例：誰かに話しかけられた時の状況

const 話しかけられた = (状況) => {
  console.log(状況.誰が);          // 話しかけてきた人
  console.log(状況.何を);          // 言われた内容
  console.log(状況.いつ);          // 話しかけられた時間
}

// Reactでの例
const handleInput = (e) => {
  console.log(e.target);         // 入力された要素（input自身）
  console.log(e.target.value);   // 入力された値
  console.log(e.timeStamp);      // いつ入力されたか
}

import { useState } from "react";

const Example = () => {
  // useStateで値を保存して更新する
  // [現在の値, 更新用の関数] = useState("初期値")
  const [val, setVal] = useState(0);

  return (
    <>
      <input
        type="text"
        onChange={(e) => {
          // e.target.valueで更新された値を取得し、setVal()で値の状態を保持
          setVal(e.target.value);
        }}
      />
      {/* 保存された値を参照 */}
      <p>入力された値 = {val}</p>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  //   カウントアップ関数
  const countUp = () => {
    setCount((prev) => {
      return prev + 1;
    });
    console.log(count);
  };

  //   カウントダウン関数
  const countDown = () => {
    setCount((prev) => {
      return prev - 1;
    });
  };

  //   リセットして0にする
  const reset = () => {
    setCount(0);
  };

  return (
    <>
      <p>現在のカウント:{count}</p>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
      <button onClick={reset}>リセット</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const personObj = { name: "Tom", age: 18 };
  const [person, setPerson] = useState(personObj);

  // 名前を変更
  // 取得した値を使用するので引数にeを使用する
  const changeName = (e) => {
    setPerson({ name: e.target.value, age: person.age });
  };

  // 年齢を変更
  const changeAge = (e) => {
    setPerson({ name: person.name, age: e.target.value });
  };

  // リセット
  const reset = () => {
    setPerson({ name: "", age: "" });
  };

  return (
    <>
      <h3>Name:{person.name}</h3>
      <h3>Age:{person.age}</h3>

      <input type="text" value={person.name} onChange={changeName} />
      <input type="number" value={person.age} onChange={changeAge} />
      <button onClick={reset}>リセット</button>
    </>
  );
};

export default Example;

// ❌ 良くない例（プロパティの欠落の可能性）
setPerson({ name: e.target.value, age: person.age });

// ✅ 良い例（全プロパティを確実に維持）
setPerson({ ...person, name: e.target.value });

import { useState } from "react";

const Example = () => {
  const personObj = { name: "Tom", age: 18 };
  const [person, setPerson] = useState(personObj);

  // 名前を変更
  // 取得した値を使用するので引数にeを使用する
  const changeName = (e) => {
    // 1. ...person でuseStateで管理している既存のオブジェクトを展開
    // 2. name: e.target.value で特定のプロパティだけを更新
    // 3. 結果として新しいオブジェクトが作られる
    setPerson({ ...person, name: e.target.value });
  };

  // 年齢を変更
  const changeAge = (e) => {
    setPerson({ ...person, age: e.target.value });
  };

  // リセット
  const reset = () => {
    setPerson({ name: "", age: "" });
  };

  return (
    <>
      <h3>Name:{person.name}</h3>
      <h3>Age:{person.age}</h3>

      <input type="text" value={person.name} onChange={changeName} />
      <input type="number" value={person.age} onChange={changeAge} />
      <button onClick={reset}>リセット</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const orderObj = { item: "apple", count: 10 };
  const [order, setOrder] = useState(orderObj);

  // アイテムの更新関数
  const changeItem = (e) => {
    setOrder((prev) => ({ ...prev, item: e.target.value }));
  };

  // オブジェクト内countのUp関数
  const countUp = () => {
    setOrder((prev) => ({ ...prev, count: prev.count + 1 }));
  };

  // オブジェクト内countのDown関数
  const countDown = () => {
    setOrder((prev) => ({ ...prev, count: prev.count - 1 }));
  };

  return (
    <div>
      <h3>Item:{order.item}</h3>
      <h3>Count:{order.count}</h3>
      <input type="text" value={order.item} onChange={changeItem} />
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </div>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const numArray = [1, 2, 3, 4, 5];
  const [nums, setNums] = useState(numArray);
  console.log(nums);

  // クリックされると数字がシャッフルされるイベント
  const shuffle = () => {
    // スプレッド演算子で配列を展開して新しく配列newNumsをコピーして作成
    const newNums = [...nums];

    // pop()メソッドは配列の最後の値を取り出し、変数valueに保存する
    const value = newNums.pop();

    // unshift()メソッドで、取り出して保存したvalueを配列の先頭に追加する
    newNums.unshift(value);

    // setNums関数で新しい配列newNumsで更新する
    setNums(newNums);
  };

  return (
    <>
      {/* 配列を{}で囲むと配列の中身が展開される */}
      <h1>{nums}</h1>
      <button onClick={shuffle}>シャッフル</button>
    </>
  );
};

export default Example;

// ❌ keyなしの場合
{toggle ? (
  <Count title="Aのカウント" />  // 状態が共有されてしまう
) : (
  <Count title="Bのカウント" />  // 状態が共有されてしまう
)}

// ✅ keyありの場合
{toggle ? (
  <Count key="A" title="Aのカウント" />  // 独立した状態
) : (
  <Count key="B" title="Bのカウント" />  // 独立した状態
)}

import { useState } from "react";

const Example = () => {
  const [toggle, setToggle] = useState(true);

  // 親コンポーネントでそれぞれのカウントのステートを定義
  // カウントA用のステート
  const [countA, setCountA] = useState(0);

  // カウントB用のステート
  const [countB, setCountB] = useState(0);

  const toggleComponent = () => {
    setToggle((prev) => !prev);
  };
  return (
    <>
      <button onClick={toggleComponent}>toggle</button>
      {toggle ? (
        // propsでtitle,count,setCountをCountコンポーネントに渡す
        <Count key="A" title="A" count={countA} setCount={setCountA} />
      ) : (
        <Count key="B" title="B" count={countB} setCount={setCountB} />
      )}
    </>
  );
};

// Countコンポーネント
const Count = ({ title, count, setCount }) => {
  const countUp = () => {
    setCount((prevstate) => prevstate + 1);
  };
  const countDown = () => {
    setCount(count - 1);
  };
  return (
    <>
      <h3>
        {title}: {count}
      </h3>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </>
  );
};

export default Example;

import Profile from "./components/Profile";

const Example = () => {
  const persons = [
    {
      id: 1,
      name: "Geo",
      age: 18,
      hobbies: ["運動", "ライブ観戦"],
    },
    {
      id: 2,
      name: "Geo",
      age: 18,
      hobbies: ["sports", "music"],
    },
    {
      id: 3,
      name: "Jon",
      age: 18,
      hobbies: ["sports", "music", "サウナ", "山菜取り"],
    },
  ];

  return (
    <>
      <ul>
        {persons.map((person) => (
        {/* 配列の中のidプロパティをkeyとして設定する */}
          <li key={person.id}>
            {/* 全てのプロパティを渡す */}
            <Profile {...person} />
          </li>
        ))}
      </ul>
    </>
  );
};

export default Example;

const Profile = ({ name, age, hobbies, id }) => {
  return (
    <article>
      <hr />
      <h3>Name: {name}</h3>
      <p>Age: {age}</p>
      <div>
        <p>Hobby:</p>
        <ul>
          {hobbies.map((hobby) => {
            // 趣味の配列のリストのkeyはidとnameとhobbyを連結して出力されたものをkeyとして渡す
            return <li key={`${id}-${name}-${hobby}`}>{hobby}</li>;
          })}
        </ul>
      </div>
    </article>
  );
};

export default Profile;

import { useState } from "react";

const animals = ["dog", "cat", "rat", "dookey", "dyddy"];

const Example = () => {
  // filter用のuseStateを定義
  const [filterVal, setFilterVal] = useState("");

  console.log(animals.filter((animal) => animal === "Dog"));

  return (
    <>
      <h3>配列のフィルター</h3>
      <input
        type="text"
        value={filterVal}
        // 入力のたびに入力された値をsetFilterValで値を更新
        onChange={(e) => setFilterVal(e.target.value)}
      />
      <ul>
        {animals
          // 入力された文字が最初に現れる位置を返す、見つからなければ-1を返す
          // animal配列の各要素に対して、filterValの文字列が含まれているかチェック、含まれている要素だけmapで表示される
          // !== は「等しくない」を意味する
          .filter((animal) => animal.indexOf(filterVal) !== -1)
          .map((animal) => (
            <li key={animal}>{animal}</li>
          ))}
      </ul>
    </>
  );
};

export default Example;

// indexOf() は文字列検索メソッド
"dog".indexOf("d")    // 結果: 0  （先頭にある）
"dog".indexOf("o")    // 結果: 1  （2番目にある）
"dog".indexOf("g")    // 結果: 2  （3番目にある）
"dog".indexOf("cat")  // 結果: -1 （存在しない）

// !== は「等しくない」を意味する
animal.indexOf(filterVal) !== -1

// これは以下の意味：
// 「検索文字が見つからない(-1)」ではない
// → つまり「検索文字が見つかった」

import { useState } from "react";

const Example = () => {
  const animals = ["Dog", "Cat", "Rat"];

  const [filterVal, setFilterVal] = useState("");

  return (
    <>
      <input
        type="text"
        value={filterVal}
        onChange={(e) => setFilterVal(e.target.value)}
      />
      <ul>
        {animals
          .filter((animal) => {
            const isMatch = animal.indexOf(filterVal) !== -1;
            console.log(animal.indexOf(filterVal));
            return isMatch;
          })
          .map((animal) => (
            // 三項演算子
            // <li key={animal}>
            //   {animal + (animal === "Dog" ? " これは犬" : "")}
            // </li>

            // &&条件でtrueの場合だけ文字列を表示する、falseは表示されない
            <li key={animal}>
              {animal}
              {animal === "Dog" && " これは犬"}
            </li>
          ))}
      </ul>
    </>
  );
};

export default Example;

// ✅ &&演算子: 条件に一致する時だけ表示
{isLoggedIn && <UserProfile />}
{isAdmin && <AdminPanel />}
{hasError && <ErrorMessage />}

// ✅ 三項演算子: 条件によって違う内容を表示
{isLoggedIn ? <UserProfile /> : <LoginButton />}
{isAdmin ? <AdminPanel /> : <UserPanel />}
{hasError ? <ErrorMessage /> : <SuccessMessage />}

#Example.jsx(全体の表示と配列、stateの管理をするコンポーネント)
import { useState } from "react";
import AnimalList from "./components/AnimalList";
import AnimalFilter from "./components/AnimalFilter";

const Example = () => {
  const animals = ["Dog", "Cat", "Rat", "Cow", "Monkey"];

  // 入力文字列用のfilter管理のuseState
  const [filterVal, setFilterVal] = useState("");

  // animalsのfilter用の変数
  const filteredAnimal = animals.filter((animal) => {
    const isMatch = animal.indexOf(filterVal) !== -1;
    return isMatch;
  });

  return (
    <>
      <AnimalFilter filterState={[filterVal, setFilterVal]} />
      {/* filteredAnimalでanimals配列の中身をfilterしたものをpropsでAnimalListコンポーネントに渡す */}
      <AnimalList animals={filteredAnimal} />
    </>
  );
};

export default Example;

#AnimalList.jsx(受け取ったリストの表示をするコンポーネント、フィルターはExampleコンポーネントでしているので受け取るだけ)

import React from "react";
import AnimalItem from "./AnimalItem";

const AnimalList = ({ animals }) => {
  return (
    <>
      {/* 三項演算子でアニマルが見つからない場合にはエラーメッセージを表示 */}
      {animals.length === 0 ? (
        <p>アニマルが見つかりません...ぴえん</p>
      ) : (
        <ul>
          {animals.map((animal) => {
            return <AnimalItem animal={animal} key={animal} />;
          })}
        </ul>
      )}
    </>
  );
};

export default AnimalList;

#AnimalItem.jsx(配列の中の各アイテムを表示するためのコンポーネント)
import React from "react";

const AnimalItem = ({ animal }) => {
  return (
    <>
      <li key={animal}>
        {animal}
        {animal === "Dog" && "★"}
      </li>
    </>
  );
};

export default AnimalItem;

#AnimalFilter.jsx(filter機能のコンポーネント)
import React from "react";

const AnimalFilter = ({ filterState }) => {
  // 分割代入で受け取ったfilterStateを分解する
  const [filterVal, setFilterVal] = filterState;

  return (
    <>
      <input
        type="text"
        value={filterVal}
        onChange={(e) => setFilterVal(e.target.value)}
      />
    </>
  );
};

export default AnimalFilter;

// 設定値の例
const API_URL = "https://api.example.com";
const MAX_ITEMS = 100;
const DEFAULT_SETTINGS = {
  theme: "dark",
  language: "ja"
};

// 選択肢の例
const CATEGORY_OPTIONS = ["食品", "衣類", "電化製品"];
const STATUS_CODES = {
  OK: 200,
  ERROR: 400
};

import { useState } from "react";
import { createPortal } from "react-dom";
import Toast from "./components/Toast";

const Toastportal = ({ children }) => {
  const target = document.querySelector(".container.start");
  return createPortal(children, target);
};
const Example = () => {
  const [toastOpen, setToastOpen] = useState(false);

  return (
    <div>
      <h3>トーストの作成（createPortal）</h3>

      <div className="container start"></div>

      <button
        type="button"
        onClick={() => setToastOpen(true)}
        disabled={toastOpen}
      >
        トーストを表示する
      </button>
      {toastOpen && (
        <Toastportal>
          <Toast
            visible={toastOpen}
            handleCloseClick={() => setToastOpen(false)}
          />
        </Toastportal>
      )}
    </div>
  );
};

export default Example;

const Component = () => {
  // ステート：値が変更されると再レンダリング
  const [count, setCount] = useState(0);

  // ref：値が変更されても再レンダリングされない
  const countRef = useRef(0);

  return (
    <>
      <p>State: {count}</p>
      <p>Ref: {countRef.current}</p>
    </>
  );
};

// 1. useState を使うケース
const [value, setValue] = useState("");
- ユーザーに見せる値
- UIに反映させたい値
- コンポーネントの再レンダリングが必要な値

// 2. useRef を使うケース
const elementRef = useRef();
- DOM要素への直接アクセス
- 再レンダリングを避けたい値の保持
- UIに直接反映させない内部の値

import { useRef } from "react";
import { useState } from "react";

const Case1 = () => {
  const [value, setValue] = useState("");

  // useRefを設定
  const inputRef = useRef();

  return (
    <div>
      <h3>ユースケース1</h3>
      <input
        type="text"
        value={value}
        // 作成したinputRefを指定
        ref={inputRef}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={() => inputRef.current.focus()}>
        インプット要素をフォーカスする
      </button>
    </div>
  );
};

// 動画の再生停止切り替え
const Case2 = () => {
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef();

  return (
    <>
      <video
        style={{ maxWidth: "100%" }}
        ref={videoRef}
        src="./sample.mp4"
      ></video>
      <button
        onClick={() => {
          if (playing) {
            videoRef.current.pause();
          } else {
            videoRef.current.play();
          }
          setPlaying((prev) => !prev);
        }}
      >
        {playing ? "Stop" : "Play"}
      </button>
    </>
  );
};

const Example = () => {
  return (
    <>
      <Case1 />
      <Case2 />
    </>
  );
};

export default Example;

// 1. スクロールアニメーション
const ScrollReveal = forwardRef((props, ref) => {
  return (
    <div 
      ref={ref}
      className="scroll-reveal"
    >
      {props.children}
    </div>
  );
});

// 使用例
const ScrollSection = () => {
  const sectionRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          sectionRef.current.classList.add('visible');
        }
      }
    );

    observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <ScrollReveal ref={sectionRef}>
      <h2>スクロールで表示</h2>
    </ScrollReveal>
  );
};

// 2. ホバーアニメーション
const HoverEffect = forwardRef((props, ref) => {
  return (
    <div 
      ref={ref}
      className="hover-element"
      onMouseEnter={() => {
        ref.current.animate([
          { transform: 'scale(1)' },
          { transform: 'scale(1.1)' }
        ], {
          duration: 300,
          fill: 'forwards'
        });
      }}
    >
      {props.children}
    </div>
  );
});

debugger; // この部分で更新が止まる

#Example.jsx
import { createContext, useState } from "react";
import Child from "./components/Child";
import OtherChild from "./components/OtherChild";
export const MyContext = createContext();

const Example = () => {
  // 更新用関数をuseStateで作成
  const [value, setValue] = useState(0);

  return (
    // useContextを使用し、useStateを子に渡すために全体をContext.Providerでラップする。これでこの中のコンポーネントは
    // valueの名前のpropsに設定された値が全体で使用可能になる。
    <MyContext.Provider value={[value, setValue]}>
      <Child />
      <OtherChild />
    </MyContext.Provider>
  );
};

export default Example;

#GrandChild.jsx
import { useContext } from "react";
import { MyContext } from "../Example";

const GrandChild = () => {
  // useContextを使用して、MyContextに指定されたuseStateのvalueの値を呼び出して使用することができる。
  const [value] = useContext(MyContext);

  return (
    <div style={{ border: "1px solid black" }}>
      <h3>孫コンポーネント</h3>
      {value}
    </div>
  );
};
export default GrandChild;

#OtherChild.jsx
import { useContext } from "react";
import { MyContext } from "../Example";

const OtherChild = () => {
  // 分割代入で1番目だけ取得する場合には0番目の引数を入力せずに,で省略可能
  const [, setValue] = useContext(MyContext);

  // 更新用関数、setValueをとってくるのはMyContextで指定したExample.jsxから取ってきている。
  const clickHandler = (e) => {
    setValue((prev) => prev + 1);
  };

  return (
    <div>
      <h3>他の子コンポーネント</h3>
      <button onClick={clickHandler}>+</button>
    </div>
  );
};

export default OtherChild;

#Example.jsx
import "./Example.css";
import Header from "./components/Header";
import Main from "./components/Main";
import { ThemeProvider } from "./context/ThemeContext";

const Example = () => {
  return (
    <ThemeProvider>
      {/* ↓↓↓ これらが全て children として扱われる ↓↓↓ */}
      <Header />
      {/* useThemeが使える */}
      <Main />
      {/* useThemeが使える */}
      {/* ↑↑↑ これらが全て children として扱われる ↑↑↑ */}
    </ThemeProvider>
  );
};

export default Example;


#ThemeContext.jsx
import { useContext, useState, createContext } from "react";

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  // themeのstate管理
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
      {children}
      {/* ここでExample.jsxから渡された要素を展開,Header.jsxとかMain.jsxとか */}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);


#Header.jsx
import { useTheme } from "../context/ThemeContext";

const Header = () => {
  // 定数THEMES(色を定数で管理する)
  const THEMES = ["light", "dark", "red"];

  const [theme, setTheme] = useTheme();

  // ラジオボタンの切り替えイベント
  // 選択されたvalueの値にthemeを更新する
  const changeTheme = (e) => setTheme(e.target.value);

  return (
    <header className={`content-${theme}`}>
      {THEMES.map((themeOption) => {
        return (
          <label key={themeOption} htmlFor={themeOption}>
            <input
              type="radio"
              value={themeOption}
              id={themeOption}
              checked={theme === themeOption}
              onChange={changeTheme}
            />
            {themeOption}
          </label>
        );
      })}
    </header>
  );
};

export default Header;

#Main.jsx
import { useTheme } from "../context/ThemeContext";

const Main = () => {
  const [theme] = useTheme();

  return (
    <main className={`content-${theme}`}>
      <h1>テーマの切り替え</h1>
    </main>
  );
};

export default Main;

 useEffect(() => {
    console.log("useEffect is called");
    window.setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);

    // 空配列は依存配列、配列に含めたステートが更新されると、コールバック関数が再実行される。
    // 空配列を入れる理由は、依存しているステートは無いとするため。よってコンポーネントが読み込まれた際1回だけ実行する
  }, []);