オブジェクトと配列はどう使い分けますか

名前で意味が決まる情報はオブジェクト、同じ種類のものが並ぶならば配列です。1 つの作品の title と year はオブジェクト、作品が 3 つ並ぶなら配列にします。実務では「オブジェクトの配列」という組み合わせが最も多く登場します。

キーの名前に日本語は使えますか

使えますが避けてください。ドット記法では書けないケースが出てきますし、外部の API やライブラリと連携するときに扱いづらくなります。キーは英語の camelCase で書くのが JavaScript の慣習です。

console.log でオブジェクトの中身が省略されてしまいます

JSON.stringify(obj, null, 2) を通すと入れ子の奥まで文字列として展開されます。ブラウザの開発者ツールでは三角のマークをクリックすると展開できます。深い構造をログに残したいときは JSON 化が確実です。

オブジェクトのきほん｜コードで実践

このレッスンで分かること

{} でオブジェクトを作り、キー と 値 のペアで情報をまとめられます

ドット記法 work.title とブラケット記法 work["title"] で値を読み書きできます

存在しないキーを読むとエラーではなく undefined が返ります

オブジェクトのきほんとは

関連する値をひとつの箱にまとめる入れ物がオブジェクトです。作品のタイトルと制作年をバラバラの変数ではなく 1 つのまとまりとして扱えるようになります。

バラバラの変数はいつか破綻する

第 5 章で作品のタイトルを配列にまとめ、第 6 章で処理を関数に切り出しました。ここまでで山田太郎さんのプロフィールサイトはだいぶ形になってきましたが、ひとつ困ったことが起きています。作品は「タイトル」だけの存在ではないのです。制作年もあれば、閲覧数もあり、公開しているかどうかの状態もあります。

const workTitles = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
const workYears = [2026, 2026, 2026];
const workViews = [120, 80, 40];

配列を 3 本並べれば一応表現はできます。しかし workTitles[1] と workViews[1] が同じ作品を指しているという保証はどこにもありません。1 本だけ並び替えたり、1 本だけ要素を削除したりした瞬間に、対応関係は静かに壊れます。プログラムはエラーを出しません。ただ間違った答えを返し続けます。

const work = {
  title: "プロフィールサイト",
  year: 2026,
  views: 120,
  published: true,
};

これがオブジェクトです。ひとつの作品に関する情報が、ひとつの {} の中に収まりました。もう並び順を気にする必要はありません。

オブジェクトは JavaScript の心臓部です。配列もオブジェクトの一種、関数もオブジェクトの一種で、JSON というデータ形式もオブジェクトの書き方がほぼそのまま元になっています。ここを超えると世界が一気に広がります。

オブジェクトの作り方と読み方

オブジェクトは波カッコ {} の中に キー と 値 のペアをカンマ区切りで並べて作ります。キーは名前、値は中身です。キーのことをプロパティと呼ぶこともあります。

const profile = {
  name: "山田 太郎",
  role: "Web エンジニアを目指しています",
};

値を取り出す方法は 2 通りあります。

console.log(profile.name);      // 山田 太郎    ドット記法
console.log(profile["role"]);   // Web エンジニアを目指しています  ブラケット記法

ドット記法のほうが短く読みやすいので普段はこちらを使います。ブラケット記法が必要になるのは次の 2 つの場面です。

場面	書けるか (ドット)	書けるか (ブラケット)	例
ふつうのキー	書ける	書ける	`work.title`
キー名を変数で決める	書けない	書ける	`work[key]`
ハイフンを含むキー	書けない	書ける	`work["created-at"]`
数字から始まるキー	書けない	書ける	`work["2026"]`

const key = "year";
console.log(work[key]);   // 2026  変数に入った名前で読める
console.log(work.key);    // undefined  "key" という名前のキーを探しに行ってしまう

work.key はキー名そのものが key だと解釈されるので、変数の中身では探してくれません。ここは初学者が必ず一度は踏む地雷です。

追加と書き換えと削除

オブジェクトは後からいくらでも変えられます。

const work = { title: "プロフィールサイト" };

work.year = 2026;        // 追加
work.title = "改訂版 プロフィールサイト";  // 書き換え
delete work.year;        // 削除

console.log(work);       // { title: "改訂版 プロフィールサイト" }

無いキーに代入すると追加、あるキーに代入すると上書きです。同じ = が場面によって 2 つの意味を持つので、意図しない上書きに気を付けてください。削除には delete を使いますが、実務では削除よりも null を入れて「空である」と表現することのほうが多いです。

delete はキーそのものを消します。work.year = undefined と書くとキーは残ったまま値だけが undefined になります。見た目の結果は似ていますが、後で出てくる Object.keys の結果が変わるので別物です。

存在しないキーは undefined になる

オブジェクトの性格をひとことで表すなら「聞かれたことに無ければ undefined と答える」です。

const work = { title: "自己紹介カード", year: 2026 };

console.log(work.views);   // undefined
console.log(work.title);   // 自己紹介カード

work.views は存在しないのでエラーにはならず undefined が返ります。これは親切な仕様である反面、タイポに気付けないという弱点にもなります。work.tittle と書いても JavaScript は黙って undefined を返すだけで、何も教えてくれません。

キーがあるかどうかを確かめたいときは in 演算子を使います。

console.log("title" in work);   // true
console.log("views" in work);   // false

work.views === undefined という判定でもだいたいは足りますが、「キーはあるけれど値が undefined」という状態と区別できません。厳密に存在だけを見たいときは in を選びます。

キーの一覧を取り出す

オブジェクトにどんなキーが入っているかを知りたいときは Object.keys を使います。

const work = { title: "スキル一覧の表", year: 2026, views: 40 };

console.log(Object.keys(work));     // ["title", "year", "views"]
console.log(Object.keys(work).length);  // 3

戻り値は配列なので、第 5 章で覚えた for-of がそのまま使えます。

for (const key of Object.keys(work)) {
  console.log(key + " は " + work[key]);
}

ここでキー名が変数に入っているため、ドット記法ではなくブラケット記法の出番になるわけです。

Object.keys の仲間に Object.values と Object.entries があります。値だけの配列、キーと値のペアの配列がそれぞれ手に入ります。集計に便利な道具ですが、本格的な使いどころは実践編にゆずります。

入れ子のオブジェクト

値の中にオブジェクトを入れることもできます。これを入れ子 (ネスト) と呼びます。

const work = {
  title: "プロフィールサイト",
  year: 2026,
  links: {
    url: "https://example.com/profile",
    repo: "https://example.com/repo",
  },
};

console.log(work.links.url);   // https://example.com/profile

ドットをつなげれば何階層でも降りていけます。配列を値に入れることもできます。

const work = {
  title: "プロフィールサイト",
  tags: ["HTML", "CSS", "JavaScript"],
};

console.log(work.tags[0]);       // HTML
console.log(work.tags.length);   // 3

配列の中にオブジェクトを並べる形も頻出です。これがこの章のゴールである「作品データの配列」の姿になります。

const works = [
  { title: "プロフィールサイト", year: 2026 },
  { title: "自己紹介カード", year: 2026 },
];

console.log(works[1].title);   // 自己紹介カード

よくある間違い

オブジェクトを覚えたての頃にやりがちな失敗を 3 つ挙げます。

キー名のタイポに気付かない

const work = { title: "プロフィールサイト" };
console.log(work.titel);   // undefined  エラーは出ない

undefined が返ってきたら、まずキー名のつづりを疑ってください。エディタの補完を使うのが最大の予防策です。

変数の中身でキーを引きたいのにドット記法を使う

const key = "title";
console.log(work.key);    // undefined
console.log(work[key]);   // プロフィールサイト  これが正解

入れ子の途中が無いのに深く掘ろうとする

const work = { title: "自己紹介カード" };
console.log(work.links.url);   // TypeError で止まる

work.links が undefined なので、そこからさらに .url を読もうとした瞬間にエラーになります。この問題への対処法はこの章の後半で扱います。

この章のポイント

ここまでの要点 オブジェクトは {} にキーと値をまとめた箱。読み書きはドット記法かブラケット記法、無いキーは undefined、キーの一覧は Object.keys で取れる。

やってみよう

作品を表すオブジェクトを組み立てる関数を書きます。

引数 title と year を受け取る
空のオブジェクト {} から始めて、キーを 1 つずつ追加していく
year が渡されなかったときは 0 を入れる
published は必ず false にしておく

year が渡されない場合、year の中身は undefined になります。このレッスンで学んだとおり、無い値は undefined になるという性質をそのまま判定に使えます。

オブジェクトのきほん