JavaScript - For...in Loop: A Beginner's Guide

こんにちは、未来のプログラマーさん！今日は、JavaScriptの便利なツール之一である for...in ループについて掘り下げます。コードを書いたことがないとしても心配しないでください。私は年々多くの生徒に教えてきたように、ステップバイステップで説明します。コーヒー（またはあなたが好きなお茶）を片手に、始めましょう！

What is the for...in Loop?

for...in ループとは何かを理解する前に、まず概念を把握しましょう。大きな箱にたくさんのおもちゃが詰まっている（JavaScriptではこの箱を「オブジェクト」と呼びます）とします。for...in ループは、その箱に手を伸ばして一つ一つおもちゃを取り出す魔法の手のようなものです。これにより、それぞれのおもちゃを個別に見ることができます。

プログラミングの言葉では、for...in ループはオブジェクトのプロパティを繰り返し処理する方法です。オブジェクトに保存されている各データを一つ一つ見る方法です。

Syntax of the for...in Loop

では、for...in ループの書き方を見てみましょう。初めて見ると少し奇妙に見えるかもしれませんが、一緒に分解していきましょう！

for (let key in object) {
// 実行されるコード
}

これを分解すると：

• for: このキーワードはJavaScriptにループを開始することを伝えます。
• let key: これは変数（ここでは key と呼んでいます）を作成し、オブジェクトを通るときに各プロパティの名前を保持します。
• in: このキーワードは変数名とループを回すオブジェクトを区切ります。
• object: これは検査したいオブジェクトです。
• キャリッジリターン {} は、オブジェクトの各プロパティに対して実行されるコードを含みます。

Examples of the for...in Loop in Action

Example 1: Exploring a Simple Object

簡単な例から始めましょう。本を表すオブジェクトを考えてみます：

let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925
};

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

このコードを実行すると、コンソールに以下のような出力が見られます：

title: The Great Gatsby
author: F. Scott Fitzgerald
year: 1925

ここで何が起きているのでしょうか？私たちの for...in ループは book オブジェクトの各プロパティを繰り返し処理しています。各反復の際に：

• property は現在のプロパティ名（"title"、"author"、または "year"）を保持します。
• book[property] はそのプロパティの値を返します。
• console.log() を使用して、プロパティ名とその値を印刷します。

Example 2: Counting Properties

オブジェクトのプロパティ数を数えたいとします：

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("The car object has " + propertyCount + " properties.");

これは以下のような出力を表示します： "The car object has 4 properties."

この例では、私たちは for...in ループを使用して car オブジェクトの各プロパティを繰り返し処理しています。プロパティ自体に何かを行うのではなく、ループが実行されるたびにカウンタをインクリメントしています。これにより、オブジェクトのプロパティ数を取得できます。

Example 3: Filtering Properties

特定のプロパティに対してのみ何かを行いたい場合があります。例を見てみましょう：

let person = {
name: "Alice",
age: 30,
city: "New York",
job: "Engineer",
hobby: "painting"
};

console.log("Properties that start with 'j':");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

これは以下のような出力を表示します：

Properties that start with 'j':
job: Engineer

この例では、私たちは for...in ループを使用して person オブジェクトのすべてのプロパティを繰り返し処理していますが、文字 'j' で始まるプロパティのみをログにしています。startsWith() メソッドを使用してこの条件をチェックしています。

Common Methods Used with for...in Loops

以下は for...in ループと一緒に使用される一般的なメソッドの表です：

メソッド	説明	例
hasOwnProperty()	プロパティがオブジェクトに直接存在するか（継承されていないか）をチェックします	if (object.hasOwnProperty(property))
Object.keys()	オブジェクトの自身の列挙可能なプロパティ名の配列を返します	Object.keys(object)
Object.values()	オブジェクトの自身の列挙可能なプロパティ値の配列を返します	Object.values(object)
Object.entries()	オブジェクトの自身の列挙可能な文字列キーのプロパティの [key, value] ペアの配列を返します	Object.entries(object)

Wrapping Up

それでは、for...in ループの世界への第一歩を踏み出しました。自転車に乗るのと同じで、プログラミングは練習が大事です。すぐに理解できないとがっかりしないでください。違うオブジェクトを試してみて、for...in ループで何ができるか見てください。

コ딩の世界では、「プログラミングを学ぶ唯一の方法はプログラミングすること」と言います。ですから、あなたのお気に入りの映画や本を表すオブジェクトを作成し、それを探索するために for...in ループを使用してみてください。

ハッピーコーディング、そして忘れないでください。すべての専門家もかつては初心者でした。がんばって続ければ、すぐにプロのようにオブジェクトをループすることができるようになります！

Credits: Image by storyset