【JavaScript】オブジェクト操作の基本！定義・取得・更新の完全ガイド

2026年1月28日

概要

JavaScriptにおける「オブジェクト」は、現実世界のモノの状態や機能をプログラム内で表現するための基本的なデータ構造です。

「箱（オブジェクト）」の中に「名札（キー）」と「中身（値）」のセットを詰め込むイメージです。本記事では、スマートホーム（IoT家電）の状態管理を題材に、オブジェクトの作成からデータの読み書き、メソッドの実行までを解説します。

仕様（構文）

オブジェクトの操作一覧

操作	構文例	特徴
定義	`const obj = { key: value, ... }`	波括弧 `{}` で囲み、カンマ区切りで記述。
値の取得 (1)	`obj.key`	ドット記法。通常はこちらを使用。
値の取得 (2)	`obj['key']`	ブラケット記法。キー名が変数に入っている場合や、特殊文字を含む場合に使用。
値の更新	`obj.key = newValue`	既存のキーに代入すると上書きされる。
追加	`obj.newKey = value`	存在しないキーに代入すると新規追加される。

基本の使い方

1. 定義と取得

エアコンの設定情報をオブジェクトにします。

const airConditioner = {
    power: 'ON',
    temp: 24,
    mode: 'Cool'
};

// ドット記法で取得
console.log(airConditioner.temp); // 24

// ブラケット記法で取得
console.log(airConditioner['mode']); // "Cool"

2. 更新と追加

設定温度を変更したり、新しい機能を追加したりします。

// 値の更新
airConditioner.temp = 25;

// 新しいプロパティの追加
airConditioner.timer = 60;

console.log(airConditioner); 
// { power: 'ON', temp: 25, mode: 'Cool', timer: 60 }

3. メソッド（関数）の定義

オブジェクトの中に「動作」を持たせることができます。

const robot = {
    status: 'Ready',
    start: function() {
        console.log('ロボットが起動しました');
    },
    // ES6からの短縮記法（推奨）
    stop() {
        console.log('停止しました');
    }
};

robot.start(); // "ロボットが起動しました"

コード全文（HTML / JavaScript）

スマートホームの管理パネルです。

リビングの照明やエアコンの状態（オブジェクト）を画面に表示し、ボタン操作でオブジェクトの中身を更新して再描画します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Home Controller</title>
    <style>
        .panel {
            font-family: 'Roboto', sans-serif;
            max-width: 400px;
            background-color: #222;
            color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        h3 {
            margin-top: 0;
            border-bottom: 1px solid #444;
            padding-bottom: 10px;
            color: #4fc3f7;
        }
        .device-card {
            background-color: #333;
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .device-info { font-size: 0.9rem; }
        .device-name { font-weight: bold; font-size: 1.1rem; display: block; margin-bottom: 5px;}
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            background-color: #555;
        }
        .status-badge.on { background-color: #4caf50; color: white; }
        .status-badge.off { background-color: #f44336; color: white; }
        
        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        button {
            padding: 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
        }
        .btn-light { background-color: #ffca28; color: #333; }
        .btn-temp { background-color: #29b6f6; color: white; }
        button:hover { opacity: 0.9; }
    </style>
</head>
<body>

<div class="panel">
    <h3>My Smart Home</h3>

    <div class="device-card">
        <div class="device-info">
            <span class="device-name">Living Light</span>
            <span class="device-detail">Brightness: <span id="val-bright">--</span>%</span>
        </div>
        <span id="badge-light" class="status-badge off">OFF</span>
    </div>

    <div class="device-card">
        <div class="device-info">
            <span class="device-name">Air Conditioner</span>
            <span class="device-detail">Temp: <span id="val-temp">--</span>°C</span>
        </div>
        <span id="badge-ac" class="status-badge on">ON</span>
    </div>

    <div class="controls">
        <button id="btn-toggle-light" class="btn-light">照明スイッチ</button>
        <button id="btn-up-temp" class="btn-temp">温度を上げる</button>
    </div>
</div>

<script src="smart_home.js"></script>
</body>
</html>

JavaScript

/**
 * スマートホーム管理スクリプト
 * オブジェクトの定義・取得・更新の実践
 */

// 1. 家の状態を表すオブジェクト定義
const homeState = {
    owner: 'Admin',
    livingLight: {
        power: false, // false=OFF, true=ON
        brightness: 80
    },
    airConditioner: {
        power: true,
        temperature: 24,
        mode: 'Cool'
    },
    // メソッドの定義: ログ出力機能
    report: function() {
        console.log(`Current Temp: ${this.airConditioner.temperature}°C`);
    }
};

// DOM要素
const elBright = document.getElementById('val-bright');
const elBadgeLight = document.getElementById('badge-light');
const elTemp = document.getElementById('val-temp');
const btnLight = document.getElementById('btn-toggle-light');
const btnTemp = document.getElementById('btn-up-temp');

/**
 * 画面を描画する関数 (値の取得)
 */
const render = () => {
    // 1. ネストされたオブジェクトから値を取得
    // homeState.livingLight.brightness
    elBright.textContent = homeState.livingLight.brightness;
    
    // 照明の状態判定
    if (homeState.livingLight.power) {
        elBadgeLight.textContent = 'ON';
        elBadgeLight.className = 'status-badge on';
    } else {
        elBadgeLight.textContent = 'OFF';
        elBadgeLight.className = 'status-badge off';
    }

    // エアコンの温度取得
    elTemp.textContent = homeState.airConditioner.temperature;
};

/**
 * 照明の切り替え (値の更新)
 */
const toggleLight = () => {
    // 現在の値を反転させて更新 (true <-> false)
    homeState.livingLight.power = !homeState.livingLight.power;
    
    // 明るさも変更してみる
    if (homeState.livingLight.power) {
        homeState.livingLight.brightness = 100;
    } else {
        homeState.livingLight.brightness = 0;
    }
    
    render();
};

/**
 * 温度を上げる (値の更新)
 */
const tempUp = () => {
    // 現在の値にプラス1して代入
    homeState.airConditioner.temperature += 1;
    
    // メソッドの実行テスト
    homeState.report();
    
    render();
};

// 初期表示
render();

// イベントリスナー
btnLight.addEventListener('click', toggleLight);
btnTemp.addEventListener('click', tempUp);

カスタムポイント

ブラケット記法の活用:変数をキーとして使いたい場合に必須です。JavaScriptconst target = 'temperature'; // homeState.airConditioner.target はエラーになる console.log(homeState.airConditioner[target]); // 24
定数 (const) の変更:const で宣言したオブジェクトであっても、そのオブジェクト自体を別のものに入れ替えること（再代入）はできませんが、プロパティの中身を変更することは可能です。homeState = {}; (NG) / homeState.owner = 'Guest'; (OK)