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

React 60日で身につけるReact
2026.08.21
スポンサーリンク
スポンサーリンク

Day 8：オブジェクトで「意味のあるデータ」を扱えるようになる

Day 8では、JavaScriptでもReactでも超重要な オブジェクト を扱います。 配列が「ただの並び」だとしたら、オブジェクトは「意味のある情報のかたまり」です。 ユーザー情報、商品情報、設定情報など、ほぼすべてがオブジェクトで表現されると言ってもいいくらいです。

オブジェクトとは：名前付きの情報をまとめた「データの箱」

オブジェクトのイメージ

オブジェクトは、 「名前（キー）と値（バリュー）のセット」をまとめて持つための仕組みです。

たとえば「ユーザー情報」を考えてみます。

  • 名前
  • 年齢
  • メールアドレス

これをバラバラの変数で持つと、少し管理が大変です。

// バラバラの変数で持つ例
const userName = "山田太郎";
const userAge = 25;
const userEmail = "[email protected]";
JavaScript

これをオブジェクトでまとめると、ぐっと「意味のあるひとまとまり」になります。

// ユーザー情報をオブジェクトでまとめる
const user = {
  name: "山田太郎",           // プロパティ name
  age: 25,                    // プロパティ age
  email: "[email protected]",  // プロパティ email
};

console.log(user);
JavaScript
  • {}（波括弧）で囲んで「オブジェクト」を作ります
  • name: "山田太郎" のように、「キー: 値」の形で情報を並べます
  • user という1つの変数が「ユーザー情報のかたまり」を表します

Reactでは、コンポーネントのpropsやAPIレスポンスなど、ほぼすべてがオブジェクトで渡されます。

プロパティ：オブジェクトの「項目」のこと

プロパティの基本

オブジェクトの中の「キーと値のペア」を プロパティ と呼びます。

const user = {
  name: "山田太郎",  // name プロパティ
  age: 25,           // age プロパティ
  email: "[email protected]", // email プロパティ
};
JavaScript
  • name / age / email が「プロパティ名（キー）」
  • "山田太郎" / 25 / "[email protected]" が「値」

プロパティ名は、変数名と同じように「意味が分かる名前」にしておくと、コードが読みやすくなります。

値の取得：ドット記法とブラケット記法

ドット記法で値を取り出す

オブジェクトから値を取り出すときの基本は、ドット記法です。

const user = {
  name: "山田太郎",
  age: 25,
  email: "[email protected]",
};

// ドット記法で値を取得します
console.log(user.name);  // "山田太郎"
console.log(user.age);   // 25
console.log(user.email); // "[email protected]"
JavaScript
  • user.name：user オブジェクトの name プロパティ
  • user.age：user オブジェクトの age プロパティ

Reactのコンポーネント内でも、props.user.name のようにドット記法で値を取り出すことが多いです。

ブラケット記法で値を取り出す

もうひとつの方法が ブラケット記法です。 プロパティ名を文字列として扱いたいときに使います。

const user = {
  name: "山田太郎",
  age: 25,
};

console.log(user["name"]); // "山田太郎"
console.log(user["age"]);  // 25
JavaScript

ブラケット記法の強みは、「変数でプロパティ名を指定できる」ことです。

const key = "name";

console.log(user[key]); // "山田太郎"
JavaScript
  • ドット記法：user.name（プロパティ名がコードに直接書かれている）
  • ブラケット記法：user["name"] や user[key]（文字列や変数で指定できる）

最初はドット記法をメインで使い、 「動的にプロパティ名を扱いたいとき」にブラケット記法を使う、というイメージでOKです。

追加：あとからプロパティを増やす

新しいプロパティを追加する

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

const user = {
  name: "山田太郎",
  age: 25,
};

console.log("追加前:", user);

// 新しいプロパティを追加します
user.email = "[email protected]"; // ドット記法で追加
user.country = "Japan";          // さらに追加

console.log("追加後:", user);
/*
{
  name: "山田太郎",
  age: 25,
  email: "[email protected]",
  country: "Japan",
}
*/
JavaScript

ブラケット記法でも同じように追加できます。

user["city"] = "Tokyo";

console.log(user.city); // "Tokyo"
JavaScript
  • user.email = "..." のように書くと、email プロパティが新しく作られます
  • すでに存在するプロパティ名に代入すると「更新」になります（次のセクションで説明します）

更新：既存のプロパティの値を変更する

値を上書きする

既存のプロパティに新しい値を代入すると、その値が 更新 されます。

const user = {
  name: "山田太郎",
  age: 25,
};

console.log("更新前:", user);

// 年齢を更新します
user.age = 26;

console.log("更新後:", user);
/*
{
  name: "山田太郎",
  age: 26,
}
*/
JavaScript

ブラケット記法でも同様です。

user["name"] = "山田花子";

console.log(user.name); // "山田花子"
JavaScript
  • 「追加」と「更新」は、書き方は同じですが、
    • そのプロパティが 存在しなかったら追加
    • すでに 存在していたら更新 という動きになります。

Reactのstateでは「直接オブジェクトを更新する」のは注意が必要ですが、 まずは「オブジェクトの値はこうやって変えられる」という感覚をつかんでおくと、後で理解がスムーズになります。

オブジェクト配列：複数の「意味のあるデータ」を並べる

商品一覧をオブジェクト配列で表現する

Day 5〜7で扱ってきた「商品一覧」を、オブジェクト配列としてもう一度見てみます。

// 商品一覧（オブジェクト配列）
const products = [
  { id: 1, name: "Tシャツ", price: 1000 },
  { id: 2, name: "パーカー", price: 2500 },
  { id: 3, name: "キャップ", price: 1500 },
];

console.log(products);
JavaScript
  • 各要素が「1つの商品」を表すオブジェクト
  • id / name / price というプロパティを持っている

この「オブジェクト配列」は、実務でもReactでも、ほぼ毎日見ると言っていいくらい頻出です。

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

配列とオブジェクトを組み合わせて、値を取り出してみます。

const firstProduct = products[0]; // 最初の商品オブジェクト

console.log(firstProduct.name);  // "Tシャツ"
console.log(firstProduct.price); // 1000
JavaScript
  • products[0]：配列の最初の要素（オブジェクト）
  • products[0].name：最初の商品オブジェクトの name プロパティ

map() や filter() と組み合わせると、さらに便利になります。

// 商品名だけの配列を作る
const productNames = products.map((product) => product.name);

console.log(productNames); // ["Tシャツ", "パーカー", "キャップ"]
JavaScript

ミニテンプレート：オブジェクトの基本操作をひとまとめに試す

最後に、Day 8の内容をまとめて試せるテンプレートコードを用意しました。

// --- Day 8 オブジェクトミニテンプレート ---

// 1. ユーザーオブジェクトを作る
const user = {
  name: "山田太郎",
  age: 25,
};

console.log("初期ユーザー:", user);

// 2. 値の取得（ドット記法）
console.log("名前:", user.name); // "山田太郎"
console.log("年齢:", user.age);  // 25

// 3. プロパティの追加
user.email = "[email protected]"; // 新しいプロパティを追加
user.country = "Japan";

console.log("プロパティ追加後:", user);

// 4. プロパティの更新
user.age = 26; // 年齢を更新
user.name = "山田花子"; // 名前を更新

console.log("プロパティ更新後:", user);

// 5. ブラケット記法での取得・追加・更新
const key = "city";
user[key] = "Tokyo"; // city プロパティを追加

console.log("city:", user["city"]); // "Tokyo"

// 6. オブジェクト配列（商品一覧）
const products = [
  { id: 1, name: "Tシャツ", price: 1000 },
  { id: 2, name: "パーカー", price: 2500 },
  { id: 3, name: "キャップ", price: 1500 },
];

console.log("商品一覧:", products);

// 7. オブジェクト配列から値を取り出す
const firstProduct = products[0];

console.log("最初の商品名:", firstProduct.name);   // "Tシャツ"
console.log("最初の商品の価格:", firstProduct.price); // 1000

// 8. map()で商品名だけの配列を作る
const productNames = products.map((product) => product.name);

console.log("商品名一覧:", productNames); // ["Tシャツ", "パーカー", "キャップ"]
JavaScript

このテンプレートを少しずつ書き換えながら、

  • ユーザー情報に「住所」「電話番号」「会員ランク」などを追加してみる
  • 商品オブジェクトに「在庫数」「カテゴリ」「タグ」などを追加してみる
  • オブジェクト配列を filter() や find() と組み合わせて検索してみる

といった練習をしていくと、オブジェクトの扱い方が自然と身についていきます。

Day 8のまとめ

  • オブジェクトとは 名前付きの情報（プロパティ）をまとめて持つ「意味のあるデータの箱」です。
  • プロパティ 「キー: 値」のペアで情報を表現し、user.name のようにドット記法でアクセスします。
  • 値の取得 ドット記法（user.name）とブラケット記法（user["name"]）の2つがあり、 ブラケット記法は「変数でプロパティ名を指定したいとき」に便利です。
  • 追加・更新 user.email = "..." のように代入することで、プロパティの追加や更新ができます。
  • オブジェクト配列 商品一覧やユーザー一覧など、「意味のあるデータのリスト」を表現するために、 オブジェクト配列がよく使われます。map・filter・findとの相性も抜群です。

このDay 8の内容は、Reactで「propsとして渡されるデータ」「APIから返ってくるJSON」を理解するうえでの土台になります。

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