JavaScript | 基礎構文：データ型 – オブジェクトの基本

JavaScript
スポンサーリンク

初心者向け：オブジェクトの基本

オブジェクトは「関連する値（プロパティ）や処理（メソッド）をひとまとめにする箱」です。名前・年齢・住所のような“項目ごとのデータ”を扱うときに最適です。

オブジェクトとは何か

  • 役割: 名前付きの項目を持つ「辞書」や「連想配列」のような構造
  • 構成: キー（名前）と値（中身）のセット
  • 用途: ユーザー情報、設定、APIレスポンス、状態管理に広く使われる
const user = {
  name: "Taro",
  age: 20,
  isAdmin: false
};
JavaScript

作り方・参照・更新

  • 作成（リテラル）:
const book = { title: "JS入門", price: 1200 };
JavaScript
  • 参照（ドット・ブランケット）:
console.log(book.title);      // "JS入門"（ドット記法）
console.log(book["price"]);   // 1200（ブランケット記法）
JavaScript
  • 更新・追加・削除:
book.price = 1500;            // 更新
book.author = "Hanako";       // 追加
delete book.author;           // 削除
JavaScript
  • キーにスペースや記号がある場合はブランケット:
const obj = { "full name": "Taro Yamada" };
console.log(obj["full name"]); // "Taro Yamada"
JavaScript

ネストとメソッド、this

  • ネスト（入れ子）:
const user = {
  name: "Taro",
  address: { city: "Tokyo", zip: "100-0001" }
};
console.log(user.address.city); // "Tokyo"
JavaScript
  • メソッド（関数をプロパティに）:
const counter = {
  value: 0,
  inc() { this.value++; },     // this は “そのオブジェクト自身”
  reset() { this.value = 0; }
};
counter.inc();
console.log(counter.value); // 1
JavaScript
  • アロー関数の this 注意点（オブジェクトメソッドには基本使わない）:
const bad = {
  value: 0,
  inc: () => { /* this が外側を指すため期待通り動かないことがある */ }
};
JavaScript

反復・キー操作

  • 列挙（for…in）:
const settings = { theme: "dark", lang: "ja" };
for (const key in settings) {
  console.log(key, settings[key]);
}
JavaScript
  • キー・値・エントリ一覧:
Object.keys(settings);   // ["theme","lang"]
Object.values(settings); // ["dark","ja"]
Object.entries(settings);// [["theme","dark"],["lang","ja"]]
JavaScript
  • 存在判定（in / hasOwn）：
console.log("theme" in settings);               // true
console.log(settings.hasOwnProperty("theme"));  // true
JavaScript

参照型とコピーの注意

  • 参照共有: 代入は“同じオブジェクトを指す”だけ
const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x); // 2（aも変わる）
JavaScript
  • 浅いコピー（新しいオブジェクトへ）:
const src = { x: 1, y: 2 };
const copy = { ...src };            // スプレッド
// または Object.assign({}, src)
JavaScript
  • 深いコピーが必要な場合: ネスト内のオブジェクトも含めて複製する（構造化クローンやライブラリを検討）
const deep = structuredClone(srcNested); // ブラウザ環境で利用可
JavaScript

安全なアクセスとデフォルト

  • オプショナルチェーン（?.）: 途中が未定義でもエラーにせず止める
const user = {};
console.log(user.profile?.age); // undefined（安全）
JavaScript
  • null合体（??）でデフォルト値:
const timeout = user.settings?.timeout ?? 3000; // 3000
JavaScript

JSONとの往復（文字列化と復元）

  • 文字列化（保存・通信に便利）:
const data = { a: 1, b: "x" };
const json = JSON.stringify(data);   // '{"a":1,"b":"x"}'
JavaScript
  • 復元:
const parsed = JSON.parse(json);     // { a: 1, b: "x" }
JavaScript

よくあるつまずき

  • ドット記法とブランケット記法の混同: 動的キーや記号入りキーはブランケットを使う。
  • 参照共有による意図しない変更: スプレッドや構造化クローンでコピーする。
  • アロー関数の this: メソッドにアロー関数を使うと this が期待通りにならない。
  • 存在しないプロパティ: 直接アクセスで undefined。?. と ?? を併用すると安全。

ミニ練習

  • 問1: ユーザーオブジェクトを作り、年齢を更新して出力せよ。
const user = { name: "Taro", age: 20 };
user.age = 21;
console.log(`${user.name} (${user.age})`); // "Taro (21)"
JavaScript
  • 問2: 設定オブジェクトから key と value を一覧表示せよ。
const settings = { theme: "dark", lang: "ja" };
Object.entries(settings).forEach(([k, v]) => console.log(k, v));
JavaScript
  • 問3: ネストした address がなくても city を安全に取得し、なければ “N/A”。
const profile = {};
const city = profile.address?.city ?? "N/A";
console.log(city); // "N/A"
JavaScript
  • 問4: 参照が共有されないようにコピーしてから変更せよ。
const original = { x: 1, y: 2 };
const copy = { ...original };
copy.x = 99;
console.log(original.x, copy.x); // 1 99
JavaScript

まとめ

  • オブジェクトは「キーと値の集合」で、項目ごとのデータを管理するのに最適。
  • 参照・更新・追加・削除、ネスト、メソッド（this）を押さえる。
  • キー操作（keys/values/entries）と存在判定を使いこなす。
  • 参照型の性質に注意し、コピーはスプレッドや構造化クローンを活用。
  • 安全なアクセスは ?.、デフォルトは ??、保存は JSON を使う。

この基本を身につけると、設定やユーザー情報、APIデータの扱いが格段に楽になります。次は「オブジェクト配列の操作（検索・ソート・グループ化）」に進んで応用力を高めましょう。

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