モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 - DAY 8:オブジェクト

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 8:オブジェクト 前半 ― 「1つのもの」をまとめて表現する考え方
  2. オブジェクトとは何かを「現実のもの」からイメージする
    1. オブジェクトとは ― 「1つのものの情報をまとめた箱」
  3. プロパティと値の取得・追加・更新をステップで理解する
    1. プロパティとは ― オブジェクトの「項目名」
    2. 値の取得 ― ドット記法で読み取る
    3. プロパティの追加 ― 後から項目を増やす
    4. プロパティの更新 ― 値を書き換える
  4. オブジェクト配列の入り口 ― 「複数のもの」をまとめて扱う
    1. オブジェクト配列とは ― 「複数のものの一覧」
    2. オブジェクト配列から値を取り出す
    3. オブジェクト配列をmapで回すイメージ(軽く触れておく)
  5. DAY 8:オブジェクト 前半のまとめ
  6. DAY 8:オブジェクト 中盤 ― 「扱い方」を丁寧に固める時間
  7. 値の取得を「確実に」できるようにする
    1. ドット記法の復習と注意点
    2. ブラケット記法 ― 「動的なプロパティ名」を扱う
  8. 追加・更新を「安全に」行うための考え方
    1. 直接更新する書き方と、その意味
    2. オブジェクトを「コピーしてから更新する」発想(導入)
  9. オブジェクト配列を「現実的な形」でイメージする
    1. オブジェクト配列の復習 ― 「複数のものの一覧」
    2. オブジェクト配列から値を取り出すテンプレート
    3. オブジェクト配列をmapで回すイメージの再確認
  10. DAY 8:オブジェクト 中盤のまとめ
  11. DAY 8:オブジェクト 後半 ― 「更新」と「オブジェクト配列」をReact目線で深掘りする
  12. オブジェクトの更新を「意図を持って」書く
    1. もう一度「オブジェクトとは」をReact目線で整理する
    2. 値の取得・追加・更新の復習
    3. 「直接更新」と「コピーしてから更新」の違いをもう一度
  13. オブジェクト配列の更新をステップで理解する
    1. オブジェクト配列の復習 ― 商品一覧の例
    2. 1件だけ更新したいときの発想
    3. map()+条件分岐で「1件だけ更新する」テンプレート
  14. Reactでの利用イメージと安全性の視点
    1. Reactコンポーネントでのオブジェクト配列更新イメージ
    2. セキュリティ・安全性の視点から見たオブジェクト更新
  15. DAY 8:オブジェクト 後半のまとめ

DAY 8:オブジェクト 前半 ― 「1つのもの」をまとめて表現する考え方

DAY 8では、Reactでも必須級の オブジェクト を扱います。 前半では、特に次の学習項目にフォーカスして進めていきます。

  • オブジェクトとは
  • プロパティ
  • 値の取得
  • 追加
  • 更新
  • オブジェクト配列(導入)

ここまでの「配列」「map」「filter・find」とつながる、とても重要な土台になりますので、 1つ1つをステップバイステップで、初心者向けにかみ砕いて説明していきます。

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