Reactでよく使うもの

分割代入（Destructuring assignment）

• オブジェクトや配列から特定の値を取り出して、変数に簡単に代入できる構文
• 関数の返り値がオブジェクトや配列であれば、それも分割代入を使って個別の変数に代入できます。

配列の場合

arr の各要素 1, 2, 3 を、それぞれ変数 a, b, c に代入。

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

オブジェクトの場合

• オブジェクト obj のプロパティ x と y の値を、それぞれ変数 x と y に代入。
• x と y はオブジェクトのプロパティ名（キー）でもあり、変数名にもなっている。

const obj = { x: 10, y: 20 };
const { x, y } = obj;
console.log(x); // 10
console.log(y); // 20

useStateフック

• useStateは関数
• useStateの返り値は配列で、1番目の要素は現在の状態の値、2番目の要素はその状態を更新するための関数。そのため、2番目の関数は setCount() のようにして使う。
• また、この配列を分割代入して、変数 count と関数 setCount を定義する。

//useStateフック（関数）の分割代入
const [count, setCount] = useState(0);

useEffect

• useEffectは関数
• コンポーネントがレンダリングされたときや、状態やプロパティが変更されたときに実行したい処理（副作用）を設定するための関数
• useEffect の第1引数には実行したい処理を関数として渡し、第2引数には依存配列を渡す。この依存配列に指定された値が変わるたびに、useEffect 内の処理が再度実行される。
  • useState の状態値：例えば count や name のように、useState で管理されている状態の現在の値
  • Props：親コンポーネントから渡される値（props）
  • 関数内で定義された変数：コンポーネント内で計算された値や変数

useEffect(() => {
  // ここに実行したい処理を記述
}, [依存する値]);

• 依存配列を空にすると、コンポーネントが最初にレンダリングされたときだけ処理が実行される。
• 依存配列を省略すると、レンダリングのたびに処理が実行される。
• クリーンアップ処理も設定でき、例えばコンポーネントがアンマウントされるときに実行される。

filterメソッド

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

findIndexメソッド

• 配列内の要素が条件に一致する最初のインデックスを返す。
• もし条件に一致する要素が見つからない場合は -1 を返す。

const array = [10, 20, 30, 40, 50];
const index = array.findIndex((element) => element > 25);

console.log(index); // 2 （30が最初に25より大きいので、インデックス2を返す）