目次
概要
プログラミングにおいて、関連する複数のデータ（名前、ID、状態など）をバラバラの変数で管理するのは非効率です。
JavaScriptの「オブジェクト（Object）」を使えば、これらをひとまとめにしてパッケージ化できます。さらに、データだけでなく「処理（メソッド）」も内包できるため、アプリケーションの構成要素を定義するのに最適です。本記事では、Webアプリの設定データを例に、オブジェクトの構造化と操作方法を解説します。
仕様（入出力）
オブジェクトリテラル { ... }
波括弧 {} の中に キー: 値 のペアをカンマ区切りで記述します。
| 構成要素 | 記述例 | 説明 |
| プロパティ | theme: 'dark' | 静的なデータ。文字列、数値、真偽値、配列、さらに別のオブジェクトも格納可能。 |
| メソッド | save: () => { ... } | オブジェクトに関連付いた関数（処理）。 |
- 入力: 定義したいデータ群
- 出力: 構造化されたオブジェクト
- アクセス方法:
オブジェクト.キー（ドット記法）またはオブジェクト['キー']（ブラケット記法）
基本の使い方
1. 基本的な定義とアクセス
関連する情報を1つの変数にまとめます。
// アプリケーションの設定定義
const appConfig = {
version: 1.5,
appName: 'MyEditor',
isProMode: true
};
// データの取得
console.log(appConfig.appName); // "MyEditor"
2. 階層構造（ネスト）とメソッド
オブジェクトの中にオブジェクトを入れたり、関数を持たせたりできます。
const gameCharacter = {
name: 'Hero',
stats: { // ネストされたオブジェクト
hp: 100,
mp: 50
},
items: ['Sword', 'Potion'], // 配列
attack: () => { // メソッド
console.log('攻撃しました！');
}
};
console.log(gameCharacter.stats.hp); // 100
gameCharacter.attack(); // "攻撃しました！"
コード全文（HTML / JavaScript）
Webアプリケーションの「環境設定（Config）」をオブジェクトとして管理し、画面に現在の設定状況を表示するダッシュボードを作成します。
複雑なデータ構造（ネスト）やメソッドの呼び出しを含みます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Configuration</title>
<style>
.config-panel {
font-family: 'Consolas', 'Monaco', monospace;
max-width: 450px;
background-color: #282c34;
color: #abb2bf;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
h3 {
margin-top: 0;
color: #61afef;
border-bottom: 1px solid #3e4451;
padding-bottom: 10px;
}
.config-group {
margin-bottom: 15px;
}
.label {
color: #e06c75;
margin-right: 10px;
}
.value {
color: #98c379;
}
.nested {
margin-left: 20px;
border-left: 2px solid #3e4451;
padding-left: 10px;
}
.btn-action {
background-color: #61afef;
color: #282c34;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
}
.btn-action:hover {
background-color: #4aa3ee;
}
#log-area {
margin-top: 15px;
font-size: 0.9em;
color: #d19a66;
}
</style>
</head>
<body>
<div class="config-panel">
<h3>System Configuration</h3>
<div class="config-group">
<span class="label">App Name:</span>
<span id="conf-name" class="value">--</span>
</div>
<div class="config-group">
<span class="label">Display Settings:</span>
<div class="nested">
<div>Theme: <span id="conf-theme" class="value">--</span></div>
<div>Resolution: <span id="conf-res" class="value">--</span></div>
</div>
</div>
<div class="config-group">
<span class="label">Enabled Modules:</span>
<span id="conf-modules" class="value">--</span>
</div>
<button id="btn-save" class="btn-action">設定を保存 (Execute Method)</button>
<div id="log-area"></div>
</div>
<script src="config_manager.js"></script>
</body>
</html>
JavaScript
/**
* システム設定管理スクリプト
* 複雑なオブジェクト構造の定義と操作
*/
// 1. 設定データの定義
const systemConfig = {
// 基本的なプロパティ
appName: 'DevDashboard Pro',
version: 2.0,
// ネストされたオブジェクト（表示設定）
display: {
theme: 'Dark Mode',
resolution: '1920x1080',
zoomLevel: 100
},
// 配列を含むプロパティ
modules: ['Analytics', 'Debugger', 'CloudSync'],
// メソッドの定義（設定保存処理のシミュレーション）
saveSettings: function() {
// このメソッド内での処理
const timestamp = new Date().toLocaleTimeString();
return `Settings saved successfully at ${timestamp}.`;
}
};
// DOM要素
const elName = document.getElementById('conf-name');
const elTheme = document.getElementById('conf-theme');
const elRes = document.getElementById('conf-res');
const elModules = document.getElementById('conf-modules');
const btnSave = document.getElementById('btn-save');
const logArea = document.getElementById('log-area');
/**
* 設定情報を画面に反映する関数
*/
const renderConfig = () => {
// 1階層目のアクセス
elName.textContent = systemConfig.appName;
// 2階層目（ネスト）へのアクセス
elTheme.textContent = systemConfig.display.theme;
elRes.textContent = systemConfig.display.resolution;
// 配列の結合
elModules.textContent = systemConfig.modules.join(', ');
};
/**
* 保存ボタンクリック時の処理
*/
const onSaveClick = () => {
// オブジェクト内のメソッドを実行
const message = systemConfig.saveSettings();
// 結果を表示
logArea.textContent = message;
console.log('Saved:', systemConfig);
};
// 初期表示
renderConfig();
// イベントリスナー
btnSave.addEventListener('click', onSaveClick);
カスタムポイント
- プロパティの追加・変更:
systemConfig.newProp = 'Value';のように後から自由にプロパティを追加したり、値を上書きしたりできます。 - 短縮記法:変数名とプロパティ名が同じ場合、ES6では
{ name, age }のように省略して記述できます（{ name: name, age: age }と同じ）。
注意点
constでも中身は変更可能オブジェクトをconstで宣言しても、それは「変数の再代入」を防ぐだけで、obj.key = 'newValue'のように中身のプロパティを変更することは可能です。完全に変更不可にするにはObject.freeze()を使用します。- 存在しないプロパティへのアクセス
systemConfig.unknownKeyのように存在しないキーにアクセスしてもエラーにはならず、undefinedが返されます。ネストされたsystemConfig.unknown.keyにアクセスするとエラーになるため、オプショナルチェーン?.の使用を検討してください。
応用
オブジェクトの凍結（イミュータブル化）
設定値など、アプリ実行中に書き換わってほしくない重要なオブジェクトは Object.freeze() で保護します。
const serverSettings = Object.freeze({
host: 'api.example.com',
port: 443
});
// 無視される（strictモードではエラー）
serverSettings.port = 8080;
console.log(serverSettings.port); // 443 のまま
まとめ
オブジェクト {} は、JavaScriptにおけるデータ構造の主役です。
- まとめる: 関連するデータや関数をパッケージ化する。
- 階層化: オブジェクトの中にオブジェクトを入れて整理する。
- 操作: ドット記法
.で直感的にアクセスする。
単なる変数の羅列から脱却し、意味のある単位でデータを管理することで、コードの可読性と保守性が飛躍的に向上します。
