React学習ログ No.4

React学習メモ：map, filter, スプレッド構文

1. map()：配列から新しい配列を作る

• 何に使う？

  • 配列の要素を全部「変形」したいときに使う。
  • Reactだと、データのリスト（ユーザー、商品など）を画面に並べるときに必須！
  • 元の配列は変わらない。これが大事。

• 書き方

  const newArray = array.map(要素 => {
    return 新しい要素; // 短いなら`return`を省略できる
  });
  

• Reactでの使い方（例：リスト表示）

  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
  

  • ⚠️ 超重要: リストの要素には必ずkeyをつけよう！keyはidとか、とにかく一意な値にする。

2. filter()：条件に合う要素を抽出する

• 何に使う？

  • 配列の中から、「これ！」っていう条件に合う要素だけを取り出したいときに使う。
  • 「アクティブなユーザーだけ表示」とか、「価格が1000円以上の商品だけ表示」とか。
  • map()と同じく、元の配列は変わらない。

• 書き方

  const newArray = array.filter(要素 => {
    return true or false; // 条件式を書く
  });
  

• Reactでの使い方（例：アクティブなユーザー抽出）

  // アクティブなユーザーだけを抽出
  const activeUsers = users.filter(user => user.isActive);
  
  // mapと組み合わせて表示
  <ul>
    {activeUsers.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
  

3. スプレッド構文（...）：中身を「展開」する

• 何に使う？

  • 配列やオブジェクトの中身をバラバラにして、新しい配列やオブジェクトを作るときに使う。
  • Reactでは、stateを安全に更新するためにめちゃくちゃ使う！

• 書き方

  • 配列：[...元の配列, 新しい要素]
  • オブジェクト：{...元のオブジェクト, 更新したいプロパティ}

• Reactでの使い方（例：state更新）

  配列のstate更新

  const [todos, setTodos] = useState(['タスクA']);
  
  // 新しいタスクを追加する関数
  const addTodo = (newTodo) => {
    setTodos([...todos, newTodo]); // 既存のtodosにnewTodoを追加して新しい配列を作る
  };
  

  • 💡 ポイント: todos.push(newTodo)と直接変更するのはNG！Reactが変更を検知できないことがある。

  オブジェクトのstate更新

  const [user, setUser] = useState({ name: 'Alice', age: 25 });
  
  // ユーザー名を変更する関数
  const changeName = (newName) => {
    // 既存のuser情報を展開して、nameだけを上書き
    setUser({ ...user, name: newName });
  };