- DAY 6:map 前半 ― 「配列を変換する」という発想を身につける
- map()とは何か ― 「配列を別の配列に変換する道具」
- 基本構文とテンプレート ― Arrow Functionとセットで覚える
- 「配列を変換する」感覚を具体例でつかむ
- 新しい配列が返ってくることの意味 ― 元の配列を壊さない
- オブジェクト配列への入り口 ― 前半で軽く触れておく
- DAY 6:map 前半のまとめ
- DAY 6:map 中盤 ― 「使いこなすための核心部分」
- 前半の復習から中盤への橋渡し
- Arrow Functionとの組み合わせを深掘りする
- map()のコールバック引数を理解する(要素・インデックス・配列)
- オブジェクト配列をmap()で扱う ― 実務に近い形
- オブジェクト配列を“そのまま”変換する ― 新しいオブジェクト配列を作る
- セキュリティ・安全性の視点から見たmap()とオブジェクト配列
- DAY 6:map 中盤のまとめ
- DAY 6:map 後半 ― Reactで「リスト表示」を支える主役としてのmap
- 前半・中盤の復習からReactへの橋渡し
- Reactでの典型パターン:配列をmap()でJSXに変換する
- Arrow Function+map+オブジェクト配列の“型”を体に染み込ませる
- keyの役割とインデックスの扱い(安全性の観点も含めて)
- map()で“変換ロジック”を分離して読みやすくする
- セキュリティ・安全性の視点から見たmap+React
- DAY 6:map 後半のまとめ
- DAY 6:map ミニ課題 ― 商品の価格に消費税を追加する
- オブジェクト配列で商品一覧を用意する
- map()で「税込価格を追加した新しい配列」を作る
- 1行Arrow Functionでさらにコンパクトに書く
- Reactでの利用イメージ ― 税込価格を表示する
- セキュリティ・安全性の視点から見る「税込価格の追加」
- ミニ課題のまとめ ― mapで「現実的な処理」を組み立てる
DAY 6:map 前半 ― 「配列を変換する」という発想を身につける
DAY 6では、Reactでは必須級のメソッドである map() を扱います。 前半では、map()の「考え方」と「基本構文」、そして 配列を“変換して新しい配列を作る”という発想 を、Arrow Functionと組み合わせながら丁寧に解説していきます。
このDAY全体は、
- 前半:
map()とは/配列を変換する/新しい配列が返ってくる - 中盤:Arrow Functionとの組み合わせを深掘り/インデックス・オブジェクト配列
- 後半:Reactの実践例(リスト表示)/セキュリティ・安全性の視点
という3回構成ですが、ここでは「前半」にフォーカスして説明します。
