JavaScript：オブジェクト（データを整理して扱う）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

内部がオブジェクトだと、コピー後に内部を変更すると元も変わってしまいます。深くコピーしたいときは専用の手法（ライブラリや構造に合わせた手作業）を検討します。開発中はconsole.logで参照先を確認すると混乱を避けられます。

最小コード：

<!-- HTML欄（CodePenのHTMLに貼る） -->
<button id="btn">実行</button>
<pre id="out"></pre>

// JS欄（CodePenのJSに貼る）
const person = {
  name: "田中",
  age: 28,
  contact: { email: "t@example.com" }
};

const output = document.getElementById("out");
document.getElementById("btn").addEventListener("click", () => {
  // ドットとブラケット
  const byDot = person.name;
  const key = "age";
  const byBrackets = person[key];

  // 分割代入とスプレッド
  const { name, contact } = person;
  const copy = { ...person, city: "Tokyo" };

  // 浅いコピーの例（参照される内部オブジェクト）
  const shallow = { ...person };
  shallow.contact.email = "changed@example.com";

  output.textContent = [
    `dot: ${byDot}`,
    `bracket: ${byBrackets}`,
    `destructured name: ${name}`,
    `copy.city: ${copy.city}`,
    `original email after shallow change: ${person.contact.email}`
  ].join("\n");
  console.log(person, copy, shallow);
});

貼り付け場所：CodePenを想定する場合はHTML欄に先のHTMLブロックを、JS欄にJavaScriptブロックをそれぞれ貼り付けます。ローカルで試す場合はHTMLファイルの<body>内にHTML部分を置き、同じファイル内で<script>にJSを入れてください。

実行方法：CodePenならRun（または自動実行）でページを表示し、ボタンをクリックします。ローカルならブラウザでHTMLを開いてボタンを押します。

確認方法：画面の<pre id="out">に表示されるテキストと、ブラウザの開発者ツールConsoleに出るオブジェクトを見比べてください。浅いコピーの結果で元のperson.contact.emailが変わっているかが確認ポイントです。

よくあるミス：スプレッドでネストしたオブジェクトまで複製されると誤解してしまう点が最も多いです。原因は参照渡しの理解不足で、直し方はconsole.logでオブジェクトを展開して確認し、必要なら深いコピー手法（ライブラリや手動クローン）を使うことです。

使い分けの基準：静的で簡単なプロパティ取得はドット、動的キーや不正識別子はブラケットを使います。順序が要るデータや同種の項目集合は配列、名前付きのプロパティ群や設定はオブジェクトを選びます。スプレッドは不変性（immutability）を保ちたい更新に向き、頻繁な差分更新は専用のライブラリを検討します。

注意（ここだけ）

浅いコピー（{...obj}）はネストしたオブジェクトまで複製しません。内部を編集すると元も変わる可能性があります。
キーが動的（変数）ならドット記法ではなくブラケット記法（obj[key]）を使います。
存在しないプロパティ参照は undefined になります。深い参照は obj?.a?.b のように安全にたどると落ちにくいです。

要約

オブジェクトはキーと値のペアでデータを整理する基本的な箱です。
ドットは静的キー、ブラケットは動的キーや特殊キーに使います。
分割代入で必要なプロパティだけ簡潔に取り出せます。
スプレッドで簡単にコピー・マージできるが浅いコピーである点を理解します。
ネストした参照は浅いコピーで共有されるため、必要に応じて深いクローンを選びます。

JavaScript：オブジェクト（データを整理して扱う）

音声

目次

オブジェクトの基本（キーと値）

ドット記法とブラケット記法

分割代入（必要なものだけ取り出す）

スプレッドでコピー・マージする

参照の理解（浅いコピーの注意）

注意（ここだけ）

要約