モダン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つをステップバイステップで、初心者向けにかみ砕いて説明していきます。

オブジェクトとは何かを「現実のもの」からイメージする

オブジェクトとは ― 「1つのものの情報をまとめた箱」

JavaScriptのオブジェクトは、 「1つのものに関する複数の情報を、ひとまとめにした箱」 のようなものです。

例えば「商品」というものを考えてみます。

  • 商品名：Tシャツ
  • 価格：1200
  • 在庫数：10

これらをバラバラの変数で持つこともできますが、 それだと「この3つは同じ商品に関する情報だ」というつながりが分かりにくくなります。

そこで、オブジェクトを使って「1つの商品」を表現します。

const product = {
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};
JavaScript
  • product が「1つの商品」を表すオブジェクトです。
  • name・price・stock が「プロパティ」と呼ばれる項目です。
  • 'Tシャツ'・1200・10 が、それぞれのプロパティの「値」です。

重要ポイント：

  • オブジェクトは「1つのもの」を表すための基本的な構造です。
  • Reactでは「1人のユーザー」「1つの商品」「1つのタスク」などを、ほぼ必ずオブジェクトで表現します。

プロパティと値の取得・追加・更新をステップで理解する

プロパティとは ― オブジェクトの「項目名」

オブジェクトの中の name や price のような「項目名」を、 JavaScriptでは プロパティ と呼びます。

const product = {
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};
JavaScript
  • name → 商品名というプロパティ
  • price → 価格というプロパティ
  • stock → 在庫数というプロパティ

プロパティには、それぞれ「値」が紐づいています。

値の取得 ― ドット記法で読み取る

オブジェクトから値を取り出すには、 ドット記法 と呼ばれる書き方を使います。

console.log(product.name);  // 'Tシャツ'
console.log(product.price); // 1200
console.log(product.stock); // 10
JavaScript
  • product.name → productオブジェクトのnameプロパティの値
  • product.price → productオブジェクトのpriceプロパティの値

この「オブジェクト.プロパティ名」という形は、 Reactでも頻繁に登場するので、早めに慣れておくと楽になります。

プロパティの追加 ― 後から項目を増やす

オブジェクトには、後からプロパティを追加することもできます。

product.category = 'トップス';

console.log(product);
/*
{
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
  category: 'トップス',
}
*/
JavaScript
  • product.category = 'トップス'; で、新しいプロパティ category を追加しています。
  • すでにあるオブジェクトに対して「項目を増やす」イメージです。

プロパティの更新 ― 値を書き換える

既存のプロパティの値を更新することもできます。

product.price = 1500;
product.stock = 8;

console.log(product);
/*
{
  name: 'Tシャツ',
  price: 1500,
  stock: 8,
  category: 'トップス',
}
*/
JavaScript
  • product.price = 1500; で価格を変更しています。
  • product.stock = 8; で在庫数を変更しています。

重要ポイント：

  • オブジェクトは「状態」を持つものとして扱われます。
  • プロパティの追加・更新によって、その状態が変化します。
  • Reactでは、この「状態の変化」をどう扱うかが非常に重要になります（後のDAYで詳しく扱います）。

オブジェクト配列の入り口 ― 「複数のもの」をまとめて扱う

オブジェクト配列とは ― 「複数のものの一覧」

DAY 5で「配列」を学びましたが、 オブジェクトと配列を組み合わせると、「複数のものの一覧」 を表現できます。

例えば、複数の商品をまとめて扱いたい場合を考えます。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200, stock: 10 },
  { id: 2, name: 'ジーンズ', price: 4800, stock: 5 },
  { id: 3, name: 'スニーカー', price: 6800, stock: 3 },
];
JavaScript
  • 各 { ... } が「1つの商品」を表すオブジェクトです。
  • 全体として products が「商品一覧」を表す配列です。
  • これを オブジェクト配列 と呼びます。

Reactでは、この「オブジェクト配列」が本当に頻繁に登場します。

  • ユーザー一覧
  • 商品一覧
  • タスク一覧
  • コメント一覧

など、ほぼすべての「一覧表示」がオブジェクト配列で表現されます。

オブジェクト配列から値を取り出す

オブジェクト配列から値を取り出すときは、

  1. 配列のインデックスで「どのオブジェクトか」を指定する
  2. ドット記法で「どのプロパティか」を指定する

という2段階になります。

console.log(products[0].name);  // 'Tシャツ'
console.log(products[1].price); // 4800
console.log(products[2].stock); // 3
JavaScript
  • products[0] → 1つ目の商品オブジェクト
  • products[0].name → 1つ目の商品オブジェクトのnameプロパティ
  • products[1].price → 2つ目の商品オブジェクトのpriceプロパティ

この「配列＋オブジェクト＋プロパティ」の組み合わせは、 DAY 6のmap()、DAY 7のfilter・findと組み合わさることで、 Reactの「リスト表示」「検索」「削除」「詳細表示」などの基礎になります。

オブジェクト配列をmapで回すイメージ（軽く触れておく）

詳しくはDAY 6・DAY 7で扱いましたが、 オブジェクト配列はmap()と組み合わせることで、 「一覧表示」に非常に使いやすくなります。

products.map((product) => {
  console.log(product.name, product.price);
});
JavaScript
  • product が「1つの商品」を表すオブジェクトです。
  • product.name や product.price でプロパティにアクセスできます。

Reactでは、このmap()の中でJSXを返すことで、 商品一覧を画面に表示することができます（DAY 6で詳しく説明しました）。

DAY 8：オブジェクト 前半のまとめ

前半では、

  • オブジェクトとは「1つのものに関する情報をまとめた箱」であること
  • プロパティが「項目名」、値が「その項目の中身」であること
  • ドット記法（オブジェクト.プロパティ名）で値を取得できること
  • プロパティを後から追加したり、値を更新したりできること
  • オブジェクト配列が「複数のものの一覧」を表す構造であり、Reactで頻繁に使われること
  • オブジェクト配列から値を取り出すときは「配列のインデックス＋ドット記法」の2段階になること

を確認しました。

中盤では、このオブジェクトをもう少し深掘りして、

  • プロパティ名の扱い方（ドット記法とブラケット記法）
  • ネストしたオブジェクト（オブジェクトの中にオブジェクト）
  • オブジェクトのコピーと更新（Reactの状態管理に直結する重要テーマ）

などを扱いながら、 Reactで「安全に状態を扱う」ための基礎を固めていく流れになります。

DAY 8：オブジェクト 中盤 ― 「扱い方」を丁寧に固める時間

DAY 8の中盤では、前半で触れた オブジェクト／プロパティ／値の取得／追加／更新／オブジェクト配列 を、 もう一歩踏み込んで「実務で困らないレベル」まで整理していきます。

ここでは、理解しやすいようにあえて「前半・中盤・後半パート」という3つの流れで説明を続けます。

値の取得を「確実に」できるようにする

ドット記法の復習と注意点

まずは、前半で出てきた ドット記法 をもう一度確認します。

const product = {
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};

console.log(product.name);  // 'Tシャツ'
console.log(product.price); // 1200
console.log(product.stock); // 10
JavaScript
  • オブジェクト.プロパティ名 という形で値を取得します。
  • プロパティ名は「英数字＋_」など、変数名と同じようなルールで書くのが基本です。

ここで重要なのは、プロパティ名が固定されているときはドット記法が一番読みやすいということです。 Reactのコードでも、user.name や product.price のような形が頻繁に登場します。

ブラケット記法 ― 「動的なプロパティ名」を扱う

次に、ブラケット記法 というもう1つの書き方を紹介します。

console.log(product['name']);  // 'Tシャツ'
console.log(product['price']); // 1200
JavaScript
  • オブジェクト['プロパティ名'] という形で値を取得します。
  • プロパティ名を文字列として扱うのが特徴です。

ブラケット記法が本領を発揮するのは、 「プロパティ名を変数で持っているとき」 です。

const key = 'stock';
console.log(product[key]); // 10
JavaScript
  • key が 'stock' という文字列を持っています。
  • product[key] は product['stock'] と同じ意味になります。

重要ポイント：

  • ドット記法 → プロパティ名が決まっているときに使う（読みやすい）
  • ブラケット記法 → プロパティ名を変数や動的な値で扱いたいときに使う

Reactでは、フォーム入力の「name属性」を使ってオブジェクトの特定のプロパティを更新する、といった場面でブラケット記法が役立ちます。

追加・更新を「安全に」行うための考え方

直接更新する書き方と、その意味

前半では、次のような「直接更新」の例を見ました。

const product = {
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};

product.price = 1500;
product.stock = 8;

console.log(product);
/*
{
  name: 'Tシャツ',
  price: 1500,
  stock: 8,
}
*/
JavaScript
  • product.price = 1500; で価格を更新
  • product.stock = 8; で在庫数を更新

この書き方は、「オブジェクトそのものの状態を変える」 という意味を持ちます。

JavaScript単体で使う分には問題ありませんが、 Reactの状態管理では「直接書き換える」ことがバグの原因になることがあります。 （この点はDAY 9以降で詳しく扱います）

オブジェクトを「コピーしてから更新する」発想（導入）

Reactでは、次のようなスタイルがよく使われます。

const product = {
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};

const updatedProduct = {
  ...product,
  price: 1500,
};

console.log(updatedProduct);
/*
{
  name: 'Tシャツ',
  price: 1500,
  stock: 10,
}
*/
JavaScript
  • ...product で「元のオブジェクトのコピー」を作り、
  • その上から price: 1500 を上書きしています。

この書き方は、

  • 元の product はそのまま残る
  • updatedProduct という「新しい状態」を作る

という意味を持ちます。

重要ポイント（導入）：

  • 「直接書き換える」よりも「コピーしてから更新する」ほうが、安全で予測可能なコードになりやすいです。
  • Reactの状態管理では、この「コピーしてから更新する」スタイルが基本になります。

中盤では「こういう書き方がある」と知っておくことが大事で、 後のDAYで「なぜそれが重要なのか」をじっくり扱っていきます。

オブジェクト配列を「現実的な形」でイメージする

オブジェクト配列の復習 ― 「複数のものの一覧」

前半で見たオブジェクト配列をもう一度確認します。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200, stock: 10 },
  { id: 2, name: 'ジーンズ', price: 4800, stock: 5 },
  { id: 3, name: 'スニーカー', price: 6800, stock: 3 },
];
JavaScript
  • 各 { ... } が「1つの商品」を表すオブジェクト
  • 全体として products が「商品一覧」を表す配列

Reactでは、この形が「リスト表示」「検索」「削除」「詳細表示」の土台になります。

オブジェクト配列から値を取り出すテンプレート

オブジェクト配列から値を取り出すときの基本テンプレートは次のとおりです。

// 1つ目の商品
const firstProduct = products[0];
console.log(firstProduct.name);  // 'Tシャツ'
console.log(firstProduct.price); // 1200

// 2つ目の商品の価格だけ
console.log(products[1].price); // 4800
JavaScript
  • products[0] → 1つ目の商品オブジェクト
  • products[0].name → 1つ目の商品オブジェクトのnameプロパティ

この「配列のインデックス＋ドット記法」の組み合わせは、 DAY 6のmap()、DAY 7のfilter・findと組み合わせることで、 Reactの「リスト表示」の基本パターンになります。

オブジェクト配列をmapで回すイメージの再確認

最後に、map()と組み合わせた形をもう一度確認しておきます。

products.map((product) => {
  console.log(product.name, product.price);
});
JavaScript
  • product が「1つの商品」を表すオブジェクト
  • product.name や product.price でプロパティにアクセス

Reactでは、このmap()の中でJSXを返すことで、 商品一覧を画面に表示することができます。

<ul>
  {products.map((product) => (
    <li key={product.id}>
      {product.name}（{product.price}円）
    </li>
  ))}
</ul>
JSX

ここまで来ると、

  • オブジェクト → 1つのもの
  • オブジェクト配列 → 複数のものの一覧
  • map() → 一覧を画面に変換する
  • filter・find → 一覧を絞り込んだり、1件だけ取り出したりする

というつながりが、かなりクリアになってきているはずです。

DAY 8：オブジェクト 中盤のまとめ

中盤では、

  • ドット記法とブラケット記法の違いと使い分け
  • プロパティ名を変数で扱うときにブラケット記法が役立つこと
  • 直接更新と「コピーしてから更新する」スタイルの違い（Reactの状態管理への橋渡し）
  • オブジェクト配列を「複数のものの一覧」として扱う感覚
  • 配列のインデックス＋ドット記法で値を取り出すテンプレート
  • map()と組み合わせたときのイメージ（Reactのリスト表示の土台）

を整理しました。

後半では、いよいよ 「オブジェクトの更新」と「オブジェクト配列の更新」をReactの視点で深掘りする」 方向に進み、 安全で予測可能な状態管理の考え方へとつなげていきます。

DAY 8：オブジェクト 後半 ― 「更新」と「オブジェクト配列」をReact目線で深掘りする

DAY 8の後半では、これまで扱ってきた オブジェクト／プロパティ／値の取得／追加／更新／オブジェクト配列 を、 より「Reactでそのまま使える形」に近づけて整理していきます。

ここでは、理解しやすいようにあえてまた「前半・中盤・後半パート」という3つの流れで説明しますが、 内容としてはすべてDAY 8の「後半」に属するものです。

オブジェクトの更新を「意図を持って」書く

もう一度「オブジェクトとは」をReact目線で整理する

オブジェクトは、「1つのものの状態をまとめたもの」 でした。

const product = {
  id: 1,
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};
JSX
  • このproductは「1つの商品」の状態を表しています。
  • name・price・stockなどのプロパティが、その商品の属性や状態です。

Reactでは、この「状態」が画面に反映されます。

  • product.name → 画面に表示される商品名
  • product.price → 画面に表示される価格
  • product.stock → 在庫数の表示や「在庫なし」判定などに使われる

つまり、オブジェクトの更新は「画面に映る世界を変える行為」 だと考えると、 その重みが少し伝わってくると思います。

値の取得・追加・更新の復習

まずは基本の操作をもう一度確認します。

const product = {
  id: 1,
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};

// 値の取得
console.log(product.name);  // 'Tシャツ'
console.log(product.price); // 1200

// プロパティの追加
product.category = 'トップス';

// プロパティの更新
product.price = 1500;
product.stock = 8;

console.log(product);
/*
{
  id: 1,
  name: 'Tシャツ',
  price: 1500,
  stock: 8,
  category: 'トップス',
}
*/
JSX

ここまでは「JavaScriptとしての基本操作」です。 後半では、これを 「Reactで安全に扱うための考え方」 に少しずつ寄せていきます。

「直接更新」と「コピーしてから更新」の違いをもう一度

Reactの状態管理では、次のような書き方がよく使われます。

const product = {
  id: 1,
  name: 'Tシャツ',
  price: 1200,
  stock: 10,
};

const updatedProduct = {
  ...product,
  price: 1500,
};

console.log(updatedProduct);
/*
{
  id: 1,
  name: 'Tシャツ',
  price: 1500,
  stock: 10,
}
*/
JSX
  • ...product で「元のオブジェクトのコピー」を作り、
  • その上から price: 1500 を上書きしています。

この書き方は、

  • 元の product はそのまま残る
  • updatedProduct という「新しい状態」を作る

という意味を持ちます。

Reactでは、

  • 「元の状態を直接書き換えない」
  • 「新しい状態を作って、それをセットする」

というスタイルが基本になります。 この考え方は、オブジェクト単体だけでなく、オブジェクト配列にもそのまま広がっていきます。

オブジェクト配列の更新をステップで理解する

オブジェクト配列の復習 ― 商品一覧の例

オブジェクト配列は、「複数のものの一覧」 を表す構造でした。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200, stock: 10 },
  { id: 2, name: 'ジーンズ', price: 4800, stock: 5 },
  { id: 3, name: 'スニーカー', price: 6800, stock: 3 },
];
JSX
  • 各 { ... } が「1つの商品」を表すオブジェクト
  • 全体として products が「商品一覧」を表す配列

Reactでは、この形が「リスト表示」「検索」「削除」「詳細表示」の土台になります。

1件だけ更新したいときの発想

例えば、「IDが2の商品の価格だけを更新したい」というケースを考えます。

やりたいこと：

  • id: 2 の商品の price を 5000 に変更する
  • 他の商品の情報はそのまま残す

このとき、次のような流れで考えると分かりやすいです。

  1. どの商品を更新するかを決める（IDで特定）
  2. その商品だけを「更新したバージョン」に差し替える
  3. 全体として「新しい商品一覧」を作る

map()＋条件分岐で「1件だけ更新する」テンプレート

この発想をコードにすると、次のようになります。

const updatedProducts = products.map((product) => {
  if (product.id === 2) {
    // IDが2の商品のみ更新
    return {
      ...product,
      price: 5000,
    };
  } else {
    // それ以外の商品はそのまま返す
    return product;
  }
});

console.log(updatedProducts);
/*
[
  { id: 1, name: 'Tシャツ', price: 1200, stock: 10 },
  { id: 2, name: 'ジーンズ', price: 5000, stock: 5 },
  { id: 3, name: 'スニーカー', price: 6800, stock: 3 },
]
*/
JSX

ここで起きていることをステップで整理すると、

  1. products.map((product) => { ... }) を呼び出します。
  2. map()は、各商品オブジェクトに対して順番に処理を行います。
  3. product.id === 2 のときだけ、{ ...product, price: 5000 } という「更新版オブジェクト」を返します。
  4. それ以外の商品のときは、元の product をそのまま返します。
  5. map()がそれぞれの戻り値を集めて、新しい配列 updatedProducts を作ります。

重要ポイント：

  • 「更新したいものだけを更新し、それ以外はそのまま返す」というスタイルが基本です。
  • ...product で「元の情報をコピーしつつ、一部だけ上書きする」ことができます。
  • 元の products は一切変更されず、「新しい商品一覧」が作られます。

Reactの状態管理では、このパターンが頻出します。

Reactでの利用イメージと安全性の視点

Reactコンポーネントでのオブジェクト配列更新イメージ

ここまでの話を、Reactコンポーネントの中で使うイメージに落とし込んでみます。

import { useState } from 'react';

const initialProducts = [
  { id: 1, name: 'Tシャツ', price: 1200, stock: 10 },
  { id: 2, name: 'ジーンズ', price: 4800, stock: 5 },
  { id: 3, name: 'スニーカー', price: 6800, stock: 3 },
];

function ProductManager() {
  const [products, setProducts] = useState(initialProducts);

  const updatePrice = (id, newPrice) => {
    const updatedProducts = products.map((product) => {
      if (product.id === id) {
        return {
          ...product,
          price: newPrice,
        };
      } else {
        return product;
      }
    });

    setProducts(updatedProducts);
  };

  return (
    <div>
      <h3>商品一覧</h3>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name}（{product.price}円）
            <button onClick={() => updatePrice(product.id, product.price + 500)}>
              500円値上げ
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
JSX

このコンポーネントでは、

  • products が「商品一覧（オブジェクト配列）」の状態
  • updatePrice が「特定の商品だけの価格を更新する」関数
  • map()＋...product で「1件だけ更新した新しい配列」を作り、setProductsで状態を更新
  • 画面上の「500円値上げ」ボタンが、そのロジックを呼び出す

という流れになっています。

重要ポイント：

  • オブジェクト配列の更新は、「map＋条件分岐＋スプレッド構文」が基本パターンになりやすいです。
  • 元の配列やオブジェクトを直接書き換えず、「新しい状態」を作ってセットすることが、Reactでは非常に重要です。

セキュリティ・安全性の視点から見たオブジェクト更新

オブジェクトやオブジェクト配列の更新は、 アプリケーションの「状態」を変える行為です。

安全性の観点から見ると、次のような点が重要になります。

  • 予期しない場所で状態が変わらないようにすること → 元のオブジェクトや配列を直接書き換えると、他の処理が同じ参照を持っている場合に、意図しない影響が出ることがあります。
  • 「どこで何が変わったか」を追いやすくすること → mapやスプレッド構文で「新しい状態」を作るスタイルは、変更箇所が明確で追いやすいです。
  • 外部入力（ユーザーの操作など）に応じた更新では、値の妥当性を意識すること → 例えば、価格がマイナスにならないようにする、在庫数が不自然な値にならないようにする、といったチェックが必要になる場面もあります。

Reactの世界では、 「状態の更新＝画面に映る世界の変化」なので、 オブジェクトやオブジェクト配列の更新を丁寧に扱うことが、 結果的にユーザーにとって安全で分かりやすいUIにつながります。

DAY 8：オブジェクト 後半のまとめ

DAY 8の後半では、

  • オブジェクトが「1つのものの状態」を表すという意味を、React目線で再確認したこと
  • 値の取得・追加・更新の基本操作を、意図を持って整理したこと
  • 「直接更新」と「コピーしてから更新する」スタイルの違いを、スプレッド構文を通して見たこと
  • オブジェクト配列が「複数のものの一覧」であり、Reactのリスト表示の土台になること
  • map＋条件分岐＋スプレッド構文で「1件だけ更新した新しい配列」を作るパターンを確認したこと
  • Reactコンポーネント内でのオブジェクト配列更新の具体的なイメージを持ったこと
  • 状態更新を「安全に・予測可能に」行うことが、セキュリティやユーザー体験の観点からも重要であること

を整理しました。

DAY 4〜DAY 8までで、

  • Arrow Function
  • 配列
  • map
  • filter・find
  • オブジェクト
  • オブジェクト配列

という、Reactの「データと状態」を支える基礎がほぼ一通りそろいました。

この先は、 「状態管理」や「コンポーネント分割」 に進みながら、 今学んだオブジェクトとオブジェクト配列の扱い方を、 より大きなアプリケーションの中で自然に使えるようにしていく流れになります。

スポンサーリンク
タイトルとURLをコピーしました