先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでオブジェクトの中身を全部調べたいときって、どうしたらいいんですか？」

先生

「そういうときは、for...in文というループ処理を使うと便利ですよ。」

生徒

「for...inって普通のforとは違うんですか？」

先生

「はい、少し違います。for...inは、オブジェクトのプロパティ名を1つずつ取り出すための専用の構文なんです。」

1. オブジェクトをループ処理するとは？

JavaScriptのオブジェクトには、キー（名前）と値がセットになった形でデータが保存されています。配列のように番号で管理されているのではなく、それぞれのデータに「意味のある名前」が付いているのが特徴です。このようなオブジェクトの中身を一つずつ確認したいときに便利なのが、for...inというループ処理です。

オブジェクトをループ処理するとは、「オブジェクトの中にどんなキーがあり、それぞれにどんな値が入っているのかを順番に取り出して確認すること」を意味します。プロパティの数が少ない場合は直接書いて確認できますが、数が増えたり内容が動的に変わったりする場合は、ループ処理を使うことで効率よく扱えるようになります。

たとえば、次のようなユーザー情報をまとめたオブジェクトがあったとします。名前や年齢、職業といった情報が、キーと値の組み合わせで保存されています。


const user = {
  name: "佐藤",
  age: 30,
  job: "エンジニア"
};

このuserオブジェクトの中には、「name」「age」「job」という3つのキーがあります。これらを一つずつ順番に取り出して処理したい場合、for...inを使うことで、キーの名前を自動的に取得できます。

プログラミング未経験の方は、「オブジェクトの中身を全部なぞって確認する作業」とイメージすると分かりやすいでしょう。for...inは、その作業をJavaScriptが代わりにやってくれる便利な仕組みなのです。

2. for...in構文の基本

for...in文は、JavaScriptでオブジェクトをループ処理するときの基本となる書き方です。ポイントは「オブジェクトの中にあるキーを、ひとつずつ取り出して繰り返す」という点にあります。配列のように番号で回すのではなく、プロパティ名（キー）を順番に受け取るためのループだと覚えておくと理解しやすくなります。

for...in文の基本の形は、次のようになります。


for (let キー in オブジェクト名) {
  // 繰り返し処理の中身
}

ここでの「キー」は、オブジェクトの中に入っているプロパティ名を受け取るための変数です。たとえばuserというオブジェクトなら、nameやageのような名前が順番に入ってきます。つまり、ループのたびに「今見ている項目の名前」を教えてくれるイメージです。

たとえば、先ほどのuserオブジェクトの各キーだけを取り出して表示するには、次のように書きます。


for (let key in user) {
  console.log(key);
}


name
age
job

このように、オブジェクトのすべてのプロパティ名（キー）が順番に取り出されて表示されます。まずは「for...inはキーを取り出すループ」と覚えると、オブジェクトの確認や一覧表示などの処理がぐっと書きやすくなります。

もう少し身近な例として、家計簿のメモのように「項目名」と「金額」をまとめたオブジェクトを考えてみましょう。項目が増えても、for...inなら同じ書き方でまとめて確認できます。


const wallet = {
  lunch: 800,
  coffee: 200,
  book: 1500
};

for (let key in wallet) {
  console.log(key);
}

このサンプルでも、ループのたびにlunch、coffee、bookといったキーが順番に取り出されます。オブジェクトのループ処理に慣れる第一歩として、「まずはキーだけ出してみる」のはとてもおすすめです。

3. プロパティの値も取り出すには？

for...inで取り出せるのは「キー（プロパティ名）」ですが、実際に知りたいのはその中に入っている値ですよね。値を取り出すときは、キーを使ってオブジェクトにアクセスします。ここでよく使うのが 角かっこ の書き方です。

たとえば、keyという変数に入っているキーを使って値を取り出す場合は、次のように書きます。 user.keyではなくuser[key]になる点がポイントです。keyは変数なので、ドットではうまく参照できません。


console.log(user[key]);

実際のループで「キー」と「値」をセットで表示すると、オブジェクトの中身が一気に見やすくなります。たとえば次のように書くと、name: 佐藤のような形で確認できます。


for (let key in user) {
  console.log(key + ": " + user[key]);
}


name: 佐藤
age: 30
job: エンジニア

もう少し身近な例として、「今日やること」をオブジェクトでメモしてみましょう。やること（キー）と、内容（値）がセットになっているので、ループで一覧表示すると便利です。


const todo = {
  morning: "そうじ",
  noon: "ひるごはん",
  night: "べんきょう"
};

for (let key in todo) {
  console.log(key + ": " + todo[key]);
}

このようにfor...inを使うと、オブジェクトのプロパティ名と値をまとめて取り出せます。入力フォームの内容確認や、受け取ったデータの一覧表示などでも同じ考え方が使えるので、「キーはkey、値はオブジェクト[key]」という形をセットで覚えておくと安心です。

4. どんなときにfor...inを使う？

JavaScriptでオブジェクトの中身を調べたり、全ての情報を画面に出したりするときにfor...inはとても役立ちます。

たとえば、次のような場面です：

入力フォームの結果を一覧表示したい
APIで受け取ったデータを全部見たい
オブジェクトにどんなプロパティがあるか確認したい

特に、プロパティの名前が決まっていない場合などにはfor...inがとても便利です。

5. 配列との違いに注意

for...inはオブジェクト専用と考えてください。配列（Array）にも使えますが、順番が保証されなかったり、予期しないプロパティが含まれたりすることがあります。

配列を扱うときはfor文やfor...ofを使うのが基本です。for...inはオブジェクト用のループだと覚えておきましょう。

6. ネストされたオブジェクトもループできる？

オブジェクトの中にまた別のオブジェクトがある場合（これを「ネスト」といいます）もあります。


const person = {
  name: "田中",
  contact: {
    email: "tanaka@example.com",
    phone: "090-1234-5678"
  }
};

このとき、contactの中身までループ処理したい場合は、for...inを2重に使います。


for (let key in person.contact) {
  console.log(key + ": " + person.contact[key]);
}


email: tanaka@example.com
phone: 090-1234-5678

このように、オブジェクトの中にある別のオブジェクトも個別にループ処理が可能です。

JavaScriptのオブジェクトのループ処理（for...in）の基本を学ぼう