for...in文は少しややこしく感じるかもしれませんが、初心者向けにかみ砕いて、例題を交えながら丁寧に解説します。
1. for...in文とは？
for...in文は オブジェクトの「プロパティ名」を順番に取り出して処理する繰り返し文 です。
- オブジェクトとは、キー（名前）と値のセットを持った箱のようなものです。
for...in文は、この箱の中身を一つずつ見ていくイメージです。
基本の書き方
for (let key in オブジェクト) {
// key はプロパティの名前
// オブジェクト[key] はプロパティの値
console.log(key, オブジェクト[key]);
}
2. 例題：果物の値段を出す
const fruit = {
orange: 170,
apple: 90,
lemon: 110
};
for (let key in fruit) {
console.log(key + "の値段は" + fruit[key] + "円です");
}
💡 実行結果：
orangeの値段は170円です
appleの値段は90円です
lemonの値段は110円です
keyには"orange"、"apple"、"lemon"が順に入りますfruit[key]で値段を取り出して表示しています
3. 配列でも使えるけど注意！
const fruits = ['orange', 'apple', 'lemon'];
for (let index in fruits) {
console.log(index + "番目の果物は" + fruits[index]);
}
実行結果：
0番目の果物はorange
1番目の果物はapple
2番目の果物はlemon
for...inで配列を回すと、インデックスが文字列として順番に出ることに注意- 配列を順番に処理したい場合は、通常の
for文やforEachを使うほうが安全です
4. 初心者向けのポイント
for...inはオブジェクト向き- プロパティの順番は保証されない
- 配列にはあまり向かない（順番通りに処理したい場合は注意）
keyを使って値を取り出す（オブジェクト[key]）
5. 練習問題
問題
次のオブジェクトを使って、各商品の値段を「〇〇の値段は△△円です」と表示してください。
const items = {
pen: 120,
notebook: 250,
eraser: 50
};
ヒント
for (let key in items) { ... }items[key]で値段が取れる
解答と解答
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for...in練習問題</title>
</head>
<body>
<h2>商品の値段一覧</h2>
<ul id="itemList"></ul>
<script>
// 練習問題用のオブジェクト
const items = {
pen: 120,
notebook: 250,
eraser: 50
};
// for...in文でプロパティを順に取り出す
const ul = document.getElementById('itemList');
for (let key in items) {
const li = document.createElement('li');
li.textContent = key + "の値段は" + items[key] + "円です";
ul.appendChild(li);
}
</script>
</body>
</html>
解説
for (let key in items)keyには"pen"、"notebook"、"eraser"が順番に入ります
items[key]keyを使って値段を取得しています- 例えば
items["pen"]は120になります
<li>要素を作って表示- JavaScriptでHTMLを動的に作っています
- 最終的に
<ul>の中に「penの値段は120円です」などが追加されます