C
JavaScript 一覧
前へ11 / 21次へ
JavaScript/オブジェクト・配列/Lesson 11

オブジェクト基礎 — 生成・アクセス・分割代入・スプレッド

45分·theory
このチャプター
1/2

オブジェクト基礎 — 生成・アクセス・分割代入・スプレッド

🎯 このレッスンを読み終えたら

このレッスンを読み終えると、以下の3つを自信を持ってできるようになります。

  • ▸✅ 分割代入 + デフォルト値 + リネーム + restパターン
  • ▸✅ スプレッドによるイミュータブルな更新 + シャローコピーの限界
  • ▸✅ オプショナルチェーン ?. + ?? デフォルト値の組み合わせ

学習目標をチェックリストとしてすべて答えられるようになったらレッスンを閉じましょう。

オブジェクトの生成とアクセス — ドット記法 vs ブラケット記法

オブジェクトリテラル

javascript
const user = {
    id: 1,
    name: 'Alice',
    email: '[email protected]',
    profile: {
        avatar: 'https://...',
        bio: '開発者'
    }
};

最もよく使われる形式。JSONとほぼ同じですが、キーのクォートを省略できます（JSリテラルのみ）。

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

javascript
console.log(user.name);       // 'Alice'   ← キーが固定の場合はドットが便利
console.log(user['name']);    // 'Alice'   ← ブラケットも同じ結果

// 🔑 変数にキー名が入っている場合は「ブラケットのみ」使用可能
const key = 'email';
console.log(user[key]);       // '[email protected]'
// user.key  → undefined (「key」という名前のプロパティを探してしまう)

// ネストされたアクセス — どちらも同じ
console.log(user['profile']['bio']);   // '開発者'
console.log(user.profile.bio);         // '開発者'

ルール: キーが固定文字列ならドット記法。動的なキーならブラケット記法。

キーが識別子のルールを外れる場合

javascript
const data = { 'user-id': 1, 'first name': 'A' };
data.user-id    // ❌ エラー（マイナスとして解釈される）
data['user-id'] // ✅

APIレスポンスにケバブケースのキーがある場合はブラケット記法が必須。

変更・追加・削除

javascript
user.age = 30;            // ➕ 存在しないキー → 追加
user.name = 'Bob';        // ✏️ 既存のキー → 値を更新
delete user.email;        // 🗑️ キーごと削除

console.log(user);
// { id: 1, name: 'Bob', profile: {...}, age: 30 }
//   ↑ name変更  ↑ email削除    ↑ age追加

省略プロパティ（ショートハンド）

javascript
const name = 'Alice', age = 30;
const u = { name, age };   // = { name: name, age: age }

変数名とキーが同じなら省略できます。Reactの <Comp {...props} /> パターンの基盤。

分割代入 — *バイブコーディングの必須ボキャブラリー*

基本的な分割代入

javascript
const user = { id: 1, name: 'A', email: '[email protected]' };

const { name, email } = user;
console.log(name);    // 'A'

オブジェクトから必要なキーだけを変数として取り出す。AI生成コードのあらゆる関数シグネチャに登場します。

リネーム

javascript
const { name: userName } = user;
console.log(userName);   // 'A'

デフォルト値 — キーが存在しないか undefined の場合

javascript
const { name, role = 'user' } = user;
// user に role がなければ 'user' がデフォルト値になる

ネストされた分割代入

javascript
const { profile: { bio } } = user;   // bioだけを取り出す

関数パラメーターでの使用 — Reactコンポーネントの標準

javascript
// ❌ 古いスタイル
function Card(props) {
    return <div>{props.title}</div>;
}

// ✅ 分割代入
function Card({ title, subtitle, onClick }) {
    return <div>{title}</div>;
}

// ✅ デフォルト値 + rest
function Card({ title, subtitle = 'なし', ...rest }) {
    return <div {...rest}>{title}</div>;
}

世界中のReactコードの99%がこのパターンを使用しています。読めなければすべてのコンポーネントが外国語に見えます。

配列の分割代入

javascript
const [first, second, ...rest] = [10, 20, 30, 40];
console.log(first, second, rest);   // 10 20 [30, 40]

const [a, , c] = [1, 2, 3];   // 中間をスキップ → a=1, c=3

Reactの useState がこの構文の最も身近な例です:

javascript
const [count, setCount] = useState(0);

スプレッド · Objectの静的メソッド · オプショナルチェーン

スプレッド ... — オブジェクトを展開する

javascript
const user = { id: 1, name: 'A' };
const updated = { ...user, age: 30 };   // userのすべてのキーを展開 + ageを追加

console.log(updated);   // { id: 1, name: 'A', age: 30 }
console.log(user);      // { id: 1, name: 'A' }   ← 元のオブジェクトはそのまま！（イミュータブルな更新）

イミュータブルな更新の核心。Reactのstate更新の標準パターン:

javascript
setUser(prev => ({ ...prev, name: 'B' }));

後から来たキーが上書きされます:

javascript
const merged = { ...defaults, ...userInput };  // userInputが優先される

シャローコピーの限界

javascript
const original = { profile: { bio: '開発者' } };
const copy = { ...original };
copy.profile.bio = 'AI';
console.log(original.profile.bio);   // 'AI' — 一緒に変わってしまった！

1階層のみコピー。ネストされたオブジェクトは参照を共有します。ディープコピーが必要な場合:

javascript
const deep = structuredClone(original);   // 標準（Node 17+、すべてのモダンブラウザ）
const deep2 = JSON.parse(JSON.stringify(original));  // 旧来の方法（関数・Date・undefinedは失われる）

Objectの静的メソッド 3つ

javascript
const u = { name: 'A', age: 30, role: 'admin' };

console.log(Object.keys(u));     // ['name', 'age', 'role']
console.log(Object.values(u));   // ['A', 30, 'admin']
console.log(Object.entries(u));  // [['name','A'], ['age',30], ['role','admin']]
//                                    ↑ [キー, 値]のペアの配列

entries はループでキーと値を同時に受け取る場合に使います:

javascript
for (const [key, value] of Object.entries(u)) {
    console.log(`${key}: ${value}`);
}

オプショナルチェーン ?. — APIレスポンスのパースに必須

javascript
const city = user?.address?.city;      // addressがなくてもエラーにならない
const first = list?.[0];               // 配列にも使える
const result = obj.fn?.();             // 関数呼び出しにも使える

?. がない場合:

javascript
const city = user && user.address && user.address.city;

5語が1語に。 AI生成コードに必ず登場します。

Nullish合体演算子 ?? — デフォルト値

javascript
const page = req.query?.page ?? 1;   // null/undefinedの場合のみデフォルト値を使用

オプショナルチェーンの結果をデフォルト値と組み合わせるパターンはお決まりのイディオムです。

🤖 AIにこう聞いてみましょう

  • ▸「この関数パラメーターを分割代入に書き換えて」
  • ▸「このオブジェクトの更新をスプレッドでイミュータブルにして」
  • ▸「この深いオブジェクトアクセスをオプショナルチェーンで安全にして」

⚡ 実際に試してみよう — 分割代入・スプレッド・Objectメソッド

オブジェクトのモダンパターン5つをいっぺんに。
✏️ JS 코드
📟 コンソール出力
▶ 実行ボタンを押してください
⚠️ ブラウザのサンドボックスで実行 — console.log()のみ対応、alert/fetchは不可
先に読むとよい概念: this バインディング — 暗黙的/明示的/アロー関数, call/apply/bind
次のおすすめ: 配列の高階関数
前へ一覧次へ
オブジェクト基礎 — 生成・アクセス・分割代入・スプレッド - JavaScript