基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 20：オブジェクトの基礎

Day 20：オブジェクトの基礎 ― 「意味のあるまとまり」でデータを扱う

Day 20では、JavaScriptでとても重要な「オブジェクト」というデータの形を学びます。

• オブジェクトとは
• プロパティ
• 値の取得
• 値の変更

を、初心者向けにステップバイステップでかみ砕いて解説していきます。 ここから先の「ユーザー情報」「商品情報」「設定情報」などは、ほぼすべてオブジェクトで表現されると言ってもいいくらいです。

オブジェクトとは何かをイメージでつかむ

「関連する情報をひとまとめにした箱」

まず、イメージから入ります。

配列は「順番に並んだデータの集まり」でした。 一方、オブジェクトは

「意味のある名前をつけて、関連する情報をひとまとめにした箱」

のようなものです。

例えば「ユーザー」を考えてみます。

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

など、ユーザーに関する情報がいくつかあります。 これをバラバラの変数で持つとこうなります。

const userName = '山田太郎';
const userAge = 25;
const userEmail = 'taro@example.com';

const userName = '山田太郎';
const userAge = 25;
const userEmail = 'taro@example.com';

これでも動きますが、「1人のユーザー」というまとまりが見えにくいです。 そこで使うのが オブジェクト です。

オブジェクトの作成とプロパティ

オブジェクトの基本的な書き方

オブジェクトは {}（波括弧）を使って作ります。

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

• user がオブジェクトです。
• name, age, email が「プロパティ（属性）」です。
• '山田太郎', 25, 'taro@example.com' が「プロパティの値」です。

プロパティとは

オブジェクトの中にある「名前付きの値」のこと

です。

• name というプロパティに '山田太郎' という値が入っている
• age というプロパティに 25 という値が入っている

というように、「名前」と「値」がセットになっています。

オブジェクトの値の取得（プロパティの参照）

ドット記法で値を取得する

オブジェクトのプロパティの値を取り出すには、 ドット記法 を使うのが基本です。

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

// nameプロパティの値を取得します
console.log(user.name); // '山田太郎'

// ageプロパティの値を取得します
console.log(user.age); // 25

// emailプロパティの値を取得します
console.log(user.email); // 'taro@example.com'

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

// nameプロパティの値を取得します
console.log(user.name); // '山田太郎'

// ageプロパティの値を取得します
console.log(user.age); // 25

// emailプロパティの値を取得します
console.log(user.email); // 'taro@example.com'

• user.name は「userオブジェクトのnameプロパティ」
• user.age は「userオブジェクトのageプロパティ」
• user.email は「userオブジェクトのemailプロパティ」

という意味になります。

変数に取り出して使う

const userName = user.name;
const userAge = user.age;

console.log(`ユーザー名：${userName}、年齢：${userAge}歳`);

const userName = user.name;
const userAge = user.age;

console.log(`ユーザー名：${userName}、年齢：${userAge}歳`);

• オブジェクトから取り出した値を、別の変数に入れて使うこともよくあります。

オブジェクトの値の変更（プロパティの更新）

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

オブジェクトのプロパティの値は、あとから変更することができます。

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

// 年齢を1歳増やします
user.age = 26;

// メールアドレスを変更します
user.email = 'taro.yamada@example.com';

console.log(user.age);   // 26
console.log(user.email); // 'taro.yamada@example.com'

const user = {
  name: '山田太郎',
  age: 25,
  email: 'taro@example.com',
};

// 年齢を1歳増やします
user.age = 26;

// メールアドレスを変更します
user.email = 'taro.yamada@example.com';

console.log(user.age);   // 26
console.log(user.email); // 'taro.yamada@example.com'

• user.age = 26; のように、代入することで値を更新します。
• これは「オブジェクトの中身を書き換える」操作です。

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

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

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

// addressプロパティを新しく追加します
user.address = '東京都渋谷区';

// phoneプロパティを新しく追加します
user.phone = '090-1234-5678';

console.log(user.address); // '東京都渋谷区'
console.log(user.phone);   // '090-1234-5678'

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

// addressプロパティを新しく追加します
user.address = '東京都渋谷区';

// phoneプロパティを新しく追加します
user.phone = '090-1234-5678';

console.log(user.address); // '東京都渋谷区'
console.log(user.phone);   // '090-1234-5678'

• user.address = '東京都渋谷区'; のように書くと、address プロパティが新しく作られます。
• オブジェクトは「あとから情報を増やせる柔軟な箱」として使えます。

例題：商品オブジェクトを作って値を取得・変更する

ここからは、実際に「商品」をオブジェクトで表現してみます。

商品オブジェクトの作成

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

• id：商品ID
• name：商品名
• price：価格
• stock：在庫数

というプロパティを持つ商品オブジェクトです。

値の取得（プロパティの参照）

console.log(product.name);  // 'ノート'
console.log(product.price); // 100
console.log(product.stock); // 10

console.log(product.name);  // 'ノート'
console.log(product.price); // 100
console.log(product.stock); // 10

• 商品名・価格・在庫数をそれぞれ取り出しています。

値の変更（プロパティの更新）

// 価格を120円に変更します
product.price = 120;

// 在庫数を8に変更します
product.stock = 8;

console.log(product.price); // 120
console.log(product.stock); // 8

// 価格を120円に変更します
product.price = 120;

// 在庫数を8に変更します
product.stock = 8;

console.log(product.price); // 120
console.log(product.stock); // 8

• セールや在庫変動などを表現するイメージです。

もう一歩：オブジェクトを使った「ユーザー設定」の例

オブジェクトは「設定」を表現するのにもよく使われます。

ユーザー設定オブジェクトの例

const settings = {
  theme: 'dark',        // テーマ（dark / light）
  language: 'ja',       // 言語（ja / en など）
  notifications: true,  // 通知を有効にするか
};

const settings = {
  theme: 'dark',        // テーマ（dark / light）
  language: 'ja',       // 言語（ja / en など）
  notifications: true,  // 通知を有効にするか
};

値の取得

console.log(settings.theme);        // 'dark'
console.log(settings.language);     // 'ja'
console.log(settings.notifications); // true

console.log(settings.theme);        // 'dark'
console.log(settings.language);     // 'ja'
console.log(settings.notifications); // true

値の変更

// テーマをlightに変更します
settings.theme = 'light';

// 通知を無効にします
settings.notifications = false;

console.log(settings.theme);        // 'light'
console.log(settings.notifications); // false

// テーマをlightに変更します
settings.theme = 'light';

// 通知を無効にします
settings.notifications = false;

console.log(settings.theme);        // 'light'
console.log(settings.notifications); // false

• オブジェクトを使うことで、「設定のまとまり」を1つの変数で扱えます。

Day 20 前半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら「オブジェクトの作成・値の取得・値の変更」を確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 20 前半：オブジェクトの基礎 練習テンプレート</title>
</head>
<body>
  <h1>Day 20 前半：オブジェクトの基礎（作成・プロパティ・値の取得・値の変更）</h1>
  <p>ブラウザのコンソールを開いて、オブジェクトの動きを確認してください。</p>

  <script>
    console.log('--- ユーザーオブジェクトを作成 ---');

    const user = {
      name: '山田太郎',
      age: 25,
      email: 'taro@example.com',
    };

    console.log('ユーザーオブジェクト：', user);

    console.log('--- プロパティの値を取得 ---');

    console.log('名前：', user.name);
    console.log('年齢：', user.age);
    console.log('メール：', user.email);

    console.log('--- プロパティの値を変更 ---');

    user.age = 26;
    user.email = 'taro.yamada@example.com';

    console.log('変更後の年齢：', user.age);
    console.log('変更後のメール：', user.email);

    console.log('--- 新しいプロパティを追加 ---');

    user.address = '東京都渋谷区';
    user.phone = '090-1234-5678';

    console.log('住所：', user.address);
    console.log('電話番号：', user.phone);

    console.log('--- 商品オブジェクトを作成 ---');

    const product = {
      id: 1,
      name: 'ノート',
      price: 100,
      stock: 10,
    };

    console.log('商品オブジェクト：', product);

    console.log('--- 商品のプロパティを取得 ---');

    console.log('商品名：', product.name);
    console.log('価格：', product.price);
    console.log('在庫数：', product.stock);

    console.log('--- 商品の価格と在庫数を変更 ---');

    product.price = 120;
    product.stock = 8;

    console.log('変更後の価格：', product.price);
    console.log('変更後の在庫数：', product.stock);

    console.log('--- 設定オブジェクトを作成 ---');

    const settings = {
      theme: 'dark',
      language: 'ja',
      notifications: true,
    };

    console.log('設定オブジェクト：', settings);

    console.log('--- 設定の値を取得 ---');

    console.log('テーマ：', settings.theme);
    console.log('言語：', settings.language);
    console.log('通知：', settings.notifications);

    console.log('--- 設定の値を変更 ---');

    settings.theme = 'light';
    settings.notifications = false;

    console.log('変更後のテーマ：', settings.theme);
    console.log('変更後の通知設定：', settings.notifications);

    console.log('--- Day 20 前半：オブジェクトの基礎の練習が完了しました ---');
  </script>
</body>
</html>

Day 20 前半のまとめ

Day 20前半では、

• オブジェクトとは「意味のある名前付きの値をひとまとめにした箱」であること
• プロパティは「オブジェクトの中の名前付きの値」であること
• ドット記法で値を取得できること
• 代入で値を変更したり、新しいプロパティを追加できること

を学びました。

ここで意識してほしいのは、

• 「1人のユーザー」「1つの商品」「1つの設定」など、 現実世界の「まとまり」をオブジェクトで表現できるという感覚です。

この感覚が身につくと、 配列とオブジェクトを組み合わせて「ユーザー一覧」「商品一覧」「設定一覧」などを扱えるようになり、 JavaScriptでのデータ表現の幅が一気に広がっていきます。

Day 20：オブジェクトの基礎（後半）

「オブジェクトを“現実のデータ”として扱う感覚を身につける」

Day 20後半では、前半で学んだ

• オブジェクトとは
• プロパティ
• 値の取得
• 値の変更

を、より実践的な形で深掘りしていきます。 ここでは「ユーザー情報」「商品情報」「設定情報」を題材にして、 オブジェクトを“アプリのデータ”として扱う感覚を育てていきます。

オブジェクトを「現実のもの」としてイメージする

ユーザー・商品・設定は全部オブジェクトで表現できる

オブジェクトは、現実世界の「ひとまとまりの情報」を表現するのに向いています。

• 1人のユーザー
• 1つの商品
• 1つのアプリ設定

などは、すべてオブジェクトで表現できます。

例えば、ユーザーなら次のように書けます。

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  email: 'hanako@example.com',
  isPremium: false,
};

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  email: 'hanako@example.com',
  isPremium: false,
};

• user がオブジェクト
• id, name, age, email, isPremium がプロパティ
• それぞれに値が入っています

この「名前付きの値のまとまり」が、オブジェクトの本質です。

プロパティの値を「取り出す」「変える」を丁寧に理解する

ドット記法で値を取得する

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

console.log(user.name);      // '佐藤花子'
console.log(user.age);       // 30
console.log(user.email);     // 'hanako@example.com'
console.log(user.isPremium); // false

console.log(user.name);      // '佐藤花子'
console.log(user.age);       // 30
console.log(user.email);     // 'hanako@example.com'
console.log(user.isPremium); // false

• user.name → 「userオブジェクトのnameプロパティ」
• user.age → 「userオブジェクトのageプロパティ」

という意味になります。

ブラケット記法で値を取得する

もう1つの書き方として、ブラケット記法があります。

console.log(user['name']);  // '佐藤花子'
console.log(user['email']); // 'hanako@example.com'

console.log(user['name']);  // '佐藤花子'
console.log(user['email']); // 'hanako@example.com'

ブラケット記法が便利なのは、プロパティ名が変数で決まるときです。

const key = 'age';
console.log(user[key]); // 30

const key = 'age';
console.log(user[key]); // 30

• key が 'age' なので、user['age'] と同じ意味になります。

値の変更：オブジェクトの「状態が変わる」ことを意識する

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

オブジェクトのプロパティは、あとから変更できます。

user.age = 31;          // 誕生日で年齢が変わる
user.isPremium = true;  // プレミアム会員に昇格

console.log(user.age);       // 31
console.log(user.isPremium); // true

user.age = 31;          // 誕生日で年齢が変わる
user.isPremium = true;  // プレミアム会員に昇格

console.log(user.age);       // 31
console.log(user.isPremium); // true

ここで起きていることは、

• 「同じユーザーだけれど、状態が変わった」

ということです。 オブジェクトは「状態を持つもの」として扱えるので、 アプリの中で「変化」を表現するのに向いています。

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

オブジェクトには、あとから新しい情報を追加できます。

user.address = '東京都渋谷区';
user.phone = '090-1111-2222';

console.log(user.address); // '東京都渋谷区'
console.log(user.phone);   // '090-1111-2222'

user.address = '東京都渋谷区';
user.phone = '090-1111-2222';

console.log(user.address); // '東京都渋谷区'
console.log(user.phone);   // '090-1111-2222'

• 最初は address や phone は存在しませんでしたが、代入した瞬間にプロパティが追加されます。
• オブジェクトは「柔軟に情報を増やせる箱」として使えます。

商品オブジェクトで「値の取得・変更」を実践する

商品オブジェクトを作る

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

• id：商品ID
• name：商品名
• price：価格
• stock：在庫数

値の取得

console.log(product.name);  // 'ノート'
console.log(product.price); // 100
console.log(product.stock); // 10

console.log(product.name);  // 'ノート'
console.log(product.price); // 100
console.log(product.stock); // 10

値の変更（セールや在庫変動を表現）

// セールで価格を80円に変更
product.price = 80;

// 在庫が減って8個になる
product.stock = 8;

console.log(product.price); // 80
console.log(product.stock); // 8

// セールで価格を80円に変更
product.price = 80;

// 在庫が減って8個になる
product.stock = 8;

console.log(product.price); // 80
console.log(product.stock); // 8

新しいプロパティを追加（カテゴリやタグ）

product.category = '文房具';
product.isSale = true;

console.log(product.category); // '文房具'
console.log(product.isSale);   // true

product.category = '文房具';
product.isSale = true;

console.log(product.category); // '文房具'
console.log(product.isSale);   // true

• こうしていくと、「商品」というオブジェクトがどんどんリッチになっていきます。

設定オブジェクトで「アプリの状態」を管理する

設定オブジェクトの例

const settings = {
  theme: 'dark',        // テーマ（dark / light）
  language: 'ja',       // 言語（ja / en など）
  notifications: true,  // 通知を有効にするか
};

const settings = {
  theme: 'dark',        // テーマ（dark / light）
  language: 'ja',       // 言語（ja / en など）
  notifications: true,  // 通知を有効にするか
};

値の取得

console.log(settings.theme);        // 'dark'
console.log(settings.language);     // 'ja'
console.log(settings.notifications); // true

console.log(settings.theme);        // 'dark'
console.log(settings.language);     // 'ja'
console.log(settings.notifications); // true

値の変更（ユーザーが設定を変えたイメージ）

settings.theme = 'light';      // テーマをライトに変更
settings.notifications = false; // 通知をオフにする

console.log(settings.theme);        // 'light'
console.log(settings.notifications); // false

settings.theme = 'light';      // テーマをライトに変更
settings.notifications = false; // 通知をオフにする

console.log(settings.theme);        // 'light'
console.log(settings.notifications); // false

• 「ユーザーが設定画面で変更した内容」をオブジェクトに反映するイメージです。

Day 20 後半 練習テンプレート（ブラウザで実行できる例）

以下のテンプレートをブラウザで開き、 コンソールを見ながら「オブジェクトの値の取得・変更・追加」を確認してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 20 後半：オブジェクトの基礎 練習テンプレート</title>
</head>
<body>
  <h1>Day 20 後半：オブジェクトの基礎（値の取得・変更・追加）</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- ユーザーオブジェクトを作成 ---');

    const user = {
      id: 101,
      name: '佐藤花子',
      age: 30,
      email: 'hanako@example.com',
      isPremium: false,
    };

    console.log('ユーザーオブジェクト：', user);

    console.log('--- 値の取得（ドット記法） ---');
    console.log('名前：', user.name);
    console.log('年齢：', user.age);
    console.log('メール：', user.email);
    console.log('プレミアム会員か？', user.isPremium);

    console.log('--- 値の変更 ---');
    user.age = 31;
    user.isPremium = true;

    console.log('変更後の年齢：', user.age);
    console.log('変更後のプレミアム会員フラグ：', user.isPremium);

    console.log('--- 新しいプロパティを追加 ---');
    user.address = '東京都渋谷区';
    user.phone = '090-1111-2222';

    console.log('住所：', user.address);
    console.log('電話番号：', user.phone);

    console.log('--- 商品オブジェクトを作成 ---');

    const product = {
      id: 1,
      name: 'ノート',
      price: 100,
      stock: 10,
    };

    console.log('商品オブジェクト：', product);

    console.log('--- 商品の値を取得 ---');
    console.log('商品名：', product.name);
    console.log('価格：', product.price);
    console.log('在庫数：', product.stock);

    console.log('--- 商品の値を変更 ---');
    product.price = 80; // セール価格
    product.stock = 8;  // 在庫が減った

    console.log('変更後の価格：', product.price);
    console.log('変更後の在庫数：', product.stock);

    console.log('--- 商品に新しいプロパティを追加 ---');
    product.category = '文房具';
    product.isSale = true;

    console.log('カテゴリ：', product.category);
    console.log('セール中か？', product.isSale);

    console.log('--- 設定オブジェクトを作成 ---');

    const settings = {
      theme: 'dark',
      language: 'ja',
      notifications: true,
    };

    console.log('設定オブジェクト：', settings);

    console.log('--- 設定の値を取得 ---');
    console.log('テーマ：', settings.theme);
    console.log('言語：', settings.language);
    console.log('通知設定：', settings.notifications);

    console.log('--- 設定の値を変更 ---');
    settings.theme = 'light';
    settings.notifications = false;

    console.log('変更後のテーマ：', settings.theme);
    console.log('変更後の通知設定：', settings.notifications);

    console.log('--- Day 20 後半：オブジェクトの基礎の練習が完了しました ---');
  </script>
</body>
</html>

Day 20 後半のまとめ

Day 20後半では、

• オブジェクトを「現実のもの（ユーザー・商品・設定）」として捉えること
• ドット記法・ブラケット記法で値を取得すること
• 代入で値を変更すること
• 新しいプロパティを追加して、オブジェクトを拡張できること

を、具体的な例とコードで確認しました。

ここで身につけてほしいのは、

「1つのものを、1つのオブジェクトで表現する」

という感覚です。

この感覚があると、 配列（一覧）＋オブジェクト（1件のデータ）を組み合わせて、 ユーザー一覧・商品一覧・設定一覧などを自然に扱えるようになり、 JavaScriptでのデータ設計がぐっと楽になっていきます。