モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 - DAY 6:map

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 6:map 前半 ― 「配列を変換する」という発想を身につける
  2. map()とは何か ― 「配列を別の配列に変換する道具」
    1. 配列を“1対1で変換する”メソッド
  3. 基本構文とテンプレート ― Arrow Functionとセットで覚える
    1. map()の基本構文
    2. 例:数値を2倍にする
    3. 1行Arrow Functionとの組み合わせ(暗黙のreturn)
  4. 「配列を変換する」感覚を具体例でつかむ
    1. 例1:文字列を加工する(挨拶文を作る)
    2. 例2:数値を文字列に変換する
  5. 新しい配列が返ってくることの意味 ― 元の配列を壊さない
    1. 元の配列はそのまま残る
    2. セキュリティ・安全性の観点からも重要
  6. オブジェクト配列への入り口 ― 前半で軽く触れておく
    1. オブジェクト配列とは
    2. map()でオブジェクト配列を変換する
  7. DAY 6:map 前半のまとめ
  8. DAY 6:map 中盤 ― 「使いこなすための核心部分」
  9. 前半の復習から中盤への橋渡し
    1. 前半で押さえたmap()の基本
  10. Arrow Functionとの組み合わせを深掘りする
    1. 1行Arrow Functionはmap()と相性抜群
    2. テンプレートとして覚える形
  11. map()のコールバック引数を理解する(要素・インデックス・配列)
    1. 3つの引数が渡される
    2. インデックスを使った具体例
  12. オブジェクト配列をmap()で扱う ― 実務に近い形
    1. オブジェクト配列の基本形
    2. プロパティを取り出すmap()
    3. 複数のプロパティを使って文字列を作る
  13. オブジェクト配列を“そのまま”変換する ― 新しいオブジェクト配列を作る
    1. 価格に税込を反映した新しい配列を作る
  14. セキュリティ・安全性の視点から見たmap()とオブジェクト配列
    1. 「元のデータを壊さない」ことの意味
    2. Reactとの接続
  15. DAY 6:map 中盤のまとめ
  16. DAY 6:map 後半 ― Reactで「リスト表示」を支える主役としてのmap
  17. 前半・中盤の復習からReactへの橋渡し
    1. map()の本質的な役割
  18. Reactでの典型パターン:配列をmap()でJSXに変換する
    1. 商品一覧を表示するコンポーネントの例
  19. Arrow Function+map+オブジェクト配列の“型”を体に染み込ませる
    1. よく出てくる定番テンプレート
  20. keyの役割とインデックスの扱い(安全性の観点も含めて)
    1. keyとは何か
    2. インデックスをkeyに使う場合の注意点
  21. map()で“変換ロジック”を分離して読みやすくする
    1. 変換ロジックを別の関数に切り出す
    2. 「変換ロジックを関数として扱う」という発想
  22. セキュリティ・安全性の視点から見たmap+React
    1. 「入力 → 出力」が明確なコードは安全性が高い
    2. 外部からの入力をそのまま危険な処理に渡さない
  23. DAY 6:map 後半のまとめ
  24. DAY 6:map ミニ課題 ― 商品の価格に消費税を追加する
  25. オブジェクト配列で商品一覧を用意する
    1. 商品一覧の基本形を作る
  26. map()で「税込価格を追加した新しい配列」を作る
    1. 消費税率を決める
    2. map()+Arrow Functionで変換ロジックを書く
    3. 結果を確認する
  27. 1行Arrow Functionでさらにコンパクトに書く
    1. 暗黙のreturnを使った書き方
  28. Reactでの利用イメージ ― 税込価格を表示する
    1. JSXに変換する例
  29. セキュリティ・安全性の視点から見る「税込価格の追加」
    1. 元のデータを直接書き換えない理由
    2. map()で「入力と出力を分ける」ことの意味
  30. ミニ課題のまとめ ― mapで「現実的な処理」を組み立てる

DAY 6:map 前半 ― 「配列を変換する」という発想を身につける

DAY 6では、Reactでは必須級のメソッドである map() を扱います。 前半では、map()の「考え方」と「基本構文」、そして 配列を“変換して新しい配列を作る”という発想 を、Arrow Functionと組み合わせながら丁寧に解説していきます。

このDAY全体は、

  • 前半:map()とは/配列を変換する/新しい配列が返ってくる
  • 中盤:Arrow Functionとの組み合わせを深掘り/インデックス・オブジェクト配列
  • 後半:Reactの実践例(リスト表示)/セキュリティ・安全性の視点

という3回構成ですが、ここでは「前半」にフォーカスして説明します。

タイトルとURLをコピーしました